Back To Normal
Click Here To Subscribe Via Email

Subscribe To Our E-Mail Newsletter

Sunday, January 11, 2015

Looping over a JSON array with jQuery


Couch ModePrint It


Today, I just thought that it would be useful to share about looping over a JSON array with jQuery. This will be done with the jQuery function, $.each().


Here is the code snippet that will tell you all


//the json array
var data = [{
    "firstName": "First name",
    "lastName": "Last name"
}, {
    "firstName": "John",
    "lastName": "Doe"
}, {
    "firstName": "Anna",
    "lastName": "Smith"
}, {
    "firstName": "Peter",
    "lastName": "Jones"
}];

//the jquery function $.each()
$.each(data, function (i, item) {
    $("#code").append(item.firstName + " " + item.lastName + "<br/>");
});



Understanding the code

Well, this code is not really too much difficult to understand. Looping over the JSON array, it appends the JSON elements' values in a div with id="code"

JSFiddle here



:D
:)
:[
;)
:D
:O
(6)
(A)
:'(
:|
:o)
8)
(K)
(M)