var object1 = {
  lol_gif: [22390036, 15154597, 13491369],
  silly_gif: [19048808, 19048861]
}

var ids = Object.values(object1).toString();//will return 22390036,15154597,13491369,19048808,19048861
httpGetAsync('https://g.tenor.com/v1/gifs?ids='   ids   '&key=LIVDSRZULELA&media_filter=tinygif');


function httpGetAsync(theUrl) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      var response = JSON.parse(xmlHttp.responseText);
      var gifs = response.results;
      var object2 = {};
      for (var g in gifs) {
        var id = gifs[g].id;
        object2[id] = gifs[g].media[0].tinygif.url;
      }
      console.log(object2);
      //will return an object with the ID as the keys and gif url as the values
    }
  }
  xmlHttp.open("GET", theUrl, true);
  xmlHttp.send();
  return;
}

I am trying to categorize each gif by replacing object1 values with data from tenor json but failed many times. thanks for your help!

desired output:

var object1 = {
  lol_gif: ["https://media.tenor.com/images/4ad4bc701f2744ddc5220f6d3688e899/tenor.gif",
            "https://media.tenor.com/images/c9b8564d6acbbba994b5413479d0fc2b/tenor.gif",
            "https://media.tenor.com/images/7c27bea2fb5ea0f7600af7e9ad8d0c4a/tenor.gif"],
  silly_gif: ["https://media.tenor.com/images/59669ec95913ef1df85fee2cda08aece/tenor.gif",
              "https://media.tenor.com/images/59669ec95913ef1df85fee2cda08aece/tenor.gif"]
}

CodePudding user response：

Something like this would give you an object in the same shape as your original:

var object1 = {
  lol_gif: [22390036, 15154597, 13491369],
  silly_gif: [19048808, 19048861]
}

var ids = Object.values(object1).toString();//will return 22390036,15154597,13491369,19048808,19048861
httpGetAsync('https://g.tenor.com/v1/gifs?ids='   ids   '&key=LIVDSRZULELA&media_filter=tinygif');


function httpGetAsync(theUrl) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      var response = JSON.parse(xmlHttp.responseText);
      var gifs = response.results;

      var object2 = {};

      Object.entries(object1).forEach(([key, gifIds]) => {
        const newGifList = gifIds.map((gifId) => {
          const gif = gifs.find((gifResult) => gifResult.id === gifId.toString());
          return gif.media[0].tinygif.url;
        });

        object2[key] = newGifList;
      });

      console.log(object2);
      //will return an object with the ID as the keys and gif url as the values
    }
  }
  xmlHttp.open("GET", theUrl, true);
  xmlHttp.send();
  return;
}

Side note, its generally not a great idea to include API keys in StackOverflow questions.

CodePudding user response：

I haven't really taken a deep dive into the type of responses this API provides back, but my surface-level conclusion is that if you want to maintain the exact structure and order of the data, you'll have to go with this solution:

const object = {
    lolGifs: [22390036, 15154597, 13491369],
    sillyGifs: [19048808, 19048861],
};

const getGifs = async (obj) => {
    const map = {};

    for (const [key, arr] of Object.entries(obj)) {
        map[key] = [];

        for (const id of arr) {
            const res = await fetch(`https://g.tenor.com/v1/gifs?ids=${id}&key=LIVDSRZULELA&media_filter=tinygif`);
            const { results } = await res.json();

            const gifUrl = results[0]?.media[0]?.tinygif?.url;
            map[key].push(gifUrl);
        }
    }

    return map;
};

(async () => {
    const data = await getGifs(object);
    console.log(data);
})();

CodePudding user response：

You just need to make some simple change where you search for the ids to put it to the keyname as following:

var object1 = {
  lol_gif: [22390036, 15154597, 13491369],
  silly_gif: [19048808, 19048861]
}

var ids = Object.values(object1).toString();//will return 22390036,15154597,13491369,19048808,19048861
httpGetAsync('https://g.tenor.com/v1/gifs?ids='   ids   '&key=LIVDSRZULELA&media_filter=tinygif');


function httpGetAsync(theUrl) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      var response = JSON.parse(xmlHttp.responseText);
      var gifs = response.results;
      var object2 = {"lol_gif":[],"silly_gif":[]};
      for (var g in gifs) {
        var id = gifs[g].id;
        if(object1["lol_gif"].indexOf(parseInt(id))!=-1) {
          object2["lol_gif"].push(gifs[g].media[0].tinygif.url);
        }
        else if(object1["silly_gif"].indexOf(parseInt(id))!=-1){
        object2["silly_gif"].push(gifs[g].media[0].tinygif.url);
        }
      }
      console.log(object2);
      //will return an object with the ID as the keys and gif url as the values
    }
  }
  xmlHttp.open("GET", theUrl, true);
  xmlHttp.send();
  return;
}