Solved

JSON nested response not displaying

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
replace link with jQuery 4 20
Not allowed to load local recource. 4 34
Javascript - Uncaught SyntaxError: Unexpected token } (Image Swap onclick) 12 51
Json Schema 8 32
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…

839 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