How To Combine Two Data Into One In Javascript?

I'm getting the data from two different place. After getting the data, how to merge two into one. For example; //data structure looks like: //from url1 { 'data': [

Solution 1:

try this

const url1 = "https://reqres.in/api/users"; 
     const url2 = "https://reqres.in/api/users?page=2";

    //store the data from url1asyncfunctiongetData(){

        
    let response1 = awaitfetch(url1);
    let response2 = awaitfetch(url2);

    
    if (response1.status === 200 && response2.status === 200) {
        const data1 = await response1.json();
        const data2 = await response2.json();
        // handle dataconst data = [...data1.data, ...data2.data];  // it only get the data from data1, the data2 is missingconsole.log(data); 
    }




    }

    getData();

Solution 2:

My approach would be:

1. Put the urls in an array.

2. Use async/await to make the process easier.

3. map over the array to create a new array of promises.

4. await until all the promises have been resolved.

5. Parse the JSON to JS objects.

6. Return an object that combines all the data properties of the objects within one data property with flatMap.

const urls = ['https://reqres.in/api/users','https://reqres.in/api/users?page=2'];

// Pass in the array to the functionasyncfunctiongetData(urls) {

  try {

    // `map` over the array to create an array of promisesconst promises = urls.map(url =>fetch(url));

    // Wait for the responses to returnconst responses = awaitPromise.all(promises);

    // Use `map` again to parse the JSON// `.json()` returns a new promise so we have to//  use `Promise.all` again to wait for them all to resolveconst data = awaitPromise.all(responses.map(res => res.json()));

    // Finally return an object that combines the data// within one data propertyreturn { data: data.flatMap(obj => obj.data) };
  
  } catch(err) {
    return err;
  }

}

(async () => {
  console.log(awaitgetData(urls));
})();

Solution 3:

You are trying to merge promises resolving to arrays. You have to await the promise and can use the spread operator to merge the elements. You have to use the json method to read and parse the response. It also returns a promise. I wrapped the awaits in an async IIFE because you can't use await in a non-async functions or in global scope.

const url1 = "https://reqres.in/api/users"; 
const url2 = "https://reqres.in/api/users?page=2";

// store promise to data from url1const data1 = fetch(url1)
              .then(result => result.json())
              .then(result => result.data);

// store promise to data from url2const data2 = fetch(url2)
              .then(result => result.json())
              .then(result => result.data);

(async () => {
  const data = [...await data1, ...await data2];
  console.log(data); 
})();

Solution 4:

To combine all the elements of 2 arrays together, you can use the spread operator like

const data = [...data1.data, ...data2.data];

or you can use the concat function:

const data = data1.data.concat(data2.data);

Solution 5:

The way you fetch data is not complete.

This code below will give you a Response object that contain some infomation about response you got.

fetch('https://reqres.in/api/users').then(response =>console.log(response))

But to retrieve data correctly, You should do like this:

fetch('https://reqres.in/api/users').then(response => response.json()).then(data =>console.log(data))