如何将这些数据合并到一个对象中？

Question

This one is a tricky one.

So, lets say I have two JS objects that are fetched via REST call, via two callbacks.

So, we have:

call1() - POST method - parsed JSON to JS object, route: {{url}}/data

call1.json:

 "data": [
            { 
                "id": "1",
                "volume:" "2000"
            }, 
            { 
                "id": "2",
                "volume:" "3000"
            }, 
            { 
                "id": "3",
                "volume:" "4000"
            }, 
            { 
                "id": "4",
                "volume:" "5000"
            }
       ];

call2(req.body.id) - GET method - parsed JSON to JS object, route: {{url}}/data/:id

For example, if I pass req.body.id as = 1 got from the first response, it will open data for that id . So:

return call2(2) will return the data from this JSON: call2.json:

"data": [
            { 
                "id": "1",
                "add_data": "important string",
                "add_data_2": "important string two"
            }, 
       ];

The bottom line is, when doing the {{url}}/data route call - call() I need to serve all the data from {{url}}/data/:id routes, and bind them to the correct id . So, for example, the scenario I am trying to achieve is this:

Inside call() : get call1.json: data, do as many call2(req.body.id) calls as there are ids in the first object and then combine add_data and add_data_two values in the first object. So for example the final object would look like this.

console.log(response)

"data": [
                { 
                    "id": "1",
                    "volume:" "2000",
                    "add_data": "important string",
                    "add_data_2": "important string two"
                }, 
                { 
                    "id": "2",
                    "volume:" "3000",
                    "add_data": "important string",
                    "add_data_2": "important string two"
                }, 
                { 
                    "id": "3",
                    "volume:" "4000",
                    "add_data": "important string",
                    "add_data_2": "important string two"
                }, 
                { 
                    "id": "4",
                    "volume:" "5000",
                    "add_data": "important string",
                    "add_data_2": "important string two"
                }
           ];

This is what I have tried so far:

async get_data(req) {
        try {
            const objFirst = await call1(); //gets data
            let objTwo = '';

            for (let i = 0; i < objFirst.data.length; i++) {
                objTwo = await call2({id: objFirst.data[i].id}) //gets data
            }
            return objFirst;
        } catch(err) {
            console.log("Error: ", err)
        }
    }

But it does not work. How can I get all data, and make as many as call2(id) as there are ids and combine that all in one object? Basically, I need to repeat this callback -> call2(id) as many ids we receive in call1() .

Thanks, sorry if it looks like a mess.

Answer 1

You can use the map function and spread operator for this. Something like below. Call2 function just simulates what an endpoint would return, but you get the idea.

var data = [
    {
        id: 1,
        add_data: "1111"
    },
    {
        id: 2,
        add_data: "2222"
    }
];

var data2 = [
    {
        id: 1,
        volume: "bla"
    },
    {
        id: 2,
        volume: "bla"
    }
];

function call2(id) {
    return data2.filter(x => x.id == id)[0];
}

var result = data.map(x => {
    var response = call2(x.id);
    return {
        ...x,
        ...response       
    }
})

console.dir(result[0]);

The speed of your solution (loop through an array and doing http calls to get more data is really slow). If you have a lot of these functions that needs to combine data from different datasources, and depending on your project size, i would look into either RXJS or GraphQL (If you really need performance). RXJS have great functions to merge, combine, map etc data.

RXJS

GraphQL