parse through JSON Jquery

Question

Test.Customers = [{
    "CustomerPortals":[{
        "filename":"chrysanthemum.jpg",
        "ext":"jpg",
        },{
        "name":"Lighthouse.jpg",
        "filename":"lighthouse.jpg",
        "ext":"jpg",
        },{
        "filename":"lighthouse.jpg",
        "ext":"jpg",
        }
        }]

I have this json stored in my DOM. Sometimes there will be 0 items and sometimes multiple items in CustomerPortals array. But I want to parse through them and show the filename. Does jquery make it any simpler to do that?

EDIT

var Test = {};

Test.Customers = [{"CustomerItems":
                            "Portals":
                            {"id":"1","customer":"1950","resident":"yes",
                            "CustomPortals":
                                        [
                                        {"id":"11","test":"4251","portalname":"tye.jpg"},
                                         {"id":"12","test":"4251","portalname":"Lsdf.jpg"},
                                         {"id":"13","test":"4251","portalname":"nick.jpg"}
                                         ]
                            }
                    },
                    {"CustomerItems":
                            "Portals":
                            {"id":"2","customer":"1952","resident":"yes",
                            "CustomPortals":
                                        [
                                        {"id":"14","test":"4252","portalname":"Chrysanthemum2.jpg"},
                                         {"id":"15","test":"4255","portalname":"navagin.jpg"},
                                         {"id":"16","test":"4257","portalname":"jasoria.jpg"}
                                         ]
                            }
                    },
                    {"CustomerItems":
                            "Portals":
                            {"id":"3","customer":"1950","resident":"yes",
                            "CustomPortals":
                                        [
                                        {"id":"17","test":"4231","portalname":"Zsryanmum1.jpg"},
                                         {"id":"18","test":"4651","portalname":"Ltd1.jpg"},
                                         {"id":"19","test":"4281","portalname":"ser1.jpg"}
                                         ]
                            }
                    }
                ]

I want to get the portalname for all the customers. the above was not showing sub arrays thanks

That isn't JSON, that's just a JavaScript object. It's already parsed. What do you want to do with the filenames once you get them out of the object? — Matt Ball
– Matt Ball, Commented Apr 19, 2011 at 23:31
I noticed that your example code was missing a ] for the "CustomerPortals". — Anton
– Anton, Commented Apr 19, 2011 at 23:43
I updated my answer showing the new code using your updated example code. When I tried to use your example code as is, I got errors in Firebug. I made an educated guess as to how to fix the errors if I was wrong let me know. — Anton
– Anton, Commented Apr 20, 2011 at 18:39

Anton · Accepted Answer · 2011-04-20 18:38:15Z

The only thing I can think of that jquery can help you with is the .each() function. Here is an example where I go through each filename in each customer.

Updated code to include Portals which holds the CustomerPortals. Let me know if I interpreted your comment incorrectly.

Updated code again to use the new example code. The example code was causing errors so I added { } around "Portals" and its value. If that wasn't the intended format for the code let me know.

var Test = {};

Test.Customers = [{"CustomerItems":
                            {"Portals":
                                {"id":"1","customer":"1950","resident":"yes",
                                "CustomPortals":
                                            [
                                            {"id":"11","test":"4251","portalname":"tye.jpg"},
                                             {"id":"12","test":"4251","portalname":"Lsdf.jpg"},
                                             {"id":"13","test":"4251","portalname":"nick.jpg"}
                                             ]
                                }
                            }
                    },
                    {"CustomerItems":
                            {"Portals":
                                {"id":"2","customer":"1952","resident":"yes",
                                "CustomPortals":
                                            [
                                            {"id":"14","test":"4252","portalname":"Chrysanthemum2.jpg"},
                                             {"id":"15","test":"4255","portalname":"navagin.jpg"},
                                             {"id":"16","test":"4257","portalname":"jasoria.jpg"}
                                             ]
                                }
                            }
                    },
                    {"CustomerItems":
                            {"Portals":
                                {"id":"3","customer":"1950","resident":"yes",
                                "CustomPortals":
                                            [
                                            {"id":"17","test":"4231","portalname":"Zsryanmum1.jpg"},
                                             {"id":"18","test":"4651","portalname":"Ltd1.jpg"},
                                             {"id":"19","test":"4281","portalname":"ser1.jpg"}
                                             ]
                                }
                            }
                    }
                ]




$(document).ready(function() {

    //Go through each customer
    $.each(Test.Customers, function(customerIndex, customerValue) {

        //Go through each CustomerPortal and display filename
        $.each(customerValue.CustomerItems.Portals.CustomPortals, function(custPortIndex, custPortValue) {

            alert('File ' + custPortValue.portalname + ' in customer ' + customerIndex);

        });

    });

});

EDIT

var Test = {};

Test.Customers = [{"CustomerItems":
                            "Portals":
                            {"id":"1","customer":"1950","resident":"yes",
                            "CustomPortals":
                                        [
                                        {"id":"11","test":"4251","portalname":"tye.jpg"},
                                         {"id":"12","test":"4251","portalname":"Lsdf.jpg"},
                                         {"id":"13","test":"4251","portalname":"nick.jpg"}
                                         ]
                            }
                    },
                    {"CustomerItems":
                            "Portals":
                            {"id":"2","customer":"1952","resident":"yes",
                            "CustomPortals":
                                        [
                                        {"id":"14","test":"4252","portalname":"Chrysanthemum2.jpg"},
                                         {"id":"15","test":"4255","portalname":"navagin.jpg"},
                                         {"id":"16","test":"4257","portalname":"jasoria.jpg"}
                                         ]
                            }
                    },
                    {"CustomerItems":
                            "Portals":
                            {"id":"3","customer":"1950","resident":"yes",
                            "CustomPortals":
                                        [
                                        {"id":"17","test":"4231","portalname":"Zsryanmum1.jpg"},
                                         {"id":"18","test":"4651","portalname":"Ltd1.jpg"},
                                         {"id":"19","test":"4281","portalname":"ser1.jpg"}
                                         ]
                            }
                    }
                ]

I want to get the portalname for all the customers. the above was not showing sub arrays thanks

actually there is another foreach loop needed as the customersportal is the sub array of Portals... how would I do that.
Is it a subarray or property of "Portals"? If possible could you update your example code in your question, so I can be certain we are on the same page.

Marcelo Cantos · Accepted Answer · 2011-04-20 11:10:13Z

1

I doubt it. JSON object hierarchies aren't visible as DOM nodes.

You could use a map function, which is very easy to write, and readily available in libraries like Functional JavaScript. Using it is simple:

filenames = Test.Customers[0].CustomerPortals.map(function(cp) { return cp.filename });

Then do whatever you want with the array of filenames.

EDIT: To confirm this, I ran the following code in a JavaScript test bench.

Test = {};

Test.Customers = [{
    "CustomerPortals":[{
        "filename":"chrysanthemum.jpg",
        "ext":"jpg",
        },{
        "name":"Lighthouse.jpg",
        "filename":"lighthouse.jpg",
        "ext":"jpg",
        },{
        "filename":"lighthouse.jpg",
        "ext":"jpg",
        }]
        }];

Array.prototype.map = function(fn) {
              var r = [];
              var l = this.length;
              for(i=0;i<l;i++)
              {
                  r.push(fn(this[i]));
              }
              return r; 
            };

alert(Test.Customers[0].CustomerPortals.map(function(cp) { return cp.filename }));

It displayed an alert with the following message:

chrysanthemum.jpg,lighthouse.jpg,lighthouse.jpg

edited Apr 20, 2011 at 11:10

answered Apr 19, 2011 at 23:26

Marcelo Cantos

187k40 gold badges338 silver badges366 bronze badges

1 Comment

Marcelo Cantos Over a year ago

@Autolycus: It does work. I amended the question to show how.

Collectives™ on Stack Overflow

parse through JSON Jquery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related