javascript - 如何链接 JSON 生成的列表以显示不同 JSON 文件的内容

Question

我正在调用一个 JSON 文件 (sections.json)，然后访问数组 sections，循环遍历每个项目并将 name 值附加到 李。我希望给这个li一个链接(或点击事件)来显示.sectionArticles上相应部分的文章名称。要访问特定部分的文章，我必须访问不同的 JSON 文件 (sections/{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')，您已经进入了正确的方向，但由于这些部分是在事件绑定(bind)发生后生成的，因此您需要事件委托(delegate)来对您的点击使用react。您可以在这里阅读更多相关内容:https://learn.jquery.com/events/event-delegation/

此外，我添加了empty()调用来清除文章列表。如果有以前的结果，您可以将该行移动到 ajax success 函数中。如果您想在没有返回有效响应的情况下保留旧列表，那么就可用性而言，我不会。保留它并不向用户表明正在发生某些事情。他们可能会等一会儿，然后一次又一次地点击，等等。更好地修改错误函数以显示列表中的内容而不是 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 并以正确的方式绑定(bind)点击函数即可。