angularJS communicating with API

Question

hi i am new completely new to AngularJS. Trying to communicate with a JSON API. The API is beign called i am getting results bit the results are not getting filled into the view.

Here is the view:

    <div >

   <div data-ng-repeat="order in ordersResult.orders">
       {{error}}
       <fieldset class="fieldset">

            <legend>
            <b>{{order.klant.straat}} {{order.klant.huisnummer}} - {{order.klant.bedrijf}}</b>
            </legend>
            <table class="table table-bordered table-striped table-hover">
                <th>Broodje</th><th>Aantal</th>
                <tr data-ng-repeat="(tag,aantal) in order.broodjes" data-ng-click="check()">
                    <td>{{tag}}</td><td>{{aantal}}x</td>
                </tr>


               <tr data-ng-repeat="(tag,opmerkingen) in order.broodjesSpeciaal">
                   <td>{{tag}}</td><td><span ng-repeat="opmerking in opmerkingen">1x {{opmerking}}<br></span></td>
               </tr>
            </table>

       </fieldset>

    </div>
</div>

Here is the Controller:

app.controller('BezorgController', function ($scope, $resource) {


function getToday(){
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1;

    var yyyy = today.getFullYear();
    if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm}
    //return mm+""+dd+""+yyyy;

    return "22052013";
}






$scope.ordersRequest = $resource('http://www.movieapphd.com/bertus/api.1.0.0/order/bezorging/:day?key=:key',
    {day: getToday(), key: API_KEY },
    {get: {method: "JSONP"}}
);
$scope.ordersResult = $scope.ordersRequest.get();

if($scope.ordersResult.size == 0){
    $scope.error = "Geen bezorgingen vandaag";
}

});

Here is the json that i get:

{
   "orders":[
      {
         "klant":{
            "bedrijf":"X",
            "straat":"Haarlemmer",
            "huisnummer":"8"
         },
         "broodjes":{
            "0.0":0
         },
         "broodjesSpeciaal":{
            "0.0":[
               "nothing"
            ]
         }
      },
      {
         "klant":{
            "bedrijf":"Anouk Beauty Gangbang",
            "straat":"Haarlemmer",
            "huisnummer":"220"
         },
         "broodjes":{
            "0.0":0,
            "1.1":2,
            "1.2":1,
            "2.3":1
         },
         "broodjesSpeciaal":{
            "0.0":[
               "nothing"
            ]
         }
      },
      {
         "klant":{
            "bedrijf":"Hans Kazan GoochelTrucs",
            "straat":"Haarlemmer",
            "huisnummer":"222"
         },
         "broodjes":{
            "0.0":0,
            "1.1":2,
            "1.2":2,
            "2.3":1,
            "3.1":1
         },
         "broodjesSpeciaal":{
            "0.0":[
               "nothing"
            ],
            "2.3":[
               "zonder stukjes",
               "met extra stukjes"
            ]
         }
      }
   ]
}

What am i doing wrong here?

Uhhh whats up with "Anouk Beauty Gangbang" in your JSON?

Alan
– Alan

2013-05-25 22:26:24 +00:00
Commented May 25, 2013 at 22:26 — Alan
– Alan, Commented May 25, 2013 at 22:26

Femi · Accepted Answer · 2013-05-25 21:41:01Z

1

From the AngularJS docs, you can't use that syntax for arrays, and it appears sometimes broodjes and broodjesSpecial are arrays, and sometimes associative arrays. Also, in the one case where broodjes is an associative array there are no keys.

answered May 25, 2013 at 21:41

Femi

64.8k8 gold badges120 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sn0ep Over a year ago

Check my edit, please. I have changed to api to return an object called orders and give it an array.

Femi Over a year ago

Still not consistent: "broodjes":[] and "broodjes":{"3.1":1, "1.2":1}. You'll need to make sure that you make those look the same.

sn0ep Over a year ago

is that why im getting the following error also: Uncaught SyntaxError: Unexpected token : /bertus/api.1.0.0/order/bezorging/22052013/?key=

sn0ep Over a year ago

it makes no difference if i make the response consistent. look at edit

sn0ep · Accepted Answer · 2013-05-25 22:20:39Z

0

needed to change the method to get since the API is located on the same server.

answered May 25, 2013 at 22:20

sn0ep

3,9438 gold badges41 silver badges68 bronze badges

Collectives™ on Stack Overflow

angularJS communicating with API

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related