Javascript JSON-根据JSON的索引显示数据

我试图以项目符号的形式显示特定的json数据。每个章节将数据导入

，每个标题导入
，并将这些标题作为
链接
。最后，在第二个<代码> 中，考虑单击“强>标题> <强>显示相关的<强>内容<强>的索引。我已经有一些代码如下（尚未工作）

Html：

<div id="page1">
    <ul id="courses"></ul>
</div>
<div id="page2">
    <p id="content"></p>
</div>

var jsonString = '[{"chapter":"General","title":"News forum","content":"Text1"},
{"chapter":"CHAPTER 1","title":"1.1 Introduction","content":"Text2"},
{"chapter":"CHAPTER 1","title":"1.2 Main Idea","content":"Text3"},
{"chapter":"CHAPTER 2","title":"2.1 Architecture","content":"Text4"},
{"chapter":"CHAPTER 3","title":"3.1 Liter.overview","content":"Text5"}]';

var myData = JSON.parse(jsonString);

$(document).ready(function() {
    var $clist = $('#courses');
    for(var i in myData) {
        $('<li><h3>' +this.[i].chapter+ '</h3><p><a href="#page2" onclick="dContent(i)">' +this.title+ '</a></p></li>').appendTo($clist);
    }

    function dContent() {
        var $ccontent = $('#content');
        $(this.[i].content).appendTo($ccontent);
    }
});





JS代码：

<div id="page1">
    <ul id="courses"></ul>
</div>
<div id="page2">
    <p id="content"></p>
</div>

var jsonString = '[{"chapter":"General","title":"News forum","content":"Text1"},
{"chapter":"CHAPTER 1","title":"1.1 Introduction","content":"Text2"},
{"chapter":"CHAPTER 1","title":"1.2 Main Idea","content":"Text3"},
{"chapter":"CHAPTER 2","title":"2.1 Architecture","content":"Text4"},
{"chapter":"CHAPTER 3","title":"3.1 Liter.overview","content":"Text5"}]';

var myData = JSON.parse(jsonString);

$(document).ready(function() {
    var $clist = $('#courses');
    for(var i in myData) {
        $('<li><h3>' +this.[i].chapter+ '</h3><p><a href="#page2" onclick="dContent(i)">' +this.title+ '</a></p></li>').appendTo($clist);
    }

    function dContent() {
        var $ccontent = $('#content');
        $(this.[i].content).appendTo($ccontent);
    }
});

var jsonString='[{“章节”：“概述”，“标题”：“新闻论坛”，“内容”：“Text1”}，
{“章节”：“第1章”，“标题”：“1.1导言”，“内容”：“文本2”}，
{“章节”：“第1章”，“标题”：“1.2主要思想”，“内容”：“文本3”}，
{“章节”：“第2章”，“标题”：“2.1架构”，“内容”：“文本4”}，
{“章节”：“第3章”，“标题”：“3.1升.概述”，“内容”：“文本5}]；
var myData=JSON.parse（jsonString）；
$（文档）.ready（函数（）{
var$clist=$（“#课程”）；
用于（myData中的var i）{
$（'
'+this.[i].chapter+'
）.appendTo（$clist）；
}
函数dContent（）{
var$ccontent=$（“#内容”）；
$（this[i].content）.appendTo（$ccontent）；
}
});

预期结果：

- General
    News forum          // onclick display 'Text1' in <p id="content">
- CHAPTER 1
    1.1 Introduction    // onclick display 'Text2' in <p id="content">
    1.2 Main Idea       // onclick display 'Text3' in <p id="content">
- CHAPTER 2
    2.1 Architecture    // onclick display 'Text4' in <p id="content">
- CHAPTER 3
    3.1 Liter.overview  // onclick display 'Text5' in <p id="content">

-概述
新闻论坛//在

-第一章
1.1简介//在

1.2主旨//在

-第二章
2.1体系结构//在

-第三章
3.1升。概述//在


任何帮助都将不胜感激

更新：这是项目。
var jsonString='[{“章节”：“概述”，“标题”：“新闻论坛”，“内容”：“Text1”}，{“章节”：“第一章”，“标题”：“1.1简介”，“内容”：“Text2”}，{“章节”：“第一章”，“标题”：“1.2主要思想”，“内容”：“Text3”}，{“章节”：“第二章”，“标题”：“2.1架构”，“内容”：“Text4”}{“章节”：“第3章”，“标题”：“3.1升.概述”，“内容”：“文本5”}]；
var myData=JSON.parse（jsonString）；
var dContent=函数（事件）{
$ccontent.html（$（this.data（'content'））；
}
var$clist=$（“#课程”）；
var$ccontent=$（“#内容”）；
var html=''；
var chapterList=[]；
$clist.on（'click'，'li'，dContent）；
$.each（myData，函数（索引，项）{
如果（$.inArray（item.chapter，chapterList）=-1）{
章节列表。推送（项目。章节）；
html+='
'+item.chapter+'
'；
}
否则{
html+='
'
}
});
$clist.html（html）；
您的JSON结构无效。正确的结构如下所示：

[
    {
        "chapter": "General",
        "title": "News forum",
        "content": "Text1"
    },
    {
        "chapter": "CHAPTER 1",
        "title": "1.1 Introduction",
        "content": "Text2"
    },
    {
        "chapter": "CHAPTER 1",
        "title": "1.2 Main Idea",
        "content": "Text3"
    },
    {
        "chapter": "CHAPTER 2",
        "title": "2.1 Architecture",
        "content": "Text4"
    },
    {
        "chapter": "CHAPTER 3",
        "title": "3.1 Liter.overview",
        "content": "Text5"
    }
]

注意这里的逗号
3.1升。概述”，“内容”：“Text5”}，
在JSON结构中，它在这里失败

用代码更新答案

var jsonString = '[{"chapter": "General","title": "News forum","content": "Text1"},{"chapter": "CHAPTER 1","title": "1.1 Introduction","content": "Text2"},{"chapter": "CHAPTER 1","title": "1.2 Main Idea", "content": "Text3"},{"chapter": "CHAPTER 2","title": "2.1 Architecture","content": "Text4"},{"chapter": "CHAPTER 3","title": "3.1 Liter.overview","content": "Text5"}]';

var myData = JSON.parse(jsonString);
$(document).ready(function() {
    function dContent() {
       $("#content").css("border","2px solid red").css("height","100px");
       $("#content").html($(this).data('value'));
    }
     $("#courses").on('click','li', dContent) 
    $.each(myData, function(index,item) { 
    $("#courses").append("<li class='li' data-value="+item.content+">"+item.chapter+"  <p>"+item.title+"</p></li>");

    })



});

var jsonString='[{“章节”：“概述”，“标题”：“新闻论坛”，“内容”：“Text1”}，{“章节”：“第一章”，“标题”：“1.1简介”，“内容”：“Text2”}，{“章节”：“第一章”，“标题”：“1.2主要思想”，“内容”：“Text3”}，{“章节”：“第二章”，“标题”：“2.1架构”，“内容”：“Text4”}，{“章节”：“第三章”，“标题”：“3.1升概述”，“内容”：“Text5”}]；
var myData=JSON.parse（jsonString）；
$（文档）.ready（函数（）{
函数dContent（）{
$（“#内容”）.css（“边框”，“2倍纯红”）.css（“高度”，“100倍”）；
$（“#content”）.html（$（this.data（'value'））；
}
$（“#课程”）。在（'click'，'li'，dContent）上
$.each（myData，函数（索引，项）{
$（“#课程”）。追加（“
“+item.chapter+”“+item.title+”
”）；
})
});

这个[i]。第
章应该是
myData[i]。第
章。实际上，这是一个语法错误

然后，您应该重新考虑一下这个
的其他用法是否正确。
将它复制到您的JSFIDLE中，并签入jQuery，这将使它正常工作

var jsonString = '[{"chapter":"General","title":"News forum","content":"Text1"},{"chapter":"CHAPTER 1","title":"1.1 Introduction","content":"Text2"},{"chapter":"CHAPTER 1","title":"1.2 Main Idea","content":"Text3"},{"chapter":"CHAPTER 2","title":"2.1 Architecture","content":"Text4"},{"chapter":"CHAPTER 3","title":"3.1 Liter.overview","content":"Text5"}]';

var myData = JSON.parse(jsonString);

$(document).ready(function() {
    var $clist = $('#courses');

    $.each(myData, function(i,o){
        $('<li><h3>' +o.chapter+ '</h3><p>' +
          '<a href="#page2" onclick="dContent(\''+o.content+'\')">' +
          o.title + '</a></p></li>').appendTo($clist);
    });

    window.dContent = function(content) {
        var $ccontent = $('#content');
        $ccontent.append(content);

    } 
});

var jsonString='[{“章节”：“概述”，“标题”：“新闻论坛”，“内容”：“Text1”}，{“章节”：“第一章”，“标题”：“1.1简介”，“内容”：“Text2”}，{“章节”：“第一章”，“标题”：“1.2主要思想”，“内容”：“Text3”}，{“章节”：“第二章”，“标题”：“2.1架构”，“内容”：“Text4”}，{“章节”：“第三章”，“标题”：“3.1升概述”内容“：“Text5”}]；
var myData=JSON.parse（jsonString）；
$（文档）.ready（函数（）{
var$clist=$（“#课程”）；
$.each（我的数据，函数（i，o）{
$（“
”+o.chapter+“”+
“
”）。附录（$clist）；
});
window.dContent=函数（内容）{
var$ccontent=$（“#内容”）；
$ccontent.append（内容）；
} 
});
我已经编写了一个脚本来实现这一点，包括将同一章中的项目放在一起。您可以看到一个

除了jQuery用于
$（a）之外，我在大多数情况下都使用了原生JavaScript.ready
以确保兼容性。为什么这么长？因为我使用DOM方法构建了
，而不是html字符串。这使得缓存和附加元素变得很容易。最后，通过生成器函数添加内容。我这样做的方式意味着页面将使用稍多的内存，但您可以使用任何strin在内容部分显示的JavaScript中有效。您可能希望使用
空白：pre-wrap；
对其进行样式设置，以按预期显示新行

不管怎样，这是代码

var jsonString = '[{"chapter":"General","title":"News forum","content":"Text1"},\
{"chapter":"CHAPTER 1","title":"1.1 Introduction","content":"Text2"},\
{"chapter":"CHAPTER 1","title":"1.2 Main Idea","content":"Text3"},\
{"chapter":"CHAPTER 2","title":"2.1 Architecture","content":"Text4"},\
{"chapter":"CHAPTER 3","title":"3.1 Liter.overview","content":"Text5"}]';
// the \ at line ends is to escape the new line in the string literal

var myData = JSON.parse(jsonString);

$(document).ready(function() {
    var courses_ul = document.getElementById('courses'), // cache elements
        content_elm = document.getElementById('content'),
        i, li, h3, p, a, // vars for loop
        chapters = {}, chap; // cache chapters
    for (i = 0; i < myData.length; ++i) {
        chap = myData[i].chapter; // shorthand since we'll use it a few times
        // make <p>, <a>
        p = document.createElement('p');
        a = document.createElement('a'); // could append <a> to <p> here if you want
        a.setAttribute('href', '#page2');
        a.appendChild(document.createTextNode(myData[i].title));
        // set up click
        $(a).on('click', (function (content) { // generator - will give scope to
            return function () { // this returned event listener.
                content_elm.innerHTML = '';
                content_elm.appendChild(document.createTextNode(content));
            };
        }(myData[i].content))); // chose `content` not `i` so no reliance on `myData`
        // now check cache if chapter exists -
        if (chap in chapters) { // retreive <li> for chapter from cache
            li = chapters[chap]; // from cache
            // append <p>, <a>
            li.appendChild(p).appendChild(a);
        } else { // if not in cache
            li = document.createElement('li'); // make a new <li>
            chapters[chap] = li; // and cache
            // make & append <h3>
            h3 = document.createElement('h3');
            h3.appendChild(document.createTextNode(chap));
            li.appendChild(h3);
            // append <p>, <a> and to <ul>
            courses_ul.appendChild(li).appendChild(p).appendChild(a);
        }
    }
});

var jsonString='[{“章节”：“概述”，“标题”：“新闻论坛”，“内容”：“Text1”}\
{“章节”：“第1章”，“标题”：“1.1导言”，“内容”：“文本2”}\
{“章节”：“第1章”，“标题”：“1.2主要思想”，“内容”：“文本3”}\
{“章节”：“第2章”，“标题”：“2.1架构”，“内容”：“文本4”}\