Получите содержимое json из внешнего файла

Question

Я пытаюсь получить содержимое json из внешнего файла (list.json), но все попытки потерпели неудачу. Я прототипировал свой код в Jsfiddle (http://jsfiddle.net/ctmvcyy1/).

Я думаю, что решение очень просто, но я, конечно, что-то делаю неправильно.

Спасибо, что помогли мне!

var json = { 
    "lojas": [ 
     { 
      "cidade": "New York", 
      "uf": "RS", 
      "unidades": [ 
       { 
        "nome": "Tribeca", 
        "logradouro": "Rua Ligula Amet, 30", 
       }, 
       { 
        "nome": "Brooklyn", 
        "logradouro": "Av. Venenatis Dapibus, 200", 
       } 
      ] 
     }, 
     { 
      "cidade": "São Paulo", 
      "uf": "SP", 
      "unidades": [ 
       { 
        "nome": "Centro", 
        "logradouro": "Av. Purus Fusce, 1003", 
       } 
      ] 
     }, 
     { 
      "cidade": "Rio de Janeiro", 
      "uf": "RJ", 
      "unidades": [ 
       { 
        "nome": "Copacabana", 
        "logradouro": "Rua Malesuada, 120", 
       } 
      ] 
     } 
    ] 
}; 

$.each(json.lojas, function (i, lojas) { 
    var siglas = '<li><a href="#' + lojas.uf + '">' + lojas.cidade + '</a></li>'; 


    var cidades = '<ul id="' + lojas.uf + '"class="cidades">'; 
     $.each(lojas.unidades, function (i, unidades) { 
      cidades += '<li><p>'+ unidades.nome + '</p><p>' + unidades.logradouro + '</p></li>'; 
     }); 
    cidades += '</ul>'; 

    $(siglas).appendTo('#lista-siglas'); 
    $(cidades).appendTo('#lista-cidades'); 
}); 

Answer 1

Вот рабочий plunkr: http://plnkr.co/edit/d23lntczvQZMEfOXRPqW?p=preview

Просто сделать:

$.getJSON("lojas.json", function (json){ 
    $.each(json.lojas, function (i, lojas) { 
     var siglas = '<li><a href="#' + lojas.uf + '">' + lojas.cidade + '</a></li>'; 


     var cidades = '<ul id="' + lojas.uf + '"class="cidades">'; 
     $.each(lojas.unidades, function (i, unidades) { 
     cidades += '<li><p>'+ unidades.nome + '</p><p>' + unidades.logradouro + '</p></li>'; 
     }); 
     cidades += '</ul>'; 

     $(siglas).appendTo('#lista-siglas'); 
     $(cidades).appendTo('#lista-cidades'); 
    }); 
    }); 

Обратите внимание, что для того, чтобы это работало, необходимо удалить лишние запятые от вашего JSON. Итак, lojas.json будет выглядеть так:

{ 
    "lojas": [ 
     { 
      "cidade": "New York", 
      "uf": "RS", 
      "unidades": [ 
       { 
        "nome": "Tribeca", 
        "logradouro": "Rua Ligula Amet, 30" 
       }, 
       { 
        "nome": "Brooklyn", 
        "logradouro": "Av. Venenatis Dapibus, 200" 
       } 
      ] 
     }, 
     { 
      "cidade": "São Paulo", 
      "uf": "SP", 
      "unidades": [ 
       { 
        "nome": "Centro", 
        "logradouro": "Av. Purus Fusce, 1003" 
       } 
      ] 
     }, 
     { 
      "cidade": "Rio de Janeiro", 
      "uf": "RJ", 
      "unidades": [ 
       { 
        "nome": "Copacabana", 
        "logradouro": "Rua Malesuada, 120" 
       } 
      ] 
     } 
    ] 
}