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;
}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"]
}
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.
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);
})();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;
}