Looping through nested object with jQuery each

Question

I am trying to display the items in an array with jQuery but it's just returning [object] [Object]. What am I doing wrong here?

There data is returned in this format:

Object
1:{gps: "0.000,0.000", street_name: "First Street", street_name_alt: "1st Street"}
2:{gps: "0.000,0.000", street_name: "Second Street", street_name_alt: "2nd Street"}

And I am trying to output it with:

$.each( data.street, function( key, val ) {                       
        htm+='<ons-list-item id="'+key+'">';
        htm+=' '+val;
        htm+='</ons-list-item>';
});

Suresh Atta · Accepted Answer · 2017-08-17 16:55:48Z

2

val is your object and key is index..

You have to try accessing it's properties. For ex to access street_name

$.each( data.street, function( key, val ) {                       
        htm+='<ons-list-item id="'+key+'">';
        htm+=' '+val.street_name;
        htm+='</ons-list-item>';
});

It's not a multi dimensional array btw, it's a nested object.

answered Aug 17, 2017 at 16:55

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

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

1 Comment

theplau Over a year ago

Ooooh, I see what I did wrong. It's working now! Thank you :)

Mouser · Accepted Answer · 2017-08-17 16:59:14Z

0

data = {};
data.street = [{gps: "0.000,0.000", street_name: "First Street", street_name_alt: "1st Street"},
{gps: "0.000,0.000", street_name: "Second Street", street_name_alt: "2nd Street"}];

var htm = "";
// updated the arguments to reflect their functions better.
$.each( data.street, function( index, element ) {                       
        htm+='<ons-list-item id="'+index+'">';
        htm+=' '+element .street_name;
        htm+='</ons-list-item>';
});
console.log(htm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

That's because val refers to the full object. Use the property names to get the right result.

answered Aug 17, 2017 at 16:59

Mouser

13.3k3 gold badges30 silver badges54 bronze badges

Collectives™ on Stack Overflow

Looping through nested object with jQuery each

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related