JSON object elements listed as undefined (tested both before and after using `jQuery.parseJSON()`)

Question

I'm trying to populate a dropdown list via iterating through a JSON object and appending the value= of each <option> with row.id and the actual value between the <option> tags with row.name.

Edit

I forgot to mention that the data being passed has been Ajaxed, and is the result of a PHP call to a database.

The problem is that, while the list is populated, each entry is listed as undefined. Ditto for the id as well. I must be doing this wrong, I'm just not sure what. This is the array I have:

    [{
    "id": "1",
    "0": "1",
    "parent": "0",
    "1": "0",
    "name": "Automotive",
    "2": "Automotive",
    "description": null,
    "3": null,
    "ordering": "0",
    "4": "0",
    "pub
lished": "1",
    "5": "1"
}, {
    "id": "2",
    "0": "2",
    "parent": "0",
    "1": "0",
    "name": "Aerospace",
    "2": "Aerospace",
    "description": null,
    "3": null,
    "ordering
": "1",
    "4": "1",
    "published": "1",
    "5": "1"
}, {
    "id": "3",
    "0": "3",
    "parent": "0",
    "1": "0",
    "name": "Agricultural",
    "2": "Agricultural",
    "description": null,
    "3": null,
    "ordering": "2",
    "4": "2",
    "published": "1",
    "5": "1"
}, {
    "id": "4",
    "0": "4",
    "parent": "0",
    "1": "0",
    "name": "Audiovisual",
    "2": "Audiovisual",
    "description": null,
    "3": null,
    "ordering": "3",
    "4": "3",
    "published": "1",
    "5": "1"
}, {
    "id": "5",
    "0": "5",
    "parent": "0",
    "1": "0",
    "name": "
Construction",
    "2": "Construction",
    "description": null,
    "3": null,
    "ordering": "4",
    "4": "4",
    "published": "1",
    "5": "1"
}, {
    "id": "6",
    "0": "6",
    "parent": "0",
    "1": "0",
    "name": "Energy",
    "2": "Energy",
    "description": null,
    "3": null,
    "ordering": "6",
    "4": "6",
    "published": "1",
    "5": "1"
}, {
    "id": "7",
    "
0": "7",
    "parent": "0",
    "1": "0",
    "name": "Electronics",
    "2": "Electronics",
    "description": null,
    "3": null,
    "ordering": "7",
    "4": "7",
    "published": "1
",
    "5": "1"
}, {
    "id": "8",
    "0": "8",
    "parent": "0",
    "1": "0",
    "name": "Electrical",
    "2": "Electrical",
    "description": null,
    "3": null,
    "ordering": "8",
    "4
": "8",
    "published": "1",
    "5": "1"
}, {
    "id": "9",
    "0": "9",
    "parent": "0",
    "1": "0",
    "name": "Entertainment",
    "2": "Entertainment",
    "description": null,
    "3": null,
    "ordering": "9",
    "4": "9",
    "published": "1",
    "5": "1"
}, {
    "id": "10",
    "0": "10",
    "parent": "0",
    "1": "0",
    "name": "Manufacturing",
    "2": "Manufa
cturing",
    "description": null,
    "3": null,
    "ordering": "9",
    "4": "9",
    "published": "1",
    "5": "1"
}, {
    "id": "11",
    "0": "11",
    "parent": "0",
    "1": "0",
    "name": "Medical",
    "2": "Medical",
    "description": null,
    "3": null,
    "ordering": "11",
    "4": "11",
    "published": "1",
    "5": "1"
}, {
    "id": "12",
    "0": "12",
    "parent": "0",
    "1": "0",
    "name": "Marine",
    "2": "Marine",
    "description": null,
    "3": null,
    "ordering": "12",
    "4": "12",
    "published": "1",
    "5": "1"
}, {
    "id": "13",
    "0": "13",
    "parent": "0",
    "1": "0",
    "name": "Home Applicances",
    "2": "Home Applicances",
    "description": null,
    "3": null,
    "ordering": "13",
    "4": "13",
    "published": "1",
    "5": "1"
}, {
    "id": "14",
    "0": "14",
    "parent": "0",
    "1": "0",
    "name": "Software",
    "2": "Software",
    "description": null,
    "3": null,
    "ordering": "14",
    "4": "14",
    "published": "1",
    "5": "1"
}, {
    "id": "15",
    "0": "15",
    "parent": "0",
    "1": "0",
    "name": "Theoretical work",
    "2": "Theoretical work",
    "description": null,
    "3": null,
    "ordering": "15",
    "4": "15",
    "published": "1",
    "5": "1"
}, {
    "id": "16",
    "0": "16",
    "parent": "0",
    "1": "0",
    "name": "Railroad",
    "2": "Railroad",
    "description": null,
    "3": null,
    "ordering": "16",
    "4": "16",
    "published": "1",
    "5": "1"
}, {
    "id": "77",
    "0": "77",
    "parent": "0",
    "1": "0",
    "name": "Chemistry",
    "2": "Chemistry",
    "description": null,
    "3": null,
    "ordering": "5",
    "4": "5",
    "published": "1",
    "5": "1"
}, {
    "id": "158",
    "0": "158",
    "parent": "0",
    "1": "0",
    "name": "Empty Category",
    "2": "Empty Category",
    "description": null,
    "3": null,
    "ordering": "17",
    "4": "17",
    "published": "1",
    "5": "1"
}]

and here's my code:

function printSubCategories(categories) {

    for (var row in categories) {

        rowParsed = jQuery.parseJSON(row);

        var opt = document.createElement('option');

        if (categories.hasOwnProperty(row)) {
            opt.text = rowParsed.name;
            opt.value = rowParsed.id;
        }

        jQuery('#subcategories').append(opt);
    }

}

What exactly am I doing wrong?

Update

Tried the following implementation:

if (categories.hasOwnProperty(row)) {

    idParsed = jQuery.parseJSON(row.id);
    nameParsed = jQuery.parseJSON(row.name)

    opt.text = idParsed;
    opt.value = nameParsed;
}

still not working...

Answer 1

There are some line breaks in unexpected area of the data. Like, for example, in

[{
    "id": "1",
    "0": "1",
    "parent": "0",
    "1": "0",
    "name": "Automotive",
    "2": "Automotive",
    "description": null,
    "3": null,
    "ordering": "0",
    "4": "0",
    "pub
lished": "1",
    "5": "1"
}

There is a line break in published and it's making the JSON invalid. Removing all those line breaks should make the JSON valid and can be parsed again.

Test your json here and see if it's a valid json http://jsonlint.com/

EDIT:

Okay, I've tried the code on jsfiddle which then made me realize how the json is actually formatted. You have some objects in an array, so that means you simply need to loop the array and then access the object as you would normally.

see this jsfiddle http://jsfiddle.net/vErj4/