JSON - Показать данные в соответствии с индексом json

Question

Я пытаюсь отобразить конкретные данные json в форме Пули. Каждый глава данные в <li>, каждый название в <p> и сделать эти названия как link. Наконец, рассмотрим на индекс щелкнули название отображения связанных содержания во втором <div>. У меня уже есть часть кода ниже (пока не работает).

Html:

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

JS код:

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); 
    } 
}); 

Ожидаемый результат:

- 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"> 

Любая помощь будет оценена.

ОБНОВЛЕНИЕ: Вот проект JSFIDDLE.

Answer 1

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); 

var dContent = function(event) { 
    $ccontent.html($(this).data('content')); 
} 

var $clist = $('#courses'); 
var $ccontent = $("#content"); 
var html = ''; 
var chapterList = []; 

$clist.on('click', 'li', dContent); 

$.each(myData, function(index, item) { 
    if ($.inArray(item.chapter, chapterList) === -1) { 
     chapterList.push(item.chapter); 
     html += '<li data-content="'+ item.content +'"><h3>' + item.chapter + '</h3><p><a href="#page2">' + item.title + '</a></p></li>'; 
    } 
    else { 
     html += '<li data-content="'+ item.content +'"><p><a href="#page2">' + item.title + '</a></p></li>' 
    } 
}); 
$clist.html(html); 

Answer 2

У вас есть недействительная структура 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 Liter.overview","content":"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>"); 

    }) 



}); 

DEMO ON JSFIDDLE

Answer 3

this.[i].chapter должен вероятно, будет myData[i].chapter. Как бы то ни было, это синтаксическая ошибка.

Затем вы должны переосмыслить, правильны ли ваши другие варианты использования this.

Answer 4

Копирование этого в ваш JSFiddle и проверка в 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); 

    } 
}); 

Answer 5

Я написал сценарий, чтобы сделать это, включая одновременное размещение предметов из одной главы. Вы можете увидеть demo fiddle here.

Для большей совместимости я использовал родной JavaScript, за исключением jQuery для $(a).on('click', .. и $(document).ready для обеспечения совместимости. Почему так долго? Потому что я построил <ul> с помощью методов DOM вместо строки html. Это упростило кеширование и добавление элементов. Наконец, содержимое добавляется через функцию генератора. То, как я это сделал, означает, что страница будет использовать немного больше памяти, но вы можете иметь любую строку, которая действительна в JavaScript, отображаемом в разделе содержимого.Вы можете создать стиль с помощью whitespace: 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); 
     } 
    } 
});