Unable to parse the JSON string

Question

I have the JSON file input.json:

{
"consumner_key": {
    "display_name": "CONSUMER-KEY:",
    "name":"consumer_key",
    "format": "string",
    "type": "textbox",
    "isMandatory": "true"
},
"secret_key": {
    "display_name": "CONSUMER-SECRET:",
    "name":"consumer_secret",
    "format": "string",
    "type": "textbox",
    "isMandatory": "true"
}
}

I am using $.getJSON() to get the JSON file and parse it:

$.getJSON('input.json',function jsonData(Data)
{
$.each(Data, function(m,field) 
        {
            console.log(m);
            $('#tabs-4 social').append('<input></input>').attr({type:'text',name:this.consumner_key+''+this.name});
            $('#tabs-4 social').append('<input></input>').attr({type:'text',name:this.secret_key+''+this.name});
        });

});

When I run it I am not able to view the input boxes in my tabs. Kindly point to where I am going wrong.

Answer 1

you say you have file input.js , but in the code you have input.json - can that be a reason?

UPDATE

You also give name to your function - jsonData . As far as I know you should not name inline javascript functions, it will not compile. Just do

$.getJSON('input.json',function (Data) {
    $.each(Data, function(m,field) {
        console.log(m);
        $('#tabs-4 social').append('<input></input>').attr({type:'text',name:this.consumner_key+''+this.name});
        $('#tabs-4 social').append('<input></input>').attr({type:'text',name:this.secret_key+''+this.name});
    });

});

UPDATE 2

Furthermore, you do this.consumner_key+''+this.name and this.secret_key+''+this.name , while consumner_key and name are properties of different levels. I believe, this inside each should represent each single sub-object inside your json object. So it will have property name , but not consumner_key . I may be wrong, but anyway this cannot have both properties.

Answer 2

I finally managed to clear all the errors.Specifying MIME type in web.xml of tomcat was not enough.I had to manually override it in my js file.The below code removed the error "not well formed"

$.ajaxSetup({beforeSend: function(xhr){   
if (xhr.overrideMimeType)  
{     
    xhr.overrideMimeType("application/json");}
} 
});

Also I was refering the json files both in my jsp and javascript file which was causing the invalid label errors