Concat json to promise: How to get additional key value pair in json object from promise pending

Question

I manually concat a json object to a promise. The code below on the first print, cosole.log(new_response) gets me this, which is what I want

Promise { <pending>, a: '123' }

However the second print, cosole.log(data_json_array) gets me the json object without the key-value, a: '123'

I don't know why is that. I would like the json object to include the key-value a: '123' For example:

{ 
  key1: "1",
  key2: "2",
  a: "123
}

Thanks in advance.

Promise.all(somefunction(parameter)).then(function (responses) {

        return Promise.all(responses.map(function (response) {

            new_json = {a: "123"}
            var new_response = Object.assign(response.json(), new_json)
            console.log(new_response)
            return new_response

      }.then(function (data) {

        console.log(data)

    })

Does someFunction return a single promise or an array of promises? Promise.all is usually for an array of promises. — Alexander Staroselsky, Jul 16 '21 at 22:37
@AlexanderStaroselsky it depends on how many url I call. If two url, then it returns Promise { , a: '123' } Promise { , a: '123' } — Sun Tianyi, Jul 16 '21 at 22:48
In addtion, the a: "123" is just for demo purpose, in reality, the key-value changes for different url I call. For example, the json object I want to add can be {url: "the-actual-url"} — Sun Tianyi, Jul 16 '21 at 22:50
@Andy Is that possible to concat the new_json to the new_response so that the they are one json object in .then()? — Sun Tianyi, Jul 16 '21 at 22:51

Alexander Staroselsky · Accepted Answer · 2021-07-17T00:10:09.497

1

A slightly different approach could involve updating someFunction to handle the json() and handle merging the data with the provided url. This can help avoid nested Promise.all:

function someFunction(parameter) {
  // create array of promises
  return parameter.urls.map((url) =>
    fetch(url)
      // parse JSON
      .then((res) => res.json())
      // Merge data with url property
      .then((data) => ({ ...data, url }))
  );
}

Promise.all(
  someFunction({
    urls: [
      "https://jsonplaceholder.typicode.com/todos/1",
      "https://jsonplaceholder.typicode.com/todos/2",
    ],
  })
).then((data) => console.log(data));

Hopefully that helps!

edited Jul 17 '21 at 00:10

answered Jul 16 '21 at 23:59

Alexander Staroselsky

37,209
15
79
91

Thank you! I will see how I can integrate into my code, will let you know the result. Much appreciated. – Sun Tianyi Jul 17 '21 at 00:18
Great. The point is that you can do more in the someFunction as it creates the promises and has the parameters. You could always do additional object assign in the consumer to merge additional data but this way it you don’t have to deal with json() at the consumer level. – Alexander Staroselsky Jul 17 '21 at 00:21
Coming back here to say thanks! I've successfully integrated into my code! @Alexander Staroselsky – Sun Tianyi Jul 19 '21 at 00:41

Concat json to promise: How to get additional key value pair in json object from promise pending

1 Answers1