jQuery iterating over JSON with foreach

Question

I have the following code

currencies_group_0 = [
    {"code":"cad", "big_code":"CAD", "name":"Canadian Dollars", "symbol":"$", "rate" : 0.97},
    {"code":"eur", "big_code":"EUR", "name":"Euros", "symbol":"€", "rate" : 0.7102},
    {"code":"gbp", "big_code":"GBP", "name":"British Pounds Sterling", "symbol":"£", "rate" : 0.5196},
    {"code":"hkd", "big_code":"HKD", "name":"Hong Kong Dollars", "symbol":"$", "rate" : 5.9853},
    {"code":"jpy", "big_code":"JPY", "name":"Japanese Yen", "symbol":"¥", "rate" : 92},
    {"code":"nzd", "big_code":"NZD", "name":"New Zealand Dollars", "symbol":"$", "rate" : 1.0237},
    {"code":"usd", "big_code":"USD", "name":"United States Dollars", "symbol":"$", "rate" : 0.7719}
];

currencies_group_0.forEach(function(element) {
    lis_0 += '' +
    '<li class="ui-selectmenu-item-label" rate="' + element.rate + '">' +
    '<a href="#nogo" tabindex="-1">' +
    '<span>' +
    '<div class="flag ' + element.code + '"></div>' +
    '<span class="ui-selectmenu-item-content">' +
    '<span class="currency-name">' + element.name + '</span>' +
    '<span class="currency-code">' + element.symbol + ' ' + element.big_code + '</span>' +
    '</span>' +
    '</span>' +
    '</a>' +
    '</li>';
});

What does the "element" do? I'm not sure how this code works. Shouldn't there be a "this" somewhere?

This is simple [Array.prototype.forEach](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach). Read the docs how it works. — Artyom Neustroev, Mar 30 '15 at 12:00
Since the array has 9 items the function passed to forEach will be called 9 times once for each item... so `element` will refer to the item for whci the function was called — Arun P Johny, Mar 30 '15 at 12:00
It should've been named appropriately, such as `item` rather than `element` as it represents each item from the array in the loop. — lshettyl, Mar 30 '15 at 12:01
check this answer: http://stackoverflow.com/questions/19707969/the-invocation-context-this-of-the-foreach-function-call — Fen1kz, Mar 30 '15 at 12:01

score 1 · Answer 1 · answered Mar 30 '15 at 12:04

As you are looping over an array, element is each object in that array.

The += is concatinating the arrays elements and creating html.

var lis_0 = '';

currencies_group_0 = [
    {"code":"cad", "big_code":"CAD", "name":"Canadian Dollars", "symbol":"$", "rate" : 0.97},
    {"code":"eur", "big_code":"EUR", "name":"Euros", "symbol":"€", "rate" : 0.7102},
    {"code":"gbp", "big_code":"GBP", "name":"British Pounds Sterling", "symbol":"£", "rate" : 0.5196},
    {"code":"hkd", "big_code":"HKD", "name":"Hong Kong Dollars", "symbol":"$", "rate" : 5.9853},
    {"code":"jpy", "big_code":"JPY", "name":"Japanese Yen", "symbol":"¥", "rate" : 92},
    {"code":"nzd", "big_code":"NZD", "name":"New Zealand Dollars", "symbol":"$", "rate" : 1.0237},
    {"code":"usd", "big_code":"USD", "name":"United States Dollars", "symbol":"$", "rate" : 0.7719}
];

currencies_group_0.forEach(function(element) {

        lis_0 += '' +
        '<li class="ui-selectmenu-item-label" rate="' + element.rate + '">' +
        '<a href="#nogo" tabindex="-1">' +
        '<span>' +
        '<div class="flag ' + element.code + '"></div>' +
        '<span class="ui-selectmenu-item-content">' +
        '<span class="currency-name">' + element.name + '</span>' +
        '<span class="currency-code">' + element.symbol + ' ' + element.big_code + '</span>' +
        '</span>' +
        '</span>' +
        '</a>' +
        '</li>';


});

document.getElementById('html').innerHTML = lis_0;

https://jsfiddle.net/w2rypfoo/1/

score 0 · Answer 2 · answered Mar 30 '15 at 12:00

0

"element" acts as the local variable reference to the current item in the loop, while "this" would refer to the selector's reference.

answered Mar 30 '15 at 12:00

wicker95

131
1
10

score 0 · Answer 3 · answered Mar 30 '15 at 12:03

0

actually you are using forEach so it will iterate each element one by one of Array. So in the first time currencies_group_0[0] will take as an element.

answered Mar 30 '15 at 12:03

user3722785

216
1
13

score 0 · Accepted Answer · answered Mar 30 '15 at 12:34

i think you can easily understand that from Array.prototype.forEach docs. Here each element will have each row or items. for example

0 => {"code":"cad", "big_code":"CAD", "name":"Canadian Dollars", "symbol":"$", "rate" : 0.97}

1 => {"code":"eur", "big_code":"EUR", "name":"Euros", "symbol":"€", "rate" : 0.7102}

... etc. Its pretty straight forward. the name "element"

also from docs

callback is invoked with three arguments:

the element value
the element index
the array being traversed

jQuery iterating over JSON with foreach

4 Answers4