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