Solved

JSON nested response not displaying

Posted on 2014-11-06
2
95 Views
Last Modified: 2014-11-18
We are talking to an API and most of the calls are doing what we expect, but there's one set of calls I just get blank rows from and as many other clients can use it I must be doing something wrong

In my "controller.js" I have this

####
$http.get('/rest/queue/54').
    success(function(data, status, headers, config) {
      $scope.customers = data;
    }).
    error(function(data, status, headers, config) {
      // log error
    });
####

This is what I get returned when making the call from the command line:
####
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: application/json
Content-Length: 666
Date: Sun, 02 Nov 2014 15:18:40 GMT

{"shortName":"XYZX","clientName":"The Amazing One","queueSize":2,"queueDetails":[{"user":{"name":"Markus Sweden","email":"markus@sweden.com","phoneNumber":"46730773743","id":514,"activated":false,"pin":"6592","usersQueues":[]},"partySize":3,"timeEnteredQueue":1384497884000,"entryStatus":"NOTIFIED","estimatedWaitingTime":30,"userMessage":null,"id":97,"notes":""},{"user":{"name":"Miky","email":"Miky@hotmail.com","phoneNumber":"44785353533","id":8,"activated":false,"pin":"6363","usersQueues":[]},"partySize":7,"timeEnteredQueue":1384509850000,"entryStatus":"NOTIFIED","estimatedWaitingTime":65,"userMessage":null,"id":98,"notes":"Tall, striped jumper "}]}
####

And then on the webpage this:
####
<tr ng-repeat="customer in customers">
                      <td>{{customer.shortName}}</td>
                      <td>{{customer.queueDetails.user.name}}</td>
                </tr>
####

It's looping through and giving me back two rows as there's two entries, and if there's 12 I get 12 rows back but no data

I'm making a similar call which is working fine, that code below

Controller.js
####
$http.get('/rest/users/').
    success(function(data, status, headers, config) {
      $scope.customers = data;
    }).
    error(function(data, status, headers, config) {
      // log error
    });
####

This is what I get returned when making the call from the command line:
####
[{"name":"Thomas","email":"user@email.com","phoneNumber":"447901353380","id":2,"activated":false,"pin":"4340","usersQueues":[]},{"name":"Jim Ant","email":"jam@ial.co.uk","phoneNumber":"447868439992","id":4,"activated":false,"pin":"4397","usersQueues":[]}]
####

And then on the webpage this:
####
<tr ng-repeat="customer in customers">
                      <td>{{customer.name}}</td>
                      <td>{{customer.email}}</td>
                </tr>
####

This last one works just fine

It is me not using the right syntax when the JSON return is nested or something else I'm doing wrong ?
0
Comment
Question by:DanteAdmin
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40426757
Use :
    <tr ng-repeat="customer in customers.queueDetails">
        <td>{{customer.user.name}}</td>
        <td>{{customer.user.email}}</td>
    </tr>

Open in new window


Test page : http://jsfiddle.net/0r165x6f/
0
 

Author Comment

by:DanteAdmin
ID: 40450767
Thanks this now all works, but it seems I can't get info after the double []

####
...pin":"6592","usersQueues":[]},"partySize":3,"timeEnteredQueue":1384497884000,"entryStatus":"NOTIFIED","estimatedWaitingTime":30,"userMessage":null,"id":97,"notes":""},{"user":{"name":"Miky","email":"Miky@hotmail.com","phoneNumber":"44785353533","id":8,"activated":false,"pin":"6363","usersQueues":[]},"partySize":7,"timeEnteredQueue":1384509850000,"entryStatus":"NOTIFIED","estimatedWaitingTime":65,"userMessage":null,"id":98,"notes":"Tall, striped jumper "}]}

Everything before that I can get to but nothing after

Is there a way for me to ignore that there is no data and continue, or do we have to fix that on the API side that outputs the JSON ?
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now