Как динамически раскрывать данные JSON по клику из API?

Question

У меня есть данные из API Tumblr, которые я успешно проанализировал, пока я не ввел tags в описании тела. (Это включает в себя изображения, гиперссылки и т. Д.)

Что я по сути делаю, так это создаю список заголовков блогов. Описание блога динамически раскрывается в зависимости от того, по какому заголовку нажимают. Я чувствую, что этот код ломается из-за проблемы с цитатами, но я не уверен, как обойти это.

ЗДЕСЬ КОДЕПЕН демонстрирует проблему с полным кодом.

Это просто частичный взгляд на ошибку:

      //...
      $.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)
    }
}

Опять же, я бы порекомендовал взглянуть на CODEPEN , чтобы лучше понять. Я включил тег a в первое сообщение блога, чтобы показать проблему. Здесь является оригинальным сообщением в блоге.

Вот одно решение, о котором я подумал:

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

Но все еще не уверен, как решить проблему.

Мне нужно получить информацию из переменных title и description, и эти данные будут отображаться при щелчке в зависимости от того, какой заголовок нажимает пользователь. Это было одно решение, хотя, возможно, и не самое лучшее. Если есть другие решения, кроме тегов data, это будет оценено. Заранее спасибо.

Answer 1

Вместо сохранения данных в атрибуте «data-» HTMLDivElement, просто сохраните ссылку на ответ JSON от API в вашем javascript и сохраните index или id в атрибуте «data-» (возможно, «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()
      });
    }