Combining results from WP-API using AngularJS

Question

Combining results from WP-API using AngularJS

Lucy Brown

2022年2月28日 04:03

I currently have this site - http://dev.5874.co.uk/scd-data/ where I have a dropdown which displays results from WP-API which I am pulling in through AngularJS.

It currently combines the two sets of results as they're separate URL's, the results are in categories within a custom post type so if both posts are 'tagged' in the same category chosen they display twice. I need a way to combine the two sets of results but only showing one of the posts - I hope this makes sense. I'm very new to API data and AngularJS and I imagine there is a much simpler way of doing this. Any help would be much appreciated. Here is a snippet of my code to show how it's currently working.

Thanks in advance!

script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"/script
script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"/script

style

    .desc {display: none;}

/style

script type="text/javascript"
                    $(function(){
                              $('.selectOption').change(function(){
                                var selected = $(this).find(':selected').text();
                                //alert(selected);
                                $(".desc").hide();
                                 $('#' + selected).show();
                              }).change()
                    });
/script


script

    var app = angular.module('myApp', []);

    app.controller('northWestCtrl', function($scope, $http) {
      var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listingsfilter[listing_area]=northwest';
      $http.get(url).then(function(data) {
        $scope.data = data.data;
      });
    });
/script


         select class="selectOption"
                        optionSearch by Region/option
                        optionNorthWest/option
                        optionNorthEast/option
                        optionMidlands/option
                        optionEastAnglia/option
                        optionSouthEast/option
                        optionSouthWest/option
                        optionScotland/option
                        optionWales/option
                        optionNorthernIreland/option
                        optionChannelIslands/option
       /select


div id="changingArea"


    body ng-app="myApp"
                div id="NorthWest" class="desc"

                div  ng-controller="northWestCtrl"
                  div ng-repeat="d in data"
                    h2 class="entry-title title-post"{{d.title}}/h2
                    img src="{{d.acf.logo}}"
                    div id="listing-contact"Contact: {{d.acf.contact}}, {{d.acf.position}}/div
                    div id="listing-address-1"
                      {{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}}
                    /div
                    div id="listing-phone"Telephone: {{d.acf.telephone}}/div
                    div id="listing-mobile"Mobile: {{d.acf.mobile}}/div
                    div id="listing-email"Email: {{d.acf.email}}/div
                    div id="listing-website"Website: a href="{{d.acf.website}}"{{d.acf.website}}/a/div
                    div id="listing-established"Established: {{d.acf.established}}/div
                    div id="listing-about"About: {{d.acf.about}}/div
                    div id="listing-mailingaddress"Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}}, {{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}}/div
                    div id="listing-directions"Directions: {{d.acf.directions}}/div
                    div id="scd-link"a href="{{d.link}}"View on The Shooting Club Directory/a/div
                  /div
                /div
              /div
/body
/div

Topic wp-api Wordpress javascript

Category Web

ccprog · Accepted Answer · 2016年1月28日 15:19

I'll assume the html you posted is a template that is part of a theme or plugin where you can interact with the page loading routines.

You do not need to load jQuery, it is already loaded by WordPress. Instead, you should leverage the script loading system. The third parameter in wp_enqueue_script states dependencies: my-app needs angular to be loaded, angular needs jQuery to be loaded.

<?php
add_action( 'get_header', 'add_to_header');

function add_to_header () {
    add_action( 'wp_enqueue_scripts', 'add_my_scripts');
}

function add_my_scripts () {
    wp_enqueue_script('angular', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js', array( 'jquery' ));
    // you could load your angular app script here from a separate file, like:
    wp_enqueue_script('my-app', 'path/to/my-app.js', array( 'angular' ));
}
?>

From a look at your page, I can see no reason why you need more than one controller, or more than one regional listing areas. Leave off the style and jQuery script, position your select(s) inside the controller scope and set a value for each option:

<select ng-model="region" ng-change="load(region)">
    <option value="northwest">NorthWest</option>
    ...
</select>

Your controller then should have a function loading the regional data only as needed:

var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=';
$scope.data_ready = false;
$scope.load = function (region) {
    $http.get(url + region).then(function(data) {
    $scope.data = data.data;
    $scope.data_ready = true;
});

The data_ready variable will hide or show your listing area:

<div ng-show="data_ready">
   <div ng-repeat="d in data">
       ...

As the data loaded changes, so will content of the listing area.