CODEWITHSUNDEEP
javascriptjson
joe
joe

Reputation: 219

retrieving gifs from tenor API json

i'm implementing this tenor API into my Site....the thing is that with this function I retrieve a single value single gif...How do I foreach() all of them?

How would need to be the html structure and the javascript loop

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;

   }

I would have this top_10_gifs variable loaded of content...how do I foreach it?

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>

Upvotes: 1

Views: 1747

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 371059

Depends on what exactly you're trying to do (which you haven't explained), but something like

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;
});

to iterate over all of them.

Upvotes: 1

Related Questions