Site icon Hip-Hop Website Design and Development

Combining outcomes from WP-API utilizing AngularJS

I at the moment have this web site – http://dev.5874.co.uk/scd-data/ the place I’ve a dropdown which shows outcomes from WP-API which I’m pulling in by way of AngularJS.

It at the moment combines the 2 units of outcomes as they’re separate URL’s, the outcomes are in classes inside a customized put up sort so if each posts are ‘tagged’ in the identical class chosen they show twice. I want a method to mix the 2 units of outcomes however solely exhibiting one of many posts – I hope this is sensible. I am very new to API knowledge and AngularJS and I think about there’s a a lot less complicated means of doing this. Any assist can be a lot appreciated. Here’s a snippet of my code to point out the way it’s at the moment working.

Thanks prematurely!

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script sort="textual content/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<model>

    .desc {show: none;}

</model>

<script sort="textual content/javascript">
                    $(operate(){
                              $('.selectOption').change(operate(){
                                var chosen = $(this).discover(':chosen').textual content();
                                //alert(chosen);
                                $(".desc").disguise();
                                 $('#' + chosen).present();
                              }).change()
                    });
</script>


<script>

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

    app.controller('northWestCtrl', operate($scope, $http) {
      var url = 'http://scd.blaze.wpengine.com/wp-json/posts?sort=listings&filter[listing_area]=northwest';
      $http.get(url).then(operate(knowledge) {
        $scope.knowledge = knowledge.knowledge;
      });
    });
</script>


         <choose class="selectOption">
                        <choice>Search by Area</choice>
                        <choice>NorthWest</choice>
                        <choice>NorthEast</choice>
                        <choice>Midlands</choice>
                        <choice>EastAnglia</choice>
                        <choice>SouthEast</choice>
                        <choice>SouthWest</choice>
                        <choice>Scotland</choice>
                        <choice>Wales</choice>
                        <choice>NorthernIreland</choice>
                        <choice>ChannelIslands</choice>
       </choose>


<div id="changingArea">


    <physique ng-app="myApp">
                <div id="NorthWest" class="desc">

                <div  ng-controller="northWestCtrl">
                  <div ng-repeat="d in knowledge">
                    <h2 class="entry-title title-post">{{d.title}}</h2>
                    <img src="{{d.acf.emblem}}">
                    <div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.place}}</div>
                    <div id="listing-address-1">
                      {{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.city}} {{d.acf.county}} {{d.acf.postcode}}
                    </div>
                    <div id="listing-phone">Phone: {{d.acf.phone}}</div>
                    <div id="listing-mobile">Cell: {{d.acf.cellular}}</div>
                    <div id="listing-email">Electronic mail: {{d.acf.electronic mail}}</div>
                    <div id="listing-website">Web site: <a href="{{d.acf.web site}}">{{d.acf.web site}}</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 Handle: {{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">Instructions: {{d.acf.instructions}}</div>
                    <div id="scd-link"><a href="{{d.hyperlink}}">View on The Capturing Membership Listing</a></div>
                  </div>
                </div>
              </div>
</physique>
</div>