如何在javascript中组合不同的JSON文件 [英] How to combine different JSON files in javascript

问题描述

我正在使用Pexels，Flickr，Data和Unsplash API构建图像搜索应用程序，我想显示所有搜索的结果。但是，每个API的每个搜索结果都会返回具有不同键的不同JSON文件。如何将它们组合/格式化为单个JSON文件，以便在我的页面上显示所有搜索结果？



我尝试过：



Unsplash.js代码例如：



函数搜索（searchTerm）{

const url =`$ {API_URL}& query = $ {searchTerm}`;

loadingImage.style.display ='';

imageSection。 innerHTML ='';

返回获取（网址）

。然后（response => response.json（））

.then（ result => {

返回result.results;

}）;

}



函数displayImages（images）{

images.forEach（image => {

const imageElement = document.createElement（'img'）;

imageElement.src = image.urls.regular;

imageSection.appendChild（imageElement）;

}）;

loadingImage .style.display ='none';

}





Flickr.js例如：



函数搜索（searchTerm）{

const url =`$ {API_URL}& tags = $ {searchTerm}& per_page = 500& license = 7,8,9& format = json& nojsoncallback = 1`;

loadingImage.style.display ='';

imageSection.innerHTML ='';

返回获取（网址）

。然后（响应=> response.json（））

。然后（结果=> {

return（result.photos.photo）;

}）;

}



功能displayImages（图像）{

images.forEach（photo => {

const imageElement = document.createElement（'img'）;

imageElement.src =http：// farm+ photo.farm +。static.flickr.com / + photo.server +/+ photo.id +_+ photo.secret +_+z.jpg;

imageSection.appendChild（imageElement）;

}）;

loadingImage.style.display ='none';

}

解决方案

< blockquote> {API_URL}& query =

{searchTerm}`;

loadingImage.style.display ='';

imageSection.innerHTML ='';

返回获取（网址）

。然后（response => response.json（））

。然后（结果=> {

返回result.results;

}）;

}


功能displayImages（images）{

images.forEach（image => {

const imageElement = document.createElement（'img'）;

imageElement.src = image.urls.regular;

imageSection.appendChild （imageElement）;

}）;

loadingImage.style.display ='none';

}





Flickr.js例如：



功能搜索（searchTerm）{

const url =`

{API_URL}& tags =

I'm building an image search app using Pexels, Flickr, Pixabay and Unsplash API's and I want to display the results of all searches. However each search result from each API returns different JSON files with different keys. How do I combine/format them in to a single JSON file in order to display all the search results on my page?

What I have tried:

Unsplash.js code eg:

function search(searchTerm) {
const url = `${API_URL}&query=${searchTerm}`;
loadingImage.style.display = '';
imageSection.innerHTML = '';
return fetch(url)
.then(response => response.json())
.then(result => {
return result.results;
});
}

function displayImages(images) {
images.forEach(image => {
const imageElement = document.createElement('img');
imageElement.src = image.urls.regular;
imageSection.appendChild(imageElement);
});
loadingImage.style.display = 'none';
}


Flickr.js eg:

function search(searchTerm) {
const url = `${API_URL}&tags=${searchTerm}&per_page=500&license=7,8,9&format=json&nojsoncallback=1`;
loadingImage.style.display = '';
imageSection.innerHTML = '';
return fetch(url)
.then(response => response.json())
.then(result => {
return (result.photos.photo);
});
}

function displayImages(images) {
images.forEach(photo => {
const imageElement = document.createElement('img');
imageElement.src = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_" + "z.jpg";
imageSection.appendChild(imageElement);
});
loadingImage.style.display = 'none';
}

解决方案

{API_URL}&query=

{searchTerm}`;
loadingImage.style.display = '';
imageSection.innerHTML = '';
return fetch(url)
.then(response => response.json())
.then(result => {
return result.results;
});
}

function displayImages(images) {
images.forEach(image => {
const imageElement = document.createElement('img');
imageElement.src = image.urls.regular;
imageSection.appendChild(imageElement);
});
loadingImage.style.display = 'none';
}


Flickr.js eg:

function search(searchTerm) {
const url = `

{API_URL}&tags=

这篇关于如何在javascript中组合不同的JSON文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！