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?

• Šime Vidas: Hm, looks like an object literal. Where's the JSON?
• William: 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.
• Šime Vidas: 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.
• Felix Kling: How for...in works is explained in the MDN documentation: developer.mozilla.org/en/JavaScript/Reference/Statements/…

Answer 1

You still need columnData:

columnData[col].ColumnId

Answer 2

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>'
}

• William: Thank you. I guess I'm not using JSON then? Either way it's working now.
• jbabey: @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: Ok so then JSON is a string that can be parsed to objects? I see. You learn something new every day.
• jbabey: @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: 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.

Answer 3

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.