从外部文件

时间:2015-07-30 00:00:36

标签: javascript php jquery html json

我正在尝试从外部文件(list.json)获取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');
});

1 个答案:

答案 0 :(得分:1)

以下是工作人员: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"
                }
            ]
        }
    ]
}