jquery - 获取Json嵌套数组元素

Question

我正在为“Test”对象内部的每个对象创建 HTML 元素，每个对象都可以是 type:block 或 type:list，并且当对象为“List”时，它包含一个名为“List”的数组。类型:列表。

我需要为每个 type:list 对象创建一个 HTML“.panel.panel-default”元素，并将数组“List”的每个元素插入与其对应的“panel-body”HTML 标记中。目前，我只为每个 type:list 对象打印了具有 [object Object] 形式的数组“List”。

如何将数组“List”的每个元素放入与其对应的 HTML“panel-body”元素内。

脚本:

var pruebaBox = $('body').append('<div class="panel-group container" id="accordion"></div>');
    $.getJSON('prueba.json', function(datas) {
        $.each(datas.INDEX,function(i,v){
            $.each(v,function(first,v){
                $.each(v,function(i,data){
                    if (data.type === "block") {
                        $('#accordion').append('<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse' + data.id + '">'+data.name +'</a></h4></div><div id="collapse' + data.id + '" class="panel-collapse collapse"><div class="panel-body">'+ data.content + '</div></div></div>');                      
                    }
                    else if (data.type === "list"){
                        $('#accordion').append('<div id="listPanel" class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse' + data.id + '">'+data.name +'</a></h4></div><div id="collapse' + data.id + '" class="panel-collapse collapse"><div class="panel-body">'+ data.content + '<br><br>' + '<p i="print_Listas_Lista" >' + data.ListasObj + '</p>' + '</div></div></div>');
                        $.each( data.ListasObj,function( fieldName,value ){
                            $.each(value,function(eachLista,value){
                                $.each(value,function(last,valueLast){});
                            });
                        });
                    };
                });
            });
        });
    });

JSON(prueba.json):

{"INDEX": [
 { "Test" : [
   { "id":1,
    "type":"block",
     "name":" QUE ES UN CFDI?", 
     "content":"Es un Comprobante Fiscal Digital por Internet (CFDI), el cual cumple con todos los requisitos legales del SAT y se emite mediante un Proveedor Autorizado de Certificación (PAC), quien es aquella persona moral que cuenta con autorización del Servicio de Administración Tributaria (SAT) para validar los CFDI generados por los contribuyentes, asignarles el folio e incorporarles el sello digital del SAT. Asimismo, tienen como obligación, enviar al Servicio de Administración Tributaria copia de los CFDI que se validen.",
     "img":"data/img/servicios1.jpg"
   },
   { "id":2,
    "type":"block",
     "name":"CUAL ES LA DIFERENCIA ENTRE UN CFD Y UN CFDI?", 
     "content":"Fortalece y mitiga los riesgos de seguridad e integridad de los datos, por medio de los servicios de consultoría, automatización de procesos, desarrollo y solución de sistemas de acuerdo a las necesidades de cada uno de los clientes que brindan un valor agregado al servicio prestado.",
     "img":"data/img/servicios2.jpg"
   },
   { "id":3,
    "type":"block",
     "name":"QUIENES DEBEN FACTURAR ELECTRONICAMENTE?", 
     "content":"La Aplicación o Software esta específicamente desarrollada para el cumplimiento estricto de la legalidad vigente emitida por el Servicio de Administración Tributaria (SAT) de manera sencilla y eficiente.",
     "img":"data/img/servicios3.jpg"
   },
   { "id":4,
    "type":"block",
     "name":"CUALES SON LOS REQUISITOS PARA GENERAR UN CFDI?", 
     "content":"Proceso de validaciones de información y confirmación de datos que se realiza a los Comprobantes Fiscales Digitales con el objeto de verificar la autenticidad y origen, en cumplimiento con los requerimientos solicitados por el SAT.",
     "img":"data/img/servicios4.jpg"
   },
   { "id":5,
    "type":"block",
     "name":"QUE ES LA FIRMA ELECTRONICA AVANZADA (FEA o FIEL)?", 
     "content":"Definición de un Plan Estratégico para la creación de un negocio sólido enfocado en la gestión de los riesgos y en la creación de valor a largo plazo. Mis e-Folios ayudará a preparar y construir una visión estratégica de su negocio que le brinde certidumbre, desarrollando ventajas competitivas sobre sus competidores, identificando fuentes de crecimiento.",
     "img":"data/img/servicios5.jpg"
   },
   { "id":6,
    "type":"block",
     "name":"QUE ES UN CERTIFICADO DE SELLO DIGITAL (CSD)?", 
     "content":"Por medio de esta aplicación usted podrá emitir sus comprobantes fiscales por internet de forma gratuita, en donde se le ofrece un sitio de facil manejo, y con funcionalidades que le servirán para llevar el control de los documentos emitidos a traves de internet",
     "img":"data/img/servicios6.jpg"
   },
   { "id":7,
    "type":"block",
     "name":"PARA QUE SIRVE EL CERTIFICADO DE SELLO DIGITAL (CSD)?", 
     "content":"Nuestro sistema puede ser contratado en cualquiera de las tres opciones opciones o una combinación de las mismas. Abajo detallamos los esquemas y beneficios en cada caso. ",
     "img":"data/img/servicios7.jpg"
   },
   { "id":8,
     "type":"block",
     "name":"QUE ES UNA ADDENDA?", 
     "content":"Nuestro sistema puede ser contratado en cualquiera de las tres opciones opciones o una combinación de las mismas. Abajo detallamos los esquemas y beneficios en cada caso",
     "img":"data/img/servicios8.jpg"
   },
   { "id":9,
     "type":"list",
     "name":"QUE ES UN COMPLEMENTO?", 
     "content":"Nuestro sistema puede ser contratado en cualquiera de las tres opciones opciones o una combinación de las mismas. Abajo detallamos los esquemas y beneficios en cada caso",
     "img":"data/img/servicios9.jpg",
     "ListasObj":[
        {
          "Type":"Uso",
          "Fecha":"2010",
          "List":[
            "A través de un impresor autorizado 1",
            "A través de un impresor autorizado 2",
            "A través de un impresor autorizado 3",
            "A través de un impresor autorizado 4",
            "A través de un impresor autorizado 5",
            "Sólo podrían ser elaboradas hasta el 31 de diciembre de 2010, con vigencia de dos años. 1"
          ]
        },
        {
          "Type":"Uso",
          "Fecha":"2010",
          "List":[
            "A través de un impresor autorizado  2",
            "A través de un impresor autorizado  2-3",
            "Sólo podrían ser elaboradas hasta el 31 de diciembre de 2010, con vigencia de dos años. 2"
          ]
        },
        {
          "Type":"Elaboración",
          "Fecha":"2010",
          "List":[
            "A través de un impresor autorizado 3",
            "Sólo podrían ser elaboradas hasta el 31 de diciembre de 2010, con vigencia de dos años. Fin 3"
          ]
        }
      ]                 
    },
    { "id":10,
     "type":"list",
     "name":"QUE ES UN COMPLEMENTO LIST-1?", 
     "content":"Nuestro sistema puede ser contratado en cualquiera de las tres opciones opciones o una combinación de las mismas. Abajo detallamos los esquemas y beneficios en cada caso",
     "img":"data/img/servicios10.jpg",
     "ListasObj":[
        {
          "Type":"Uso",
          "Fecha":"2011",
          "List":[
            "A través de un impresor autorizado",
            "A través de un impresor autorizado",
            "A través de un impresor autorizado",
            "A través de un impresor autorizado",
            "Sólo podrían ser elaboradas hasta el 31 de diciembre de 2010, con vigencia de dos años."
          ]
        },
        {
          "Type":"Elaboración",
          "Fecha":"2011",
          "List":[
            "A través de un impresor autorizado",
            "Sólo podrían ser elaboradas hasta el 31 de diciembre de 2010, con vigencia de dos años. FIN"
          ]
        }
      ]                
    },
    { "id":11,
     "type":"list",
     "name":"QUE ES UN xxxxxxxx?", 
     "content":"Nuestro sistema puede ser contratado en cualquiera de las tres opciones opciones o una combinación de las mismas. Abajo detallamos los esquemas y beneficios en cada caso",
     "img":"data/img/servicios9.jpg",
     "ListasObj":[
        {
          "Type":"Uso",
          "Fecha":"2010",
          "List":[
            "A través de un impresor autorizado 11",
            "A través de un impresor autorizado 21",
            "A través de un impresor autorizado 31",
            "A través de un impresor autorizado 41",
            "A través de un impresor autorizado 5",
            "Sólo podrían ser elaboradas hasta el 31 de diciembre de 2010, con vigencia de dos años. 1"
          ]
        },
        {
          "Type":"Uso",
          "Fecha":"2010",
          "List":[
            "A través de un impresor autorizado  2",
            "A través de un impresor autorizado  2-3",
            "Sólo podrían ser elaboradas hasta el 31 de diciembre de 2010, con vigencia de dos años. 2"
          ]
        },
        {
          "Type":"Elaboración",
          "Fecha":"2010",
          "List":[
            "A través de un impresor autorizado 3",
            "Sólo podrían ser elaboradas hasta el 31 de diciembre de 2010, con vigencia de dos años. 3"
          ]
        }
      ]                 
    }
 ]}
]}

链接:

https://mise-folios.firebaseapp.com/prueba/prueba.html

Answer 1

请看下面的代码片段。您可以像这样构建列表:

var datas = {
  "INDEX": [{
    "Test": [{
        "id": 1,
        "type": "block",
        "name": " QUE ES UN CFDI?",
        "content": "Es un Comprobante Fiscal Digital por Internet (CFDI), el cual cumple con todos los requisitos legales del SAT y se emite mediante un Proveedor Autorizado de Certificación (PAC), quien es aquella persona moral que cuenta con autorización del Servicio de Administración Tributaria (SAT) para validar los CFDI generados por los contribuyentes, asignarles el folio e incorporarles el sello digital del SAT. Asimismo, tienen como obligación, enviar al Servicio de Administración Tributaria copia de los CFDI que se validen.",
        "img": "data/img/servicios1.jpg"
      },
      {
        "id": 9,
        "type": "list",
        "name": "QUE ES UN COMPLEMENTO?",
        "content": "Nuestro sistema puede ser contratado en cualquiera de las tres opciones opciones o una combinación de las mismas. Abajo detallamos los esquemas y beneficios en cada caso",
        "img": "data/img/servicios9.jpg",
        "ListasObj": [{
            "Type": "Uso",
            "Fecha": "2010",
            "List": [
              "A través de un impresor autorizado 1",
              "A través de un impresor autorizado 2",
              "A través de un impresor autorizado 3",
              "A través de un impresor autorizado 4",
              "A través de un impresor autorizado 5",
              "Sólo podrían ser elaboradas hasta el 31 de diciembre de 2010, con vigencia de dos años. 1"
            ]
          },
          {
            "Type": "Uso",
            "Fecha": "2010",
            "List": [
              "A través de un impresor autorizado  2",
              "A través de un impresor autorizado  2-3",
              "Sólo podrían ser elaboradas hasta el 31 de diciembre de 2010, con vigencia de dos años. 2"
            ]
          },
          {
            "Type": "Elaboración",
            "Fecha": "2010",
            "List": [
              "A través de un impresor autorizado 3",
              "Sólo podrían ser elaboradas hasta el 31 de diciembre de 2010, con vigencia de dos años. Fin 3"
            ]
          }
        ]
      }
    ]
  }]
};

var pruebaBox = $('body').append('<div class="panel-group container" id="accordion"></div>');
//$.getJSON('prueba.json', function(datas) {
$.each(datas.INDEX, function(i, v) {
  $.each(v, function(first, v) {
    $.each(v, function(i, data) {
      if (data.type === "block") {
        $('#accordion').append('<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse' + data.id + '">' + data.name + '</a></h4></div><div id="collapse' + data.id + '" class="panel-collapse collapse"><div class="panel-body">' + data.content + '</div></div></div>');
      } else if (data.type === "list") {
        var List = '';
        $.each(data.ListasObj, function(i, o) {
           var innerList = '<li>' + o.Type + ' ' + o.Fecha + '<ul>';
          $.each(o.List, function(i, value) {
            innerList += '<li>' + value + '</li>';
          });
          List += innerList + '</ul></li>';
        });

        $('#accordion').append('<div id="listPanel" class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse' + data.id + '">' + data.name + '</a></h4></div><div id="collapse' + data.id + '" class="panel-collapse collapse"><div class="panel-body">' + data.content + '<br><br>' + '<ul i="print_Listas_Lista" >' + List + '</ul>' + '</div></div></div>');
      };
    });
  });
});
//});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>