цикл через JSON для вложенного ключа - PullRequest
0 голосов
/ 03 декабря 2018

Что я пытаюсь сделать: получить jpg / gifv / video из топ-постов reddit aww и jquery, добавляемых в html.

Моя проблема: Когда я просмотрел несколько разных постов, я понял, насколько сложны данные.нет ни одного конкретного ключа, который представляет данные.

  • для jpg это просто: это data.children.url
  • однако для gifv / video они есть везде. но одним общим ключом является "fallback_url" .но, как я уже сказал, они повсюду.

что я имею в виду под этим:

"media": {
              "reddit_video": {
                "fallback_url": "https://v.redd.it/8uxup7znzq121/DASH_1_2_M",



"reddit_video_preview": {
                "fallback_url": "https://v.redd.it/xstmcxt8hs121/DASH_1_2_M",


"secure_media": {
              "reddit_video": {
                "fallback_url": "https://v.redd.it/syxgtvfsrs121/DASH_9_6_M",

Примеры:

Мой вопрос: есть ли способцикл по всему дереву данных и найти конкретный ключ "fallback_url"?Они имеют разную глубину: /

Как я собираюсь использовать данные:

, если это видео:

<video autoplay loop>
  <source src="https://v.redd.it/dkalanbuyo121/DASH_4_8_M"/>
</video>

, еслиЭто картинка или GIF:

<img src="https://i.redd.it/ke4r7k9n7v121.jpg">

Вот моя рабочая попытка получить JPG / GIF:

$('#art').ready(function() {
$.getJSON("https://www.reddit.com/r/aww/hot.json?limit=1", function foo(result) {
  var posts = [];

  $.each(result.data.children.slice(0, 1), function(i, post) {

      posts.push(post.data);

  });


  for (var i = 0; i < posts.length; i++) {
    $("#text").append('<h4>' + posts[i].title + '</h4>');
    $("#art").append('<img id=\"img" src=\"' + posts[i].url +'\"">');
  }
});
});

--html--
<body>
  <div class="container">
    <div id="art" class="img column1">
    </div>
    <div id="text" class="comment column2">
    </div>
  </div>
 </body>
...