How to alter a API response with Javascript

Related searches

I wrote this little app that takes in a set of starwars characters and returns images in an array.

const app = require('express')(); 
const fetch = require('node-fetch');
const imageSearch = require('image-search-google');
const bodyParser = require('body-parser')

var urlencodedParser = bodyParser.urlencoded({ extended: true })
app.use(bodyParser.json())


const options = {page:1};


const getImages = (keywords) =>
 Promise.all(keywords.map(keyword => client.search(`${keyword} Wookieepedia`, options)))
 .then(data => firstResult = data.map(result => result[0].url)); 


 const fun = async () => {
     const res = await getImages(['yoda' , 'luke skywalker' , 'darth vader']);
     console.log(res);
 }

 fun()

The result of the above code looks like this :

[ 'https://vignette.wikia.nocookie.net/starwars/images/d/d6/Yoda_SWSB.png/revision/latest?cb=20150206140125',
  'https://vignette.wikia.nocookie.net/starwars/images/d/d9/Luke-rotjpromo.jpg/revision/latest?cb=20091030151422',
  'https://vignette.wikia.nocookie.net/starwars/images/a/a3/ANOVOS_Darth_Vader_1.png/revision/latest?cb=20150128225029' ]

But i would like a result where i can know which image belongs to which keyword. Maybe a format like this or something similar :

[{<keyword> : <url>}]

I tried this :

const getImages = (keywords) =>
 Promise.all(keywords.map(keyword => {return { [keyword] : [client.search(`${keyword} Wookieepedia`, options)]}    } ))
 .then(data => firstResult = data.map(result => result)); 


 const fun = async () => {
     const res = await getImages(['yoda' , 'luke skywalker' , 'darth vader']);
     console.log(res);
 }

 fun()

Results were close but not good :

[ { yoda: [ [Promise] ] },
  { 'luke skywalker': [ [Promise] ] },
  { 'darth vader': [ [Promise] ] } ]

client.search returns a Promise. It can be awaited inside the mapping function if you make the mapping function async.

const getImages = (keywords) =>
    Promise.all(keywords.map(async keyword => {
        return {[keyword]: await client.search(`${keyword} Wookieepedia`, options)}
    }));

Modify Response Body, This script shows how to modify a response body. JavaScript. addEventListener(" fetch", event => { event.respondWith(fetchAndModify(event.request)); }); async� Search less. Build more. Use Stack Overflow for Teams at work to share knowledge with your colleagues. Free 30 day trial. Start your trial.


const getImages = (keywords) =>
 Promise.all(keywords.map(keyword => client.search(`${keyword} Wookieepedia`, options).then(result => [keyword, result])))
 .then(entries => Object.fromEntries(entries))
 .then(data => firstResult = data.map(result => result)); 

 const fun = async () => {
     const res = await getImages(['yoda' , 'luke skywalker' , 'darth vader']);
     console.log(res);
 }

 fun()

Response, It returns a promise that resolves with the result of parsing the body text as JSON , which is a JavaScript value of datatype object, string, etc. How create and display HTML elements with JavaScript. It will look like this: Let's get started. Quick overview. API stands for Application Program Interface, which can be defined as a set of methods of communication between various software components. In other words, an API allows software to communicate with another software.


Without using async you could add a then clause to the search promise that combines the keyword value with the result array - or with the first result as shown:

const getImages = keywords => Promise.all(
     keywords.map( keyword =>
         client.search(`${keyword} Wookieepedia`, options)
        .then( result => ( {[keyword]: result[0]} ))
     )
)

Response(), The Response() constructor creates a new Response object. JavaScript � Graphics � HTTP � APIs / DOM � Browser Extensions var myResponse = new Response( body , init ); Expect behavior to change in the future. The Fetch API's fetch function initiates each HTTP request. The fetch function returns a Promise object, which contains an HTTP response represented as a Response object. A common pattern is to extract the JSON response body by invoking the json function on the Response object. JavaScript updates the page with the details from the web API's


How To Use an API with JavaScript (Beginner's Guide) [JavaScript , Lots of JavaScript frameworks using MVC or MDV need to respond to changes to the objects that model the state inside a web application. This capability is a� JSON is a format that returns data from server to browser. When you make API calls, JSON answers with data. If you want to learn more, read all about JSON (JavaScript Object Notation) here. How to Retrieve the Data with an HTTP Request. To open a connection to the API, you will use XMLHttpRequest objects, useful to make verb HTTP requests.


Respond to change with Object.observe | Web, I want to display the response that the link gives me not an xml file that i have with me. I tried what you said already it works only if have the xml file with me. I have to send a request to the above mentioned api and get the result from it; not just open an xml file. @Akki619 – Kira Aug 7 '13 at 6:05


This post is a response to a frequent question from students of our REST API development course. There we teach how to create REST APIs using Python, but we don't teach how to consume them. Usually you'll be creating a REST API to standardise and share access to resources, such as a database.