JSON looping through sub objects

Question

I'm trying to figure out an issue I'm having with JSON and looping through sub objects. I haven't ever used JSON before so please let me know if syntax errors are causing my issues.

I have this JSON object defined:

var columnData = {
    "obj1":{Heading: "Test 1", Required: "True", DataTypeCode:"str", DropDownOptions: "", ColumnId: "1"},
    "obj2":{Heading: "Test 2", Required: "False", DataTypeCode:"dropdown", DropDownOptions: "Alpha,Beta,Gamma,Delta", ColumnId: "2"},
    "obj3":{Heading: "Test 3", Required: "True", DataTypeCode:"int", DropDownOptions: "", ColumnId: "3"}
};

And I'm passing it to a function that does this:

for (var col in columnData) {
    r += '<td><input type="text" name="col' + col.ColumnId + '" value="' + col.Heading + '" /></td>'
}

A breakpoint in FireBug confirms that columnData is a valid object, it has three sub objects, and the sub objects have the expected properties and values. But this is the output I'm getting after the function is called:

<td><input name="colundefined" value="undefined" type="text"></td>

Unfortunately I think my lack of experience with JSON is making the results of my attempts to track the answer down unusable. How do I write a loop that will correctly get the sub objects of columnData?

Is it? I guess I don't know enough about JSON and Javascript objects to know the difference. I got the syntax from some other JSON question. Either way as long as it works I don't really care if it's technically JSON or not. — William
– William, Commented May 9, 2012 at 19:39
With regard to JavaScript, JSON is retrieved from an external .json file (from the server) as a string, which is then parsed via JSON.parse into a JavaScript object. On the other hand, when you have var obj = { ... };, that is an object literal and is not related to JSON. — Šime Vidas
– Šime Vidas, Commented May 9, 2012 at 19:45
How for...in works is explained in the MDN documentation: developer.mozilla.org/en/JavaScript/Reference/Statements/… — Felix Kling
– Felix Kling, Commented May 9, 2012 at 20:12

Rene Pot · Accepted Answer · 2012-05-09 19:28:03Z

1

You still need columnData:

columnData[col].ColumnId

answered May 9, 2012 at 19:28

Rene Pot

24.8k7 gold badges70 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jbabey · Accepted Answer · 2012-05-09 19:30:27Z

1

JSON requires key values to be enclosed in double quotes, your columnData variable is a javascript object, not JSON.

That being said, col is the current key in columnData being iterated over, e.g. obj1, obj2, obj3. If you want to access a property of one of these objects, you need to access it first:

var col;
for (var key in columnData) {
    col = columnData[key];
    r += '<td><input type="text" name="col' + col.ColumnId + '" value="' + col.Heading + '" /></td>'
}

answered May 9, 2012 at 19:30

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

6 Comments

William Over a year ago

Thank you. I guess I'm not using JSON then? Either way it's working now.

jbabey Over a year ago

@William correct, JSON and javascript objects are often confused. JSON is a data transfer language that exists as a string, while javascript objects are, well, javascript objects :)

William Over a year ago

Ok so then JSON is a string that can be parsed to objects? I see. You learn something new every day.

jbabey Over a year ago

@William if you're using jQuery, you may also want to consider using the DOM construction functions to build your HTML instead of string concatenation.

William Over a year ago

Do you have a link to a quick reference? I only really use Jquery for very simple things so I don't know how that works.

|

Šime Vidas · Accepted Answer · 2012-05-09 19:37:42Z

1

Do this:

var key;
var col;

for ( key in columnData ) {
    col = columnData[ key ];
    r += '<td><input type="text" name="col' + col.ColumnId + '" value="' + col.Heading + '" /></td>';
}

Another option:

r += Object.keys( columnData ).map( function ( key ) {
    var col = columnData[ key ];
    return '<td><input type="text" name="col' + col.ColumnId + '" value="' + col.Heading + '" /></td>';
}).join( '' );

I also recommend a templating engine (like Handlebars.js) for your HTML string concatenation needs.

edited May 9, 2012 at 19:37

answered May 9, 2012 at 19:29

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Collectives™ on Stack Overflow

JSON looping through sub objects

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related