How to list down an array from JSON object with jQuery?

Question

The jSON object is given below to keep so many product names and their following data:

var buyOnlineJSON={
      "CourseDetail": [
        {
          "ProductName": "product1",
          "productID": "DE34A",
          "crseDes": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.",
          "courseList": {
            "crseID1": "course1",
            "crseID2": "course2",
            "crseID3": "course3",
            "crseID4": "course4",
            "crseID5": "course5",
            "crseID6": "course6"
          }
        }
      ]
    }

I am able to list out following objects: ProductName, productID, crseDes, with following jQuery code

for(var i=0;i<buyOnlineJSON.CourseDetail.length;i++)
{
    console.log(Object.keys(buyOnlineJSON.CourseDetail[i].courseList));
    $("#buyOnline ol").append(
            '<li>' + 
                '<img src="images/book.png" />' + 
                '<a>' +
                    buyOnlineJSON.CourseDetail[i].ProductName +
                '</a>' +
                '<p>' +
                    buyOnlineJSON.CourseDetail[i].crseDes +
                '</p>'
            '</li>'
    );
}

How to list out courseList array from it ?

Barmar · Accepted Answer · 2014-04-03 04:36:32Z

3

Use a for-in loop to iterate over the properties in an object.

for(var i=0;i<buyOnlineJSON.CourseDetail.length;i++)
{
    console.log(Object.keys(buyOnlineJSON.CourseDetail[i].courseList));
    var courses = '<ol>';
    var courseList = buyOnlineJSON.CourseDetail[i].courseList;
    for (var id in courseList) {
        if (courseList.hasOwnProperty(id)) {
            courses += '<li>' + courseList[id] + '</li>';
        }
    }
    courses += '</ol>';
    $("#buyOnline ol").append(

        '<li>'
            +
            '<img src="images/book.png" />'
            +
            '<a>'
            +
            buyOnlineJSON.CourseDetail[i].ProductName
            +
            '</a>'                                 
            +
            '<p>'
            +
            buyOnlineJSON.CourseDetail[i].crseDes
            +
            '</p>'
            +
            courses
            +

        '</li>'

    );

}

answered Apr 3, 2014 at 4:36

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

4 Comments

Akhil Over a year ago

Thank you for the instant replay.Like this i can list out both keys and values ryt

Barmar Over a year ago

Right. If you want to display the keys, they're in id.

Akhil Over a year ago

instead of ordered list in courseList unordered list is fine. Thank you again.

Barmar Over a year ago

Of course, I just had to pick something for my example. The actual formatting is entirely up to you.

Adil · Accepted Answer · 2014-04-03 04:43:47Z

2

You need to access courseList object in CourseDetail array before you assess the members of courseList i.e. crseID1

buyOnlineJSON.CourseDetail[i].courseList.crseID1

Edit based on comments, You can go through the object key and value of courseList using for loop

for (var key in buyOnlineJSON.CourseDetail[i].courseList) {
   alert(' name=' + key + ' value=' + buyOnlineJSON.CourseDetail[i].courseList[key]);

edited Apr 3, 2014 at 4:43

answered Apr 3, 2014 at 4:28

Adil

148k25 gold badges217 silver badges207 bronze badges

2 Comments

Akhil Over a year ago

buyOnlineJSON.CourseDetail[i].courseList array will be a dynamic array. It will vary with objects in it for each product. so i want it to list down dynamically.

Adil Over a year ago

Thanks @Barmar, I wanted to use the one on loop

Aameer · Accepted Answer · 2014-04-03 04:32:56Z

0

try this out

buyOnlineJSON.CourseDetail[0].courseList.crseID1

the result will be

"course1"

hope that helps.

answered Apr 3, 2014 at 4:32

Aameer

1,3761 gold badge11 silver badges30 bronze badges

3 Comments

Barmar Over a year ago

He wants to list all the courses, not just a specific one.

Aameer Over a year ago

buyOnlineJSON.CourseDetail[0].courseList this will list all the courses

Barmar Over a year ago

But that's an object, not an HTML string.

Sohil Desai · Accepted Answer · 2014-04-03 04:41:16Z

use inner loop like this.

for(var i=0;i<buyOnlineJSON.CourseDetail.length;i++)
{
    var currentCourseList = buyOnlineJSON.CourseDetail[i].courseList;
    var strHTMLCourseList = '';
    for(var key in currentCourseList)
    {
        strHTMLCourseList += '<p>' + currentCourseList[key] + '</p>';   // Use here own html to display.
    }

    $("#buyOnline ol").append(
            '<li>' + 
                '<img src="images/book.png" />' + 
                '<a>' +
                    buyOnlineJSON.CourseDetail[i].ProductName +
                '</a>' +
                '<p>' +
                    buyOnlineJSON.CourseDetail[i].crseDes +
                '</p>' +
                strHTMLCourseList
            '</li>'
    );

}

Collectives™ on Stack Overflow

How to list down an array from JSON object with jQuery?

4 Answers 4

4 Comments

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related