我正在为对象“Test”中的每个对象创建HTML元素，这些对象中的每一个都可以是一个类型：block或type：list，当对象是一个时，它包含一个名为“List”的数组类型：列表
我需要为每个类型：list对象创建一个HTML“.panel.panel-default”元素，并将数组“List”的每个元素插入到与其对应的“panel-body”HTML标记内。现在我只为每个类型：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"
]
}
]
}
]}
]}
链接：
答案 0 :(得分：0)
请查看下面的代码段。你可以建立这样的列表：
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>