Combining two JSON objects in JavaScript is simple when their IDs correspond to each other in both objects

Question

Combining two JSON objects in JavaScript is simple when their IDs correspond to each other in both objects

I have a query related to merging two different objects from the database, both in JSON format.

These two objects share two key/value pairs: IRBId = ... and id = ..., which can be seen in the examples below:

OBJ 1

{
   "data":{
      "IRBs":{
         "nodes":[
            {
               "id":"8",
               "name":"Admin",
            },
            {
               "id":"9",
               "name":"Again",
            }
         ]
      }
   }
}

OBJ 2

{
   "data":{
      "informedConsentForms":{
         "count":3,
         "nodes":[
            {
               "id":"93",
               ...
               "IRBId":"9",
            },
            {
               "id":"92",
               ...
               "IRBId":"8",
            },
            {
               "id":"91",
               ...
               "IRBId":"8",
            }
         ]
      }
   }

It is evident that OBJ 2 and OBJ 1 correspond with each other based on the matching IRBid and id values.

The desired outcome is to merge these two objects where IRBId OBJ 2 === id OBJ 1.

The expected result after the merge would look like this:

Merged OBJ

 {
            [{
               "id":"93",
                ...
               "IRBId":"9",
               "irb": {
                 "name":"Again",
                 ...
               }
            },
            {
               "id":"92",
               ...
               "IRBId":"8",
               "irb": {
                 "name":"Admin",
                 ...
               }
            },
            {
               "id":"91",
               ...
               "IRBId":"8",
               "irb": {
                 "name":"Admin",
                 ...
            }
         ]
   }

I am unsure how to achieve this specific formatting. Please assist.

javascript json

Answer 1

Answer №1

Consider utilizing the Array.reduce method for implementing this logic.

Iterate through the data nodes of the second object.
Identify the corresponding nodes in the data nodes of the first object.
Add the necessary details to the accumulator. (Note: Only the nodes mentioned in the expected result have been included, additional nodes can be added as needed.)

const obj1 = {
  "data": {
    "IRBs": {
      "nodes": [
        {
          "id": "8",
          "name": "Admin ",
        },
        {
          "id": "9",
          "name": "Again",
        }
      ],
    }
  }
}
const obj2 = {
  "data": {
    "informedConsentForms": {
      "count": 3,
      "nodes": [
        {
          "id": "93",
          "IRBId": "9",
        },
        {
          "id": "92",
          "IRBId": "8",
        },
        {
          "id": "91",
          "IRBId": "8",
        }
      ],
    }
  },
};

const obj1List = obj1.data.IRBs.nodes;
const output = obj2.data.informedConsentForms.nodes.reduce((acc, curr) => {
  const matchingNode = obj1List.find((item) => item.id === curr.IRBId);
  if (matchingNode) {
    acc.push({
      id: curr.id,
      IRBId: curr.IRBId,
      irb: {
        name: matchingNode.name
      }
    })
  }
  return acc;
}, []);
console.log(output);

Answer 2

Consider utilizing the Array.reduce method for implementing this logic.

Iterate through the data nodes of the second object.
Identify the corresponding nodes in the data nodes of the first object.
Add the necessary details to the accumulator. (Note: Only the nodes mentioned in the expected result have been included, additional nodes can be added as needed.)

const obj1 = {
  "data": {
    "IRBs": {
      "nodes": [
        {
          "id": "8",
          "name": "Admin ",
        },
        {
          "id": "9",
          "name": "Again",
        }
      ],
    }
  }
}
const obj2 = {
  "data": {
    "informedConsentForms": {
      "count": 3,
      "nodes": [
        {
          "id": "93",
          "IRBId": "9",
        },
        {
          "id": "92",
          "IRBId": "8",
        },
        {
          "id": "91",
          "IRBId": "8",
        }
      ],
    }
  },
};

const obj1List = obj1.data.IRBs.nodes;
const output = obj2.data.informedConsentForms.nodes.reduce((acc, curr) => {
  const matchingNode = obj1List.find((item) => item.id === curr.IRBId);
  if (matchingNode) {
    acc.push({
      id: curr.id,
      IRBId: curr.IRBId,
      irb: {
        name: matchingNode.name
      }
    })
  }
  return acc;
}, []);
console.log(output);

Answer 3

Answer №2

To create a new object that combines the attributes of two existing objects, you can utilize the map function on the nodes within the first object.

const obj1 = {
  "data": {
    "IRBs": {
      "nodes": [{
          "id": "8",
          "obj1": "one",
          "name": "Admin ",
        },
        {
          "id": "9",
          "obj1": "two",
          "name": "Again",
        }
      ]
    }
  }
};

const obj2 = {
  "data": {
    "informedConsentForms": {
      "count": 3,
      "nodes": [{
          "id": "93",
          "obj2": "1",
          "IRBId": "9",
        },
        {
          "id": "92",
          "obj2": "2",
          "IRBId": "8",
        },
        {
          "id": "91",
          "obj2": "3",
          "IRBId": "8",
        }
      ],
    }
  }
};
const obj1Data = obj1.data.IRBs.nodes;
const obj2Data = obj2.data.informedConsentForms.nodes;
const res = obj2Data.map(item => {
  const obj1Item = obj1Data.find(obj1Item => item.IRBId === obj1Item.id);
  return obj1Item ? { ...item, "irb": { ...obj1Item}} : { ...item};
});
console.log(res);

Answer 4

To create a new object that combines the attributes of two existing objects, you can utilize the map function on the nodes within the first object.

const obj1 = {
  "data": {
    "IRBs": {
      "nodes": [{
          "id": "8",
          "obj1": "one",
          "name": "Admin ",
        },
        {
          "id": "9",
          "obj1": "two",
          "name": "Again",
        }
      ]
    }
  }
};

const obj2 = {
  "data": {
    "informedConsentForms": {
      "count": 3,
      "nodes": [{
          "id": "93",
          "obj2": "1",
          "IRBId": "9",
        },
        {
          "id": "92",
          "obj2": "2",
          "IRBId": "8",
        },
        {
          "id": "91",
          "obj2": "3",
          "IRBId": "8",
        }
      ],
    }
  }
};
const obj1Data = obj1.data.IRBs.nodes;
const obj2Data = obj2.data.informedConsentForms.nodes;
const res = obj2Data.map(item => {
  const obj1Item = obj1Data.find(obj1Item => item.IRBId === obj1Item.id);
  return obj1Item ? { ...item, "irb": { ...obj1Item}} : { ...item};
});
console.log(res);

Answer 5

Answer №3

Here is an example of using nested loops:

const obj2 = {
   "data":{
      "informedConsentForms":{
         "count":3,
         "nodes":[
            {
               "id":"93",
               "IRBId":"9",
            },
            {
               "id":"92",
               "IRBId":"8",
            },
            {
               "id":"91",
               "IRBId":"8",
            }
         ],
      }
   },
}

const obj1 = {
   "data":{
      "IRBs":{
         "nodes":[
            {
               "id":"8",
               "name":"Admin ",
            },
            {
               "id":"9",
               "name":"Again",
            }
         ],
      }
   }
}

const result = [];
const obj2Nodes = obj2.data.informedConsentForms.nodes;
for(let i = 0; i <  obj2Nodes.length; i++) {
    const obj1Nodes = obj1.data.IRBs.nodes
    for(let j = 0; j < obj1Nodes.length; j++) {
        if(obj2Nodes[i].IRBId === obj1Nodes[j].id) {
            const {id, ...reObj1Nodes} = obj1Nodes[j];
            result.push({
                ...obj2Nodes[i],
                'irb': {
                    ...reObj1Nodes
                }
            })
        }
    }
}
console.log(result)

Answer 6

Here is an example of using nested loops:

const obj2 = {
   "data":{
      "informedConsentForms":{
         "count":3,
         "nodes":[
            {
               "id":"93",
               "IRBId":"9",
            },
            {
               "id":"92",
               "IRBId":"8",
            },
            {
               "id":"91",
               "IRBId":"8",
            }
         ],
      }
   },
}

const obj1 = {
   "data":{
      "IRBs":{
         "nodes":[
            {
               "id":"8",
               "name":"Admin ",
            },
            {
               "id":"9",
               "name":"Again",
            }
         ],
      }
   }
}

const result = [];
const obj2Nodes = obj2.data.informedConsentForms.nodes;
for(let i = 0; i <  obj2Nodes.length; i++) {
    const obj1Nodes = obj1.data.IRBs.nodes
    for(let j = 0; j < obj1Nodes.length; j++) {
        if(obj2Nodes[i].IRBId === obj1Nodes[j].id) {
            const {id, ...reObj1Nodes} = obj1Nodes[j];
            result.push({
                ...obj2Nodes[i],
                'irb': {
                    ...reObj1Nodes
                }
            })
        }
    }
}
console.log(result)

Combining two JSON objects in JavaScript is simple when their IDs correspond to each other in both objects

Answer №1

Answer №2

Answer №3

Similar questions

Navigating a JSON object in ReactJS: key and value retrieval

Rails converts the database variable names and values

Utilizing a functional component to incorporate a "load more" button in ReactJS

Having trouble making the menu stay at the top of the page in IE7

Error: The code is trying to access the property 'string' of an undefined variable. To fix this issue, make sure to

Using jQuery to remove an iframe upon a click event

Showcasing a JavaScript array retrieved through JSON on a web page

What is the best way to reset form after submission in Next.js?

Difficulty with formatting decimal points in JavaScript

Retrieve the property value from a nested object using a key that contains spaces

Learn the process of invoking an Angular scope function from within a JavaScript function located within a controller

How can I dynamically insert a new HTML element into $event.target using Angular 2?

Tips for making sure there is a delay in between each axios call in a React

Utilize JavaScript and jQuery to locate a particular character within a string and move it one position back in the sequence

Angular.js - index template fails to execute controller, but other templates work flawlessly

Change the CSS menu item to directly load the website instead of using javascript to replace a placeholder

Is there a way to use regex to selectively color JSON keys?

Using ReactJS and JavaScript to transform an array into a fresh array

The use of a map with Next/image seems to be preventing the src image from loading properly

Utilize a personalized useFetch hook in React.js to transmit a POST request and obtain a response