$ .getJSON не работает, но имеет объект JSON в скрипте работает

Question

Я пытаюсь динамически создать простой select, который содержит свойство объекта как option на основе некоторых ограничений.

Все работает отлично, когда мой JSON является частью скрипта.

FIDDLE

Код

$(document).ready(function(){ 
    /*$.getJSON('input.json',function(data){ 
     alert('inside'); 
    });*/ 

    /*$.getJSON("inputjson.json", function(data){ 
     // I have placed alert here previously and realized it doesn't go into here 
     console.log("datd"); 
     console.log(JSON.stringify(data,null,4)); 
    });*/ 



    var jsonList = 
    { 
     "json_data" : { 
      "data" : [ 
       { 
        "data" : "A node", 
        "metadata" : { id : 23 }, 
        "children" : [ "Child 1", "A Child 2" ] 
       }, 
       { 
        "attr" : { "id" : "li.node.id1" , "level" : "3" , "name" : "Ragini" }, 
        "data" : { 
         "title" : "Long format demo", 
         "attr" : { "href" : "#" } 
        } 
       }, 
       { 
        "attr" : { "id" : "li.node.id1" , "level" : "3" , "name" : "Rag" }, 
        "data" : { 
         "title" : "Long format demo", 
         "attr" : { "href" : "#" } 
        } 
       }, 
       { 
        "attr" : { "id" : "li.node.id1" , "level" : "4" , "name" : "Skyrbe" }, 
        "data" : { 
         "title" : "Long format demo", 
         "attr" : { "href" : "#" } 
        } 
       } 
      ] 
     } 
    } 


    var newObject = jsonList.json_data.data; 
    var listItems= ""; 

    $form = $("<form></form>"); 
    $('#form_container').append($form); 

    var $selectContainer = $("<select id=\"selectId\" name=\"selectName\" />"); 

    for (var i = 0; i < jsonList.json_data.data.length; i++) 
    { 
     if(jsonList.json_data.data[i].hasOwnProperty("attr") && jsonList.json_data.data[i].attr.level == 3) 
     { 
      listItems+= "<option value='" + jsonList.json_data.data[i].attr.name + "'>" + jsonList.json_data.data[i].attr.name + "</option>"; 
     } 
    } 
    $($selectContainer).html(listItems); 
    $($form).append($selectContainer); 
}); 

Но когда я пытаюсь поставить JSON в отдельный файл .json и использовать $.getJSON, я не имеющий никакого успеха. В принципе, контроль никогда не приходит в это.

Это код, который я написал для $.getJSON

$.getJSON('input.json',function(data){ 
    console.log(JSON.stringify(data,null,4)); 
}); 

Может кто-то пожалуйста, указать на то, что моя ошибка есть.

Приветствия, Harsha

Answer 1

Вы пытаетесь сделать выберите элемент перед вызовом getJSON завершена. Положите остальную часть вашего кода в функцию обратного вызова вашей функции getJSON, например, так:

$.getJSON("inputjson.json", function(data){ 
    // I have placed alert here previously and realized it doesn't go into here 
    console.log("datd"); 
    console.log(JSON.stringify(data,null,4)); 
    var newObject = jsonList.json_data.data; 
    var listItems= ""; 

    $form = $("<form></form>"); 
    $('#form_container').append($form); 
    // etc 
}); 

Также обратите внимание, что у вас есть опечатка и некоторые ненужные кавычки - console.log("datd"); должны быть console.log(data); (если вы на самом деле не так просто хотите поставить слово «datd» в ваш журнал).

Answer 2

Ваша переменная jsonList имеет действительный объектный литерал, поэтому она будет работать, если вы включите ее непосредственно в свой скрипт. Но этот объектный литерал недействителен JSON, поэтому он не будет работать, если он включен в отдельный файл для извлечения данных через $.getJSON(). В JSON все имена свойств должны быть указаны. Так эта линия:

"metadata" : { id : 23 }, 

... должно быть:

"metadata" : { "id" : 23 }, 

После того, как вы исправить, что вам нужно будет переместить код, который обрабатывается jsonList в функцию обратного вызова, который вы указали в $.getJSON():

$.getJSON('input.json',function(data){ 
    // do all processing here 
}); 

В будущем, если у вас возникли проблемы с JSON не работает, то вы можете проверить JSON с помощью этого сайта: http://jsonlint.com/

Answer 3

Если в файле JSON есть синтаксическая ошибка, она ничего не вернет. $ .getJSON - это псевдоним jQuery ajax, который использует фон $ .parseJSON() в фоновом режиме (http://api.jquery.com/jQuery.getJSON/). Посмотрите, синтаксис JSON немного отличается от синтаксиса буквенных объектов Javascript, поэтому, если вы пропустите цитату в переменной, как показано ниже, она не будет работать должным образом.

"metadata" : { id : 23 }