jquery $.each() for objects

Question

<script>
    $(document).ready(function() {
        var data = { "programs": [ { "name":"zonealarm", "price":"500" }, { "name":"kaspersky", "price":"200" } ] };
        $.each(data.programs[0], function(key,val) {
            alert(key+val);
        });
    });
</script>

This code retrieves the first data. name:zonealarm and price:500.

How can I retrieve all the data in the object?

I tried $.each(data.programs, function(key,val) but it didn't work.

Should I put it in a loop?

Tomalak · Accepted Answer · 2016-11-08T20:03:12.880

$.each() works for objects and arrays both:

var data = { "programs": [ { "name":"zonealarm", "price":"500" }, { "name":"kaspersky", "price":"200" } ] };

$.each(data.programs, function (i) {
    $.each(data.programs[i], function (key, val) {
        alert(key + val);
    });
});

...and since you will get the current array element as second argument:

$.each(data.programs, function (i, currProgram) {
    $.each(currProgram, function (key, val) {
        alert(key + val);
    });
});

score 15 · Answer 2 · answered Jun 01 '11 at 21:42

15

You are indeed passing the first data item to the each function.

Pass data.programs to the each function instead. Change the code to as below:

<script>     
    $(document).ready(function() {         
        var data = { "programs": [ { "name":"zonealarm", "price":"500" }, { "name":"kaspersky", "price":"200" } ] };         
        $.each(data.programs, function(key,val) {             
            alert(key+val);         
        });     
    }); 
</script>

answered Jun 01 '11 at 21:42

Chandu

81,493
19
133
134

but then i don't get exact values just the index of the each object? – matiasdelgado Jun 01 '11 at 21:45
Because you're getting the whole Object here. To get exact values/extract values from Object : console.log(key +" "+ val.name + " " + val.price); – inhaler Oct 20 '20 at 07:14

score 9 · Answer 3 · edited Dec 30 '15 at 18:23

Basically you need to do two loops here. The one you are doing already is iterating each element in the 0th array element.

You have programs: [ {...}, {...} ] so programs[0] is { "name":"zonealarm", "price":"500" } So your loop is just going over that.

You could do an outer loop over the array

$.each(data.programs, function(index) {

    // then loop over the object elements
    $.each(data.programs[index], function(key, value) {
        console.log(key + ": " + value);
    }

}

score 3 · Answer 4 · answered Jul 15 '21 at 19:39

Insert data in "INId" div...

$(document).ready(function() {
        var data = { "programs": [ { "name":"zonealarm", "price":"500" }, { "name":"kaspersky", "price":"200" } ] };
        $.each(data.programs, function(key,val) {
            // console.log(val);
            $('#InId').append("Name: " +val.name+" & Price: "+val.price+"<br/>");
        });
    });

$(document).ready(function() { var data = { "programs": [ { "name":"zonealarm", "price":"500" }, { "name":"kaspersky", "price":"200" } ] }; $.each(data.programs, function(key,val) { // console.log(val); $('#InId').append("Name: " +val.name+" & Price: "+val.price+"
"); }); });

score 2 · Answer 5 · answered Feb 06 '22 at 09:28

2

var arType = [];
$.each($("input[name='archiveType[]']:checked"), function() {
   arType.push($(this).val());
});
arType = arType.join(",");

answered Feb 06 '22 at 09:28

Mohammad Ali Abdullah

321
2
10

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Feb 07 '22 at 21:01

jquery $.each() for objects

5 Answers5

Insert data in "INId" div...

Linked