javascript loop through json response

Question

I want to loop through my json response. My json response looks like this

{"line":[{"type":"bank","name":"ABN","account":"NL47ABNA0442660960","description":"Bijgewerkt t\/m 30-10-2014","balance":"6.266,55","image":""},{"type":"bank","name":"Rabo","account":"NL89RABO0177896647","description":"","balance":"0,00","image":""}],"total":"6.266,55"}

What I want is a foreach loop through all lines so i get the keys and the values for every line.

you don't loop through json. you decode the json to a native structure (e.g. array/object) and loop through that. — Marc B, Nov 13 '14 at 14:11
Take a look at http://stackoverflow.com/questions/8785660/need-to-convert-json-key-value-pairs-to-standard-array — jarz, Nov 13 '14 at 14:12
question isn't very clear, do want the keys by known name or do you want to output unknown key names for each object? — charlietfl, Nov 13 '14 at 14:15
@Marc B - JSON stands for JavaScript Object Notation, so you don't need to decode it to loop through it. If it is encoded - i.e. is a string with JSON format - than you need to decode **the string**. But in his code, it is already a JSON object. — Markai, Nov 13 '14 at 14:22
@Markai: yes, but json doesn't get automatically decoded into a javascript array/object/whatever automatically, UNLESS, e.g. you tell jquery you're expecting json back as a response from an ajax request. Until it's actually decoded, it's just a string. — Marc B, Nov 13 '14 at 14:23
@Marc B that depends, the standard return type for jQuery's ajax function is intelligent guess. If it recognizes a json like string it should automatically decode it afaik. And json objects are objects that can be used by javascript. What can not just be used as an object, is the encoded string. There's a difference — Markai, Nov 13 '14 at 14:29

Abhitalks · Answer 1 · 2014-11-13T15:02:13.987

You could iterate like this: (added code-comments for explanation)

var result = document.getElementById("result");
var json = '{"line":[{"type":"bank","name":"ABN","account":"NL47ABNA0442660960","description":"Bijgewerkt t\/m 30-10-2014","balance":"6.266,55","image":""},{"type":"bank","name":"Rabo","account":"NL89RABO0177896647","description":"","balance":"0,00","image":""}],"total":"6.266,55"}';

var obj = JSON.parse(json);
// json object contains two properties: "line" and "total".
// iterate "line" property (which is an array but that can be iterated)
for (var key in obj.line) {
    // key here is the index of line array
    result.innerHTML += "<br/>" + key + ": ";
    // each element of line array is an object
    // so we can iterate over its properties
    for (var prop in obj.line[key]) {
        // prop here is the property
        // obj.line[key][prop] is the value at this index and for this prop
        result.innerHTML += "<br/>" + prop + " = " + obj.line[key][prop];
    }
}
// "total" is a property on the root object
result.innerHTML += "<br/><br/>Total = " + obj.total;

<p id="result"> </p>

Demo Fiddle: http://jsfiddle.net/abhitalks/ajgrLj0h/2/

.

score 1 · Accepted Answer · answered Nov 13 '14 at 14:15

var json = {"line":[{"type":"bank","name":"ABN","account":"NL47ABNA0442660960","description":"Bijgewerkt t\/m 30-10-2014","balance":"6.266,55","image":""},{"type":"bank","name":"Rabo","account":"NL89RABO0177896647","description":"","balance":"0,00","image":""}],"total":"6.266,55"}; 
   for(var i = 0; i < json.line.length; i++)
   {
       console.log("Type: " + json.line[i].type + " Name: " + json.line[i].name + " Account: " + json.line[i].account + " Description: " + json.line[i].description + " Balance: " + json.line[i].balance + " Image: " + json.line[i].image); 
   }

You can do something like that...

Thnx this is what I needed! – Leon van der Veen Nov 13 '14 at 14:16 — Leon van der Veen, Nov 13 '14 at 14:16

Dastagir · Answer 3 · 2014-11-13T14:56:21.903

var json = {"line":[{"type":"bank","name":"ABN","account":"NL47ABNA0442660960","description":"Bijgewerkt t\/m 30-10-2014","balance":"6.266,55","image":""},{"type":"bank","name":"Rabo","account":"NL89RABO0177896647","description":"","balance":"0,00","image":""}],"total":"6.266,55"};

if(json.line !== undefined && json.line.length > 0){
    var key,value;
    json.line.map(function(lineObject){        
        for (key in lineObject) {
            value = (lineObject[key] == '')?'unknown': lineObject[key];
            console.log(key+":"+ value);
        }
        console.log("---------------------");
    });
}

http://jsfiddle.net/ddw7nx91/

score 0 · Answer 4 · answered Nov 13 '14 at 14:16

0

var obj = {"line":[]} //your json here

for(var i=0; i<obj.line.length; i++) {
console.log(obj.line[i].type)
}

obj.line is an array, so you can get his length an cycle it.

answered Nov 13 '14 at 14:16

Morrisda

1,380
1
11
25

Oakley · Answer 5 · 2014-11-13T14:35:47.730

This would create an array of lines each with a keys object and a values object.

var response = JSON.parse( {'your':'JSON'} );
var lines = [];

$.each( response, function( line ) {//loop through lines in response
    var keys = [];
    var values = [];
    $.each( line, function( obj ) {
        keys.push( Object.keys(obj) );//get keys
        for( var key in obj ) {
            values.push(obj[key]);//get values
        }
    });
    lines.push({ {'keys':keys},{'values':values} });
});

javascript loop through json response

5 Answers5