Question

我正在调用JSON文件（sections.json），然后访问数组sections，循环遍历每个项目并将name值附加到li。我希望为此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

我不知道我是否以正确的方式理解了这个问题，但我假设您在开头加载了部分列表，然后只想在请求时加载文章。

因此，我首先将section id存储在section list中，以便稍后重用它。

$.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来电是按您需要的方式设置的。只需专注于存储section id并以正确的方式绑定click函数。

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

1 个答案: