如何在点击 API 时动态显示 JSON 数据? [英] How to dynamically reveal JSON data on click from an API?

问题描述

我已经成功解析了来自 Tumblr API 的数据，直到我在正文描述中引入了 tags.(这包括图片、超链接等)

我主要做的是创建一个博客标题列表.博客描述会根据点击的标题动态显示.我觉得这段代码由于引用问题而中断，但我不确定如何解决这个问题.

HERE IS A CODEPEN 使用完整代码演示该问题.

这只是对错误的部分查看:

//...$.each(inner, function(i, obj) {标题 = 内部[i].标题描述 = 内部 [i].描述//错误来源//数据描述包括一个<a>破坏代码的标签$('
' + title +'</div>').appendTo(monthblogList)})})});功能 showBlogEntry(元素){var t = $(element).data('title')var ds = $(element).data('description')blogEntry.empty()$(t).appendTo(blogEntry)$(ds).appendTo(blogEntry)}}

同样，我建议查看 CODEPEN 以获得更好的理解.我在第一篇博文中包含了一个 a 标签，以显示问题.这里是博文的原创.

这是我想到的一种解决方案:

if ($(description).has("a")) {//做点什么}

但仍然不确定如何解决此问题.

我需要从 title 和 description 变量中获取信息，并根据用户点击的标题在点击时显示数据.这是一种解决方案，尽管它可能不是最好的.如果除了 data 标签之外还有其他解决方案，那将不胜感激.提前致谢.

解决方案

不要将数据存储在 HTMLDivElement 的data-"属性中，只需在您的 javascript 中保留对来自 API 的 JSON 响应的引用并存储一个 index或id

var blogData = [{Title: .., Description: ...}, ...];//来自JSON响应的数据......$('<div class = "title-list" data-post-id =' + postId +'>' + title + '</div>').appendTo(monthblogList);......功能 showBlogEntry(元素){var id = $(element).data('post-id')var close = $(' x ')blogEntry.empty()$(close).appendTo(blogEntry)$('<h3>' + blogData[id].Title + '</h3>').appendTo(blogEntry)$(blogData[id].Description).appendTo(blogEntry)$("#close").on("click", function (event) {blogEntry.empty()关于.fadeIn()});}

I have data from a Tumblr API that I've successfully parsed, until I introduced tags within the body description. (This includes images, hyperlinks, etc)

What I'm essentially doing is creating a list of blog titles. A blog description is dynamically revealed depending on which title is clicked. I feel that this code breaks because of an issue with quotations, but I'm not sure how to work around this.

HERE IS A CODEPEN demonstrating the issue with full code.

This is just a partial look at the error:

      //...
      $.each(inner, function(i, obj) {

          title = inner[i].Title
          description = inner[i].Description

     // Source of the error
     // data-description includes an <a> tag that breaks the code
          $('<div class = "title-list" data-title = "<h3>' + title + '</h3>" data-description="' + description  + '">' + title + '</div>').appendTo(monthblogList)

        })
      })
    });

    function showBlogEntry(element){
      var t = $(element).data('title')
      var ds = $(element).data('description')

      blogEntry.empty()

      $(t).appendTo(blogEntry)
      $(ds).appendTo(blogEntry)
    }
}

Again, I would recommend looking at CODEPEN to get a better understanding. I've included an a tag on the first blog post, to show the issue. Here is original the blog post.

Here is one solution I thought of:

if ($(description).has("a")) {
  // do something
}

But still unsure of how to fix the issue.

I need to grab information from the title and description variables and have it's data revealed on click depending on which title the user clicks. This was one solution, though it may not be the best. If there are other solutions aside from data tags, that would be appreciated. Thanks in advance.

解决方案

Instead of storing the data in the "data-" attribute of the HTMLDivElement, just keep a reference to JSON response from the API in your javascript and store an index or id in the "data-" attribute (possibly "data-post-id")

var blogData = [{Title: .., Description: ...}, ...]; //Data from JSON Response

...
...

$('<div class = "title-list" data-post-id =' + postId +'>' + title + '</div>').appendTo(monthblogList);

...
...    

function showBlogEntry(element){
      var id = $(element).data('post-id')
      var close = $('<span id = close> x </span>')

      blogEntry.empty()

      $(close).appendTo(blogEntry)
      $('<h3>' + blogData[id].Title + '</h3>').appendTo(blogEntry)
      $(blogData[id].Description).appendTo(blogEntry)

      $("#close").on("click", function (event) {
        blogEntry.empty()
        about.fadeIn()
      });
    }

这篇关于如何在点击 API 时动态显示 JSON 数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！