如何 link 一个 JSON 生成的列表来显示不同 JSON 文件的内容

Question

我正在调用 JSON 文件 (sections.json)，然后访问数组 sections，遍历每个项目并将 name 值附加到li。我想给这个 li 一个 link （或点击事件）来显示 .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')，您已经进入了正确的方向，但由于这些部分是在事件绑定发生后生成的，因此您需要事件委托来对您的点击做出反应。您可以在这里阅读更多相关信息：https://learn.jquery.com/events/event-delegation/

此外，我添加了 empty() 调用来清除文章列表。如果有以前的结果，您可以将该行移到 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 并以正确的方式绑定点击功能。

如何 link 一个 JSON 生成的列表来显示不同 JSON 文件的内容

How to link a JSON generated list to display the content of a different JSON file

javascript

jquery

json

zendesk-api