Parse Json multidimentional Array in jQuery

Question

I'm trying to parse text from facebook json file which has nested arrays, but i get only the elements of first level of array. I want to get and the data from nested array, if exists. For example using the code above, i can't get the fields in arrays "category_list".

Example of data is

{
"userdata": [
        {
          "category": "Community",
          "name": "whitespace",
          "created_time": "2014-01-30T13:58:22+0000",
          "id": "xxxxxxxxxxxxxxxxxx"
        },
        {
          "category": "City",
          "category_list": [
            {
              "id": "xxxxxxxxxxxxxxxxxx",
              "name": "City"
            }
          ],
          "name": "Marburg, Queensland",
          "created_time": "2014-01-09T13:09:14+0000",
          "id": "xxxxxxxxxxxxxxxxxx"
        },
        {
          "category": "Hotel",
          "name": "Hotel Line",
          "created_time": "2014-01-06T20:41:44+0000",
          "id": "xxxxxxxxxxxxxxxxxx"
        },
        {
          "category": "Food/beverages",
          "name": "Olive",
          "created_time": "2014-01-06T20:41:16+0000",
          "id": "xxxxxxxxxxxxxxxxxx"
        },
        {
          "category": "Education",
          "name": "Genius Solutions Group",
          "created_time": "2014-01-06T20:40:48+0000",
          "id": "xxxxxxxxxxxxxxxxxx"
        },
        {
          "category": "Hotel",
          "category_list": [
            {
              "id": "128232937246338",
              "name": "Travel & Transportation"
            }
          ],
          "name": "Seabreeze",
          "created_time": "2014-01-06T20:40:07+0000",
          "id": "xxxxxxxxxxxxxxxxxx"
        },
        {
          "category": "Local business",
          "category_list": [
            {
              "id": "xxxxxxxxxxxxxxxxxx",
              "name": "Computer Store"
            }
          ],
          "name": "Project",
          "created_time": "2014-01-06T20:38:26+0000",
          "id": "xxxxxxxxxxxxxxxxxx"
        },
        {
          "category": "Tv show",
          "name": "helloooo",
          "created_time": "2014-01-06T20:38:08+0000",
          "id": "xxxxxxxxxxxxxxxxxx"
        }
      ]
}

The code i use is

<html>
<head>
<title>Parsing</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script>
 </head>
 <body>
<a href="#" id="loaduserdata">User Data</a>
<table id="userdata" border="1">
    <thead>


    </thead>
    <tbody></tbody>
</table>
<script>
$(document).ready(function(){
});
$("#loaduserdata").click(function(){
    $("#userdata tbody").html("");
    $.getJSON(
        "jsondata.php",
        function(data){
            $.each(data.userdata, function(i,user){
                var tblRow =
                    "<tr>"
                    +"<td>"+user.category+"</td>"
                    +"<td>"+user.name+"</td>"
                    +"</tr>"
                $(tblRow).appendTo("#userdata tbody");
            });
        }
    );
});
</script>
 </body>
 </html>

and results are

User Data
+----------------+------------------------+
| Community      | whitespace             |
| City           | Marburg, Queensland    |
| Hotel          | Hotel Line             |
| Food/beverages | Olive                  |
| Education      | Genius Solutions Group |
| Hotel          | Seabreeze              |
| Local business | Project                |
| Tv show        | helloooo               |
+----------------+------------------------+

Some help please...

I'm sorry probably I missed idea, but why for such simple task need angular? @Dalorzo — Eugene P.
– Eugene P., Commented Feb 7, 2014 at 22:20
underscore.js would work better for simple object manipulation — nathan hayfield
– nathan hayfield, Commented Feb 7, 2014 at 22:25
You have made no attmempt to descend deeper into nested arrays, you are just iterating over the first level, thus you only get first-level results. Have you considered recursion? — Mike Brant
– Mike Brant, Commented Feb 7, 2014 at 23:11

McGarnagle · Accepted Answer · 2014-02-07 22:25:54Z

1

A simple solution would be simply add a comma-separated list of categories to the table. Use map and then join:

+ "<td>" + user.category_list.map(function(item) { return item.name; }).join(", ") + "</td>"

Of course, you also have to check whether "category_list" exists, but that's not hard:

+ "<td>" + (typeof user.category_list == "undefined" ? "" :
        user.category_list.map(function(item) { return item.name; }).join(", "))
+ "</td>"

Fiddle

edited Feb 7, 2014 at 22:25

answered Feb 7, 2014 at 22:19

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

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

1 Comment

user3026113 Over a year ago

WOW! Thanks for quick answer. It works perfect.. One more question: How to fetch data not in table, but just in screen, different line for each listing?

El Kabong · Accepted Answer · 2014-02-08 18:05:40Z

0

The property category_list is an array, you need a nested loop.

see fiddle for updated display: http://jsfiddle.net/4gK5L/3/

 $(document).ready(function() {
            (function(){
                $.each(data.userdata, function (i, user) {
                    var hasData = (typeof (user.category_list) != 'undefined' && user.category_list.length > 0);
                    var i = 0;
                    var tblRow = '<h1>' + user.category + '</h1><ul>';
                    tblRow = tblRow + '<li>' + user.name + '</li>'
                    // + ' '  + user.Name + '
                    if (hasData)
                    {
                        tblRow = tblRow + '<li>Subcategory Info:<ul>'
                        while(i < user.category_list.length){
                             tblRow = tblRow + '<li>Sub Category Id: ' + user.category_list[i].id + '</li><li>Sub Category Name: ' + user.category_list[i].name + '</li>'
                            i++
                        }
                        tblRow = tblRow + '</ul></li>';
                    }
                    var dateTime = new Date(user.created_time);
                    var createdDate = (dateTime.getMonth() + 1) + '-' + dateTime.getDate() + '-' + dateTime.getFullYear();
                    tblRow = tblRow + '<li>Created: ' + createdDate + '</li>'
                    tblRow = tblRow + '<li>Category Id: ' + user.id + '</li>'
                    tblRow = tblRow + '</ul>';
                    $(tblRow).appendTo("#userdata");
                });
            })();
        });

As an aside, McGarnagle's answer is more elegant then mine, and if you used it, you should accept his answer.

edited Feb 8, 2014 at 18:05

answered Feb 7, 2014 at 22:55

El Kabong

7171 gold badge8 silver badges15 bronze badges

2 Comments

user3026113 Over a year ago

Thank you guys! What about if i want to fetch the data not in table but just in screen?

El Kabong Over a year ago

Not sure exactly what you mean by "just in screen", but if you mean in a non-tabular fashion I've updated my answer and fiddle to give you an idea of what you can do. Remember, once you have the data - you can render it any way you want.

Collectives™ on Stack Overflow

Parse Json multidimentional Array in jQuery

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related