Solved

JSON nested response not displaying

Posted on 2014-11-06
2
96 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

770 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