How can i extract nested objects from json in jquery

Question

I have this jquery code extracts gets the josn from url and put in html table

$(document).ready(function() {

    $.getJSON('/api/students/2/?format=json', function(data) {
        var items = [];

        $.each(data, function(key, val) {
        items.push('<tr><td>' +key+'</td><td>' + val + '</td></tr>');
        });

        $(items.join('')).appendTo('table');

    });

});

This loads the first level of objects fine but i have many nested levels. I have all the data inside json. currently it shows object[] but i want to shows its sub elements like below

like

studnets have semester then subjects and then assignments

i want to display them nested inside the main table within own tables like this

<table>
<tr><td>student name  </td></tr>
          <tr><td>semesters  
             <table>
                   <tr><td> subjects 
                                <table><tr><td> Assigments

so that i can get the detail view of whole data in one page.

This looks like buggy but i am not able to find better way of represeting student data

EDIT

sample json data

{
    "id": 2,
    "name": "John",
    "terms": [
        {
            "id": 26,
            "name":"summer"
            "date": "2013-02-18",
            "subjects_set": [
                {
                    "id": 10,
                    "name": "math",
                    "gb_type": [ ],
                    "assignment_set": [
                        {
                            "id": 2,
                            "name": "assignment_level_1",
                            "documents": [ ]
                        }
                    ]

Is the outermost data (student) an array or an object? Are you trying to display course info of multiple students or just one? — Sang Suantak
– Sang Suantak, Commented Feb 25, 2013 at 5:19
just one student , but then terms, subjects , assignment can be multiple — user192082107
– user192082107, Commented Feb 25, 2013 at 5:24

Sang Suantak · Accepted Answer · 2013-02-25 05:42:11Z

Since the html output/structure you're trying to achieve is a bit complicated, i'll leave the html string appending/concatenation part up to you. As for accessing the json values, refer to the code below:

$.getJSON('/api/students/2/?format=json', function (data) {
    var items = [];    
    //To get student name
    var studentName = data.name;    
    var semester, subject, assignment;
    $.each(data.terms, function () {
        semester = this;
        //to get semester name and date
        var semesterName = semester.name,
            semesterDate = semester.date;
        $.each(semester.subjects_set, function(){
            subject = this;
            //to get subject name
            var subjectName = subject.name;                
            $.each(subject.assignment_set, function(){
                assignment = this;
                //to get assignment name
                var assignmentName = assignment.name;     
            });
        });        
    });
    //$(items.join('')).appendTo('table');
});

You need to write the html string concatenation code within the $.each section. However, if you have difficulties with the string concatenation, just show me the desired html output and i can help with that as well.

Collectives™ on Stack Overflow

How can i extract nested objects from json in jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related