How to iterate the objects in array in jQuery?

Question

I have a JSON object:

[{
     name:'bhavani',
     age:'19',
     gender:'Female'
},{
     name:'bhavani',
     age:'19',
     gender:'Female'
},{
     name:'bhavani',
     age:'19',
     gender:'Female'
}, {
     // and so on
}]

Now i need to access the name in each object in this array in a JSP page. I am unable to do it. Can anyone solve this problem for me please.

Possible duplicate of [Iterating a JavaScript object's properties using jQuery](http://stackoverflow.com/questions/1096924/iterating-a-javascript-objects-properties-using-jquery) — Mr.Turtle, Nov 25 '15 at 14:18
http://stackoverflow.com/questions/921789/how-to-loop-through-javascript-object-literal-with-objects-as-members — Marcus Höglund, Nov 25 '15 at 14:20
Marcus, @Ole Note that the OP wants to loop over an array of objects, not the properties of an object. — Rory McCrossan, Nov 25 '15 at 14:21

score 0 · Accepted Answer · answered Nov 25 '15 at 14:22

To loop over an array or an object's properties you can use the $.each function.

Fiddle: http://jsfiddle.net/AtheistP3ace/ohswrnmn/

var data = [{
    name: 'bhavani',
    age: '19',
    gender: 'Female'
}, {
    name: 'bhavani',
    age: '19',
    gender: 'Female'
}, {
    name: 'bhavani',
    age: '19',
    gender: 'Female'
}, ];

var $test = $('#test');
$.each(data,
    function (index, value) {
        $test.append(value.name + ' ');
    }
);

jQuery docs: http://api.jquery.com/jquery.each/

Example looping over array and each objects properties:

Fiddle: http://jsfiddle.net/AtheistP3ace/ohswrnmn/1/

var data = [{
    name: 'bhavani',
    age: '19',
    gender: 'Female'
}, {
    name: 'bhavani',
    age: '19',
    gender: 'Female'
}, {
    name: 'bhavani',
    age: '19',
    gender: 'Female'
}, ];

var $test = $('#test');
$.each(data,
    function (index, value) {
        $test.append(index + ': ');
        $.each(value,
            function (index2, value2) {
                $test.append(value2 + ' ');
            }
        );
        $test.append(' - ');
    }
);

score 0 · Answer 2 · edited Nov 25 '15 at 14:28

0

jQuery has no meaning here, just map your array:

var names = arr.map(function(o){
   return o.name; 
});

-jsFiddle-

edited Nov 25 '15 at 14:28

AtheistP3ace

9,611
12
43
43

answered Nov 25 '15 at 14:25

A. Wolff

74,033
9
94
155

How to iterate the objects in array in jQuery?

2 Answers2