how to read data from nested json using rest services url

Question

I am using spring rest .I am getting valid json .

    {  
   "userlist":[  
      {  
         "id":2,
         "email":"[email protected]",
         "password":"$2a$10$41f83FwKhR9OWNFFeBeV0u.dMIy48HsIiA6o/icgKW2nmbQyPzsby",
         "name":"waqas",
         "lastName":"kamran",
         "active":1,
         "roles":[  
            {  
               "id":2,
               "role":"user",
               "new":false
            }
         ],
         "new":false
      },
      {  
         "id":3,
         "email":"[email protected]",
         "password":"$2a$10$pAZljuoMMXVALDpyOQtmletT0XbS2bn8ENEa7DxfgYQyFeLvpklRa",
         "name":"waqar",
         "lastName":"kamran",
         "active":1,
         "roles":[  
            {  
               "id":2,
               "role":"user",
               "new":false
            }
         ],
         "new":false
      },
      {  
         "id":4,
         "email":"[email protected]",
         "password":"$2a$10$fpQagNnB79JRsdFJBuMiDOw3E2F8OSopmfAGyA2RuurM63vWC/CCm",
         "name":"waqas",
         "lastName":"kamran",
         "active":1,
         "roles":[  
            {  
               "id":1,
               "role":"admin",
               "new":false
            }
         ],
         "new":false
      },
      {  
         "id":5,
         "email":"[email protected]",
         "password":"$2a$10$LXWJP2mVsD/s3xhZrmnhOerPPCTguDXBqwXwihPWIBMF0jgufuBRu",
         "name":"naila",
         "lastName":"naseem",
         "active":1,
         "roles":[  
            {  
               "id":1,
               "role":"admin",
               "new":false
            }
         ],
         "new":false
      },
      {  
         "id":6,
         "email":"[email protected]",
         "password":"$2a$10$CxYTDaJ.HUVbNCT8RGg1a.DISG2xGcQ8azV2YwOwlT6MRdPBCjgbK",
         "name":"zain",
         "lastName":"haq",
         "active":1,
         "roles":[  
            {  
               "id":2,
               "role":"user",
               "new":false
            }
         ],
         "new":false
      }
   ],
   "roleList":[  
      {  
         "id":1,
         "role":"admin",
         "new":false
      },
      {  
         "id":2,
         "role":"user",
         "new":false
      }
   ]
}

now i am trying to use jquery for each loop to show result but unable to do that . i am little bit confused about nested array .

i am using following js code. actually i am new to jquery .

<table class="data-contacts-js table table-striped" >
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>

            </tr>
    </table>

    <button id="fetchContacts" class="btn btn-default" type="submit">show users</button>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">

        $("#fetchContacts").bind("click", function() {

            $.get("http://localhost:8080/contacts", function(data) {

                $.each(data, function(i, contact) {

                    $(".data-contacts-js").append(
                        "<tr><td>" + contact.id + "</td>" +
                        "<td>" + contact.name+ "</td>" +
                        "<td>" + contact.email + "</td></tr>");
                });

            });
        });
    </script>

thanks for any kind of help .

note . i have edited question , how can i get role from roles array that is inside userlist array .

try my answer. Its working as you want.

Himanshu Upadhyay
– Himanshu Upadhyay

2017-07-22 18:15:17 +00:00
Commented Jul 22, 2017 at 18:15 — Himanshu Upadhyay
– Himanshu Upadhyay, Commented Jul 22, 2017 at 18:15
you've got </th> where it should be </tr> on line 7

marzelin
– marzelin

2017-07-22 18:16:15 +00:00
Commented Jul 22, 2017 at 18:16 — marzelin
– marzelin, Commented Jul 22, 2017 at 18:16

Himanshu Upadhyay · Accepted Answer · 2017-07-22 18:10:33Z

1

You should consider userlist in each loop. Like this:

$.each(data.userlist, function(i, contact) {
       $(".data-contacts-js").append(
       "<tr><td>" + contact.id + "</td>" +
       "<td>" + contact.name+ "</td>" +
       "<td>" + contact.email + "</td></tr>");
});

answered Jul 22, 2017 at 18:10

Himanshu Upadhyay

6,5571 gold badge23 silver badges34 bronze badges

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

5 Comments

naila naseem Over a year ago

yes i will accept your answer . please check how can i get role from roles array that is inside in userlist array . check roles part in my json . thanks

Himanshu Upadhyay Over a year ago

For all objects, roles will have only one set?

Himanshu Upadhyay Over a year ago

If yes then, inside the each loop, access the role like this: contacts.roles[0].role;

naila naseem Over a year ago

can you please guide me @himanshu how can i use href link with id . like i want to use "<td><a href='user/delete/' "+contact.id+">"+Delete Me +"</a>"

Himanshu Upadhyay Over a year ago

You have written the answer almost: "<td><a href='user/delete/' "+contact.id+">"+Delete Me +"</a></td>"

ewwink · Accepted Answer · 2017-07-22 18:26:36Z

0

$.get() return string, you need to parse to JSON

var data = JSON.parse(data)
$.each(data.userlist, function(i, contact) {...

or using $.getJSON() to return as JSON object

$.getJSON("http://localhost:8080/contacts", function(data) {
  $.each(data.userlist, function(i, contact) {

answered Jul 22, 2017 at 18:26

ewwink

19.3k2 gold badges49 silver badges56 bronze badges

Collectives™ on Stack Overflow

how to read data from nested json using rest services url

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related