如何鏈接JSON生成列表以顯示不同JSON文件的內容

Question

我打電話給一個JSON文件（sections.json），然後訪問數組sections，遍歷每個項目並將name值附加到li。我想給這個li一個鏈接（或點擊事件）來顯示.sectionArticles上相應部分的文章名稱。要訪問特定部分的文章，我必須訪問不同的JSON文件（部分/ {section id} /articles.json）。我對這最後一部分毫無頭緒......有人能指出我正確的方向嗎？

這裏是我當前的代碼至今：

$(function() { 

    // URLs 
    var zendeskUrl = 'https://myhelpcenter.zendesk.com/' 
    var sectionsUrl = zendeskUrl+'api/v2/help_center/pt-br/sections.json'; 
    var articlesUrl = zendeskUrl+'api/v2/help_center/pt-br/articles.json?per_page=100'; 

    $.ajax({ 
    type: 'GET', 
    url: sectionsUrl, 
    success: function(data) { 
     data.sections.forEach(function(section) { 
     $('.sectionsList').append('<li class="sectionName">' + section.name + '</li>'); 
     }) 
    }, 
    error: function() { 
     console.log("Error: sectionsUrl"); 
    } 
    }) 

    $.ajax({ 
    type: 'GET', 
    url: articlesUrl, 
    success: function(data) { 
     data.articles.forEach(function(article) { 
     if (article.promoted == true) { 
      $('.promotedList').append('<li class="promotedName">' + article.name + '</li>'); 
     } 
     }) 
    }, 
    error: function() { 
     console.log("Error: articlesUrl"); 
    } 
    }) 

}) 

JSOM樣品：

List ALL Sections: /api/v2/help_center/sections.json 

{ 
    "sections": [ 
    { 
     "id": 115001417087, 
     "url": "/api/v2/help_center/sections/115001417087.json", 
     "html_url": "/hc/sections/115001417087", 
     "category_id": 115000835587, 
     "position": 0, 
     "sorting": "manual", 
     "created_at": "2017-03-22T14:29:48Z", 
     "updated_at": "2017-06-13T20:01:01Z", 
     "name": "Section 1", 
     "description": "", 
     "locale": "", 
     "source_locale": "", 
     "outdated": false 
    } 
    ], 
    "page": 1, 
    "previous_page": null, 
    "next_page": null, 
    "per_page": 30, 
    "page_count": 1, 
    "count": 8, 
    "sort_by": "position", 
    "sort_order": "asc" 
} 

List ALL Articles from Section {id}: /api/v2/help_center/sections/{id}/articles.json */ 

{ 
    "count": 9, 
    "next_page": null, 
    "page": 1, 
    "page_count": 1, 
    "per_page": 30, 
    "previous_page": null, 
    "articles": [ 
    { 
     "id": 115008623727, 
     "url": "/api/v2/help_center/articles/115008623727.json", 
     "html_url": "/hc/articles/115008623727", 
     "author_id": 20423232608, 
     "comments_disabled": true, 
     "draft": false, 
     "promoted": false, 
     "position": 0, 
     "vote_sum": 0, 
     "vote_count": 0, 
     "section_id": 115001417087, 
     "created_at": "2017-06-13T19:46:17Z", 
     "updated_at": "2017-06-13T19:59:28Z", 
     "name": "Some name", 
     "title": "Some title", 
     "body": "Some HTML", 
     "source_locale": "", 
     "locale": "", 
     "outdated": false, 
     "outdated_locales": [], 
     "label_names": [] 
    } 
    ], 
    "sort_by": "position", 
    "sort_order": "asc" 
} 

Answer 1

我不知道我的理解這個問題的正確方法，但我相信你加載部分在開始列表中，然後希望僅在請求時加載文章。

因此，我首先將節ID存儲在節列表中，以便稍後重用。

$.ajax({ 
    type: 'GET', 
    url: sectionsUrl, 
    success: function(data) { 
     data.sections.forEach(function(section) { 
     $('.sectionsList').append('<li class="sectionName" data-section-id="' + section.id + '">' + section.name + '</li>'); 
     }) 
    }, 
    error: function() { 
     console.log("Error: sectionsUrl"); 
    } 
    }) 

隨着.on('click')，你已經進入了正確的方向，但由於該段事件後綁定發生產生的，你需要的事件代表團在你的點擊反應。 你可以在這裏閱讀更多：https://learn.jquery.com/events/event-delegation/

此外，我添加了空（）調用來清除文章列表。如果有以前的結果，您可以將該行移入ajax成功函數。如果你想保留舊列表，只要沒有返回有效的響應，就可用性而言，我不會。保持它不會向用戶顯示發生了某些事情。他們可能會稍等片刻，然後再次點擊，等等。更好地修改錯誤函數以在列表中顯示某些內容，而不是console.log。

$(".sectionsList").on("click", ".sectionName", function(){ 
    clickedSectionId = $(this).data("sectionId"); 
    $('.promotedList').empty(); //clear list of previous results 

    articlesUrl = zendeskUrl + 'api/v2/help_center/' + clickedSectionId + '/articles.json?per_page=100'; 

    $.ajax({ 
    type: 'GET', 
    url: articlesUrl, 
    success: function(data) { 
     data.articles.forEach(function(article) { 
     if (article.promoted == true) { 
      $('.promotedList').append('<li class="promotedName">' + article.name + '</li>'); 
     } 
     }) 
    }, 
    error: function() { 
     console.log("Error: articlesUrl"); 
    } 
    }); 
}); 

我假設你ajax呼叫建立的，你需要他們的方式。只需着重於存儲節ID和綁定點擊功能的正確方法。