Javascript 使用jQuery从JSON创建3个表列

我正在使用jQuery从JSON生成一个表，但是由于JSON的结构，我正在努力获取要呈现的最后一列，而且其他列也没有显示我所寻找的方式

我曾尝试在最后一列中使用$.each和for循环，但我没有尝试过任何方法来修复它

JSON看起来像：

     {
         "countries": ["US", "UK", "France", "Germany"],
         "months": ["May-2012", "June-2012", "July-2012"],
         "types": [{
             "type": "Democrat"
         }, {
             "type": "Republican"
         }, {
             "type": "Green"
         }, ]
     }

我的jQuery是：

 var target = $('#targettable');
 target.empty();

 $(target).append($('<tr />')
     .append($('<th />').text('Countries'))
     .append($('<th />').text('Months'))
     .append($('<th />').text('Types')));

 $('<tr>')
     .append($('<td>', {
     'text': myJSON.countries
 }))
     .append($('<td>', {
     'text': myJSON.months
 }))

     .append($('<td>', {
     'text': myJSON.types.type
 }))
     .appendTo(target);

var target=$（'#targettable'）；
target.empty（）；
$（目标）。追加（$（''）
.append（$（''）.text（'Countries'））
.append（$（''）.text（'Months'））
.append（$（''）.text（'Types'）；
$('')
.附加（$（''）{
“文本”：myJSON.countries
}))
.附加（$（''）{
“text”：myJSON.months
}))
.附加（$（''）{
“文本”：myJSON.types.type
}))
.附于（目标）；

我把它弄得一团糟

最后一列根本没有显示，另外两列也没有显示为通缉犯，我想它会为每个项目创建一行

所以基本上是一列国家列表，下一列是月份列表，最后一列是类型列表。不确定我还能尝试什么？

试试这个（）：

myJSON={
“国家”：[“美国”、“英国”、“法国”、“德国”]，
“月份”：[“2012年5月”、“2012年6月”、“2012年7月”、“2012年8月”]，
“类型”：[{
“类型”：“民主党人”
}, {
“类型”：“共和国”
}, {
“类型”：“绿色”
}, {
“类型”：“紫色”
}
]
};
var target=$（“#targettable”），
表='CountriesMonthsTypes'；
对于（var i=0；i

注:

• 如果条目数不匹配，将出现js错误，我必须额外添加一个月并键入条目
• 由于大量的DOM交互，对每个JSON条目使用append会使构建表的速度慢得多，因此最好构建一个字符串，然后只应用一次表
试试这个（）：

myJSON={
“国家”：[“美国”、“英国”、“法国”、“德国”]，
“月份”：[“2012年5月”、“2012年6月”、“2012年7月”、“2012年8月”]，
“类型”：[{
“类型”：“民主党人”
}, {
“类型”：“共和国”
}, {
“类型”：“绿色”
}, {
“类型”：“紫色”
}
]
};
var target=$（“#targettable”），
表='CountriesMonthsTypes'；
对于（var i=0；i

注:
• 如果条目数不匹配，将出现js错误，我必须额外添加一个月并键入条目
• 由于大量的DOM交互，对每个JSON条目使用append会使构建表的速度慢得多，因此最好构建一个字符串，然后只应用一次表

---

这比你最初想象的要简单一些-

$(target).append($('<tr />')
         .append($('<th />').text('Countries'))
         .append($('<th />').text('Months'))
         .append($('<th />').text('Types')));

     for (var i = 0; i < myJSON.countries.length; i++) {
         $(target).append('<tr />');
         $('tr:last').append($('<td>', {
             'text': myJSON.countries[i]
         }));
         $('tr:last').append($('<td>', {
             'text': myJSON.months[i]
         }));
         $('tr:last').append($('<td>', {
             'text': myJSON.types[i].type
         }));
     }

$（目标）。追加（$（“”）
.append（$（''）.text（'Countries'））
.append（$（''）.text（'Months'））
.append（$（''）.text（'Types'）；
对于（var i=0；i

以下是一个例子-

---

您可以在这里做很多事情来提高效率—保存字符串并一次将其全部写出，缩短append语句使其成为一个字符串，等等。
这比您最初想象的要简单一些-

$(target).append($('<tr />')
         .append($('<th />').text('Countries'))
         .append($('<th />').text('Months'))
         .append($('<th />').text('Types')));

     for (var i = 0; i < myJSON.countries.length; i++) {
         $(target).append('<tr />');
         $('tr:last').append($('<td>', {
             'text': myJSON.countries[i]
         }));
         $('tr:last').append($('<td>', {
             'text': myJSON.months[i]
         }));
         $('tr:last').append($('<td>', {
             'text': myJSON.types[i].type
         }));
     }

$（目标）。追加（$（“”）
.append（$（''）.text（'Countries'））
.append（$（''）.text（'Months'））
.append（$（''）.text（'Types'）；
对于（var i=0；i

以下是一个例子-
您可以在这里做很多事情来提高效率—保存字符串并一次将其全部写出，缩短append语句使其成为一个字符串，等等。
给您：

myJSON = {
    "countries": ["US", "UK", "France", "Germany"],
    "months": ["May-2012", "June-2012", "July-2012"],
    "types": [{
        "type": "Democrat"
    }, {
        "type": "Republican"
    },{
        "type": "Green"
    },
    ]
}


var target = $('#targettable');
target.empty();

$(target).append($('<tr />')
    .append($('<th />').text('Countries'))
    .append($('<th />').text('Months'))
    .append($('<th />').text('Types'))
);

types = [];
for(var i = 0 ; i < myJSON.types.length; i ++){
    types.push(myJSON.types[i]['type']);
}

$('<tr>')
    .append($('<td>', {
        'text': myJSON.countries
    }))
    .append($('<td>', {
        'text': myJSON.months
    }))              
    .append($('<td>', {
        'text': types
    }))
    .appendTo(target);

myJSON={
“国家”：[“美国”、“英国”、“法国”、“德国”]，
“月份”：[“2012年5月”、“2012年6月”、“2012年7月”]，
“类型”：[{
“类型”：“民主党人”
}, {
“类型”：“共和国”
},{
“类型”：“绿色”
},
]
}
var target=$（“#targettable”）；
target.empty（）；
$（目标）。追加（$（''）
.append（$（''）.text（'Countries'））
.append（$（''）.text（'Months'））
.append（$（''）.text（'Types'））
);
类型=[]；
for（var i=0；i

给你：

myJSON = {
    "countries": ["US", "UK", "France", "Germany"],
    "months": ["May-2012", "June-2012", "July-2012"],
    "types": [{
        "type": "Democrat"
    }, {
        "type": "Republican"
    },{
        "type": "Green"
    },
    ]
}


var target = $('#targettable');
target.empty();

$(target).append($('<tr />')
    .append($('<th />').text('Countries'))
    .append($('<th />').text('Months'))
    .append($('<th />').text('Types'))
);

types = [];
for(var i = 0 ; i < myJSON.types.length; i ++){
    types.push(myJSON.types[i]['type']);
}

$('<tr>')
    .append($('<td>', {
        'text': myJSON.countries
    }))
    .append($('<td>', {
        'text': myJSON.months
    }))              
    .append($('<td>', {
        'text': types
    }))
    .appendTo(target);

myJSON={
“国家”：[“美国”、“英国”、“法国”、“德国”]，
“月份”：[“2012年5月”、“2012年6月”、“2012年7月”]，
“类型”：[{
“类型”：“民主党人”
}, {
“类型”：“共和国”
},{
“类型”：“绿色”
},
]
}
var target=$（“#targettable”）；
target.empty（）；
$（目标）。追加（$（''）
.append（$（''）.text（'Countries'））
.append（$（''）.text（'Months'））
.append（$（''）.text（'Types'））
);
类型=[]；
对于（var i=0；imyJSON = {
    "countries": ["US", "UK", "France", "Germany"],
    "months": ["May-2012", "June-2012", "July-2012","well","this"],
    "types": [
        {
            "type": "Democrat"
        }, {
            "type": "Republican"
        }, {
            "type": "Green"
        }
    ]
}    
var target = $('#targettable');
var longest =null;
var thead = $('<tr />');
$.each(myJSON, function(index, value){
    if(longest === null) longest = index;
    else if(myJSON[longest].length < myJSON[index].length) longest = index;

    thead.append($("<th>").text(index));
});

target.find("thead").append(thead);

for (var i = 0; i < myJSON[longest].length; i++) {
    $(target).append('<tr />');
    $('tr:last').append($('<td>', {
        'text': myJSON.countries[i]?myJSON.countries[i]:""
    }));
    $('tr:last').append($('<td>', {
        'text': myJSON.months[i]?myJSON.months[i]:""
    }));
    $('tr:last').append($('<td>', {
        'text': myJSON.types[i] && myJSON.types[i].type?myJSON.types[i].type:""
    }));
};