从男高音API json中检索GIF

时间:2018-04-01 02:20:09

标签: javascript json

我正在将此tenor API实施到我的网站....事情是,使用此功能我会检索单个值single gif ...我如何foreach()所有它们?

如何需要html结构和javascript循环

JAVASCRIPT / JSON

function grab_data(anon_id)
  {
     // set the apikey and limit
     var apikey = "*************";
     var lmt = 8;

  .....

   // callback for trending top 10 GIFs
     function tenorCallback_trending(responsetext)
    {
       // parse the json response
       var response_objects = JSON.parse(responsetext);

        top_10_gifs = response_objects["results"];

          // load the GIFs -- for our example we will load the first GIFs preview size (nanogif) and share size (tinygif)

      document.getElementById("preview_gif").src = top_10_gifs[1]["media"][0]["nanogif"]["url"];

      document.getElementById("share_gif").src = top_10_gifs[6]["media"][0]["tinygif"]["url"];

     return;

   }

我希望这个top_10_gifs变量加载内容......我该怎么做到这一点?

HTML

<h2 class="title">GIF loaded - preview image</h2>
       <div class="container">
      <img id="preview_gif" src="" alt="" style="">
       </div>

        <h2 class="title">GIF loaded - share image</h2>
           <div class="container">
                 <img id="share_gif" src="" alt="" style="">
           </div>

1 个答案:

答案 0 :(得分:1)

取决于你究竟想做什么(你没有解释过),但是

response_objects.results.forEach((gifObj, i) => {
  if (i >= 8) return;
  // do something with each gifObj
  document.querySelector('.container')
    .appendChild(document.createElement('img'))
    .src = gifObj.media[0].tinygif.url;
});

迭代所有这些。