How can I concatenate two JSON files to produce a single JSON result?

Question

I am getting two results, one which is in form of json and the other just as text from different sources. I need to append the results together, I have tried some methods but seems I am not getting it right.

Here is my first code and the json result attached below

const posts = fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(json => console.log(json.slice(0, 2)))

Here is the json result

[
  {
    userId: 1,
    id: 1,
    title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
    body: 'quia et suscipit\n' +
      'suscipit recusandae consequuntur expedita et cum\n' +
      'reprehenderit molestiae ut ut quas totam\n' +
      'nostrum rerum est autem sunt rem eveniet architecto'
  },
  {
    userId: 1,
    id: 2,
    title: 'qui est esse',
    body: 'est rerum tempore vitae\n' +
      'sequi sint nihil reprehenderit dolor beatae ea dolores neque\n' +
      'fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\n' +
      'qui aperiam non debitis possimus qui neque nisi nulla'
  }
]

Here is the second code and the json result attached below

function generateNames(){
  for (let i = 0; i < 2; i++) {
    const playersName = fetch('https://www.balldontlie.io/api/v1/players?per_page=5')
      .then(response => response.json())
      .then(json => console.log(json['data'][i]['first_name']))
  }
} 
generateNames()

Here is the result

Ike
Ron

What I am trying to achieve is something of this format

[
  {
    first_name: 'Ike',
    userId: 1,
    id: 1,
    title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
    body: 'quia et suscipit\n' +
      'suscipit recusandae consequuntur expedita et cum\n' +
      'reprehenderit molestiae ut ut quas totam\n' +
      'nostrum rerum est autem sunt rem eveniet architecto'
  },
  {
    first_name: 'Ron',
    id: 2,
    title: 'qui est esse',
    body: 'est rerum tempore vitae\n' +
      'sequi sint nihil reprehenderit dolor beatae ea dolores neque\n' +
      'fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\n' +
      'qui aperiam non debitis possimus qui neque nisi nulla'
  }
]

I tried that using .map() function but I was getting an empty string. — oyerohabib, Feb 09 '22 at 16:05
Thank you. I figured it out already. you can check the answer section as well. — oyerohabib, Feb 09 '22 at 16:36

score 1 · Accepted Answer · answered Feb 09 '22 at 16:27

You will need to ensure that the data are combined once both sets of data have been fetched. Drawing on this answer you can do that like this:

const fetchJson = url => fetch(url).then(r => r.json());
const [allPosts, allNames] = await Promise.all([fetchJson("https://jsonplaceholder.typicode.com/posts"), fetchJson("https://www.balldontlie.io/api/v1/players?per_page=5")]);
const combined = allPosts.slice(0, 2).map((post, index) => ({firstName: allNames.data[index].first_name, ...post}))

Serge · Answer 2 · 2022-02-11T11:24:30.987

1

try this

function AddNames(json1) {
  var json2 = ["Ike", "Ron"];
  var i = 0;
  json1.forEach((element) => {
    element.first_name = json2[i];
    if ((i == 1)) return;
    i++;
  });
}

var posts = fetch("https://jsonplaceholder.typicode.com/posts")
  .then((response) => {
    return response.json();
  })
  .then((json) => {
    AddNames(json.slice(0, 2));
  });

or you can use this syntax

async function getPosts(num) {
  let posts = await fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(json => {
    return json.slice(0,num);
   })
  return posts;
}

async function AddNames() {
  var json1= await getPosts(2);
  var json2 = ["Ike", "Ron"];
  var i = 0;
   json1.forEach((element) => {
     element.first_name = json2[i];
     if ((i == 1)) return;
     i++;
   });
   console.log(json1);
}

AddNames();

edited Feb 11 '22 at 11:24

answered Feb 09 '22 at 16:38

Serge

40,935
4
18
45

I get the error TypeError: json1.forEach is not a function – oyerohabib Feb 09 '22 at 17:32
const json1 = fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json().slice(0, 2)) – oyerohabib Feb 09 '22 at 17:33
@oyerohabib json1 is the first json you posted, I don't know how you obtained it. – Serge Feb 09 '22 at 17:34
got it. Thank you. – oyerohabib Feb 09 '22 at 21:11
Kindly help me check the continuity of the question here, https://stackoverflow.com/questions/71057067/running-map-function-on-a-result-directly-from-an-api-gives-error – oyerohabib Feb 09 '22 at 21:39
@oyerohabib I checked. What is the problem? Code in my answer is working properly – Serge Feb 09 '22 at 21:54
yes it works when I use the json directly in the code but when I use the function getPosts().forEach(...), I get error, "TypeError: getPosts(...).forEach is not a function" – oyerohabib Feb 09 '22 at 21:57
@oyerohabib I don't use any functions in my answer. It must be your code. – Serge Feb 09 '22 at 22:18
yes, the json result was a result from calling a function. instead of using the json data directly and mapping through which works pretty well, I tried using the function but that didn't work due to it returning a promise. – oyerohabib Feb 09 '22 at 22:23
You could check the link to the question to understand what I meant better. – oyerohabib Feb 09 '22 at 22:24
@oyerohabib I updated my answer. Pls check, I hope it will help you. – Serge Feb 09 '22 at 23:26
could you please explain the use of this line of code, if ((i = 1)) return; – oyerohabib Feb 11 '22 at 04:06
@oyerohabib It means that we have only 2 names (0,1). – Serge Feb 11 '22 at 11:25

How can I concatenate two JSON files to produce a single JSON result?

2 Answers2

Linked