使用 jquery .each 显示复杂的 JSON答案

【问题标题】：Display complex JSON with use of jquery .each使用 jquery .each 显示复杂的 JSON
【发布时间】：2012-12-30 06:57:58
【问题描述】：

我在尝试使此代码正常工作时遇到了麻烦。我真的看不出javascript有什么问题。当我调试时，我也没有发现错误。

<head>
<style type="text/css">
</style>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function() {
$('#Presentation').click(function() {
var jsonloc = "ppt.json";
        $.when($.getJSON(jsonloc)).then(function(info){
        $('#header').empty();
            $.each(info.slides, function(entryIndex, entry){
            var html = '<div class="info">';                      
            html += '<h3>' + entry['title'] + '</h3>';
            html += '<div class="author">' + entry['author'] + '</div>';                    
                if(entry['slides']){
                    $.each(entry['slides'],function(slideIndex, slides){
                        html += '<h3>' + slides['Slide'] + '<h3>';                                          
                        html += '<div class="header">' + slides['header'] + '</div>';                          
                        }); 
                if(slides['Content']){
                html += '<div class="Content">';                                            
                html += '<ol>';
                    $.each(slides['content'],function(contentIndex, content){
                        html += '<li>' + content + '</li>';                        
                            }); 
                        html += '</ol>';                        
                        html += '</div>';                               
                    };                                  
                $('#header').append(html);
            };                         
        });
        return false;
    });
    });

});
</script>
</head>
<body>

<a href="#" id="Presentation">ppt presentation</a>
<div id="header">
</div>
</body>

这是 JSON：

{
    "title": "presentation",
    "date_created": "",
    "last_modified": "",
    "author": "By: Someone online",
    "slides": [
        {
            "Slide": "1",
            "header": "first header",
            "src": "ssss.jpg",
            "Content": "dddddddddddddddddddddddddddddddddddd",
            "Content": "dddddddddddddddddddddddddddddddddddd",
            "Content": "dddddddddddddddddddddddddddddddddddd"
        },
        {
            "Slide2": "2",
            "header2": "header 2",
            "src2": null,
            "Content": "dddddddddddddddddddddddddddddddddddd",
            "Content": "dddddddddddddddddddddddddddddddddddd",
            "Content": "dddddddddddddddddddddddddddddddddddd"

        },
        {
            "Slide3": "3",
            "header3": "header3",
            "src3": "sdfdsf.jpg",
            "Content": "dddddddddddddddddddddddddddddddddddd",
            "Content": "dddddddddddddddddddddddddddddddddddd",
            "Content": "dddddddddddddddddddddddddddddddddddd"
        }
    ]
}

我真的很想完成这项工作，并且不想使用其他方法，例如 jquery 模板。有什么东西会跳出来吗？

【问题讨论】：

我认为 json 文件不可能多次使用相同的键，因为您将无法检索 Content 的值`
我尝试了不同的代码和方法。我现在已经修复了 JSON。
请用相关的json编辑您的问题

标签： jquery json getjson each

【解决方案1】：

你关闭.each 太快了：

$.each(entry['slides'],function(slideIndex, slides){
    html += '<h3>' + slides['Slide'] + '<h3>';                                          
    html += '<div class="header">' + slides['header'] + '</div>';                          
 }); 
 if(slides['Content']){ 
 // ...

这样你只能访问slides['Content']的最后一个值。

您需要将 if 及其包含的内容放入循环中，如下所示：

 $.each(entry['slides'],function(slideIndex, slides){
    html += '<h3>' + slides['Slide'] + '<h3>';                                          
    html += '<div class="header">' + slides['header'] + '</div>';      
    if(slides['Content']){
    // ...

 });

【讨论】：

好的，所以我更正了，但仍然......没有显示 JSON
还有你的json搞砸了，为什么会有“Slide”、“Slide2”、“Slide3”？
我在 JSON 上尝试其他代码，所以我一直在更改它。我现在已经更正了，但是仍然没有运气。