Merge JSON objects while retaining duplicate keys

Question

Merge JSON objects while retaining duplicate keys

I am looking to merge two arrays containing JSON objects while retaining duplicate keys by adding a prefix to the keys. In this specific scenario, the data from 'json2' is replacing the data from 'json1' due to having identical keys, but I want to keep both sets of data. Thank you.

var json1 = [
  {
    "Column1": "json1",
    "Column2": "json1",
  },
  {
    "Column1": "json1",
    "Column2": "json1",
  }
];
var json2 = [
  {
    "Column1": "json2",
    "Column2": "json2",
  },
  {
    "Column1": "json2",
    "Column2": "json2",
  }
];

console.log(angular.extend(json1, json2));

The current output is:

[
  {
    "Column1": "json2",
    "Column2": "json2",
  },
  {
    "Column1": "json2",
    "Column2": "json2",
  }
];

However, the desired output is:

[
  {
    "json1Column1": "json1",
    "json1Column2": "json1",
    "json2Column1": "json2",
    "json2Column2": "json2",
  },
  {
    "json1Column1": "json1",
    "json1Column2": "json1",
    "json2Column1": "json2",
    "json2Column2": "json2",
  }
];

javascript arrays angularjs json

Answer 1

Answer №1

To overcome the issue, consider creating a custom function to prefix objects:

function addPrefix(target, prefix){
    var newObj = false;
    if(target.constructor === Array){
        newObj = [];
        for(var i = 0 ; i< target.length; i++){
            item = target[i];
            var itemObj = {}; 
            for(var key in item){
                itemObj[prefix+key] = item[key]; 
            }
            newObj.push(itemObj);         
        }       
    }else{
        newObj = {};
        for(var key in target){
                newObj[prefix+key] = target[key]; 
        }
    }
     return newObj;
}

Instead of using angular.extend, utilize angular.merge for deep property copy. This will prevent properties from the second object being copied into the first. Once you have implemented the custom function, proceed with:

var nJson1=addPrefix(json1,"json1");
var nJson2=addPrefix(json2,"json2");
var merged = angular.merge({},nJson1,nJson2);

Answer 2

To overcome the issue, consider creating a custom function to prefix objects:

function addPrefix(target, prefix){
    var newObj = false;
    if(target.constructor === Array){
        newObj = [];
        for(var i = 0 ; i< target.length; i++){
            item = target[i];
            var itemObj = {}; 
            for(var key in item){
                itemObj[prefix+key] = item[key]; 
            }
            newObj.push(itemObj);         
        }       
    }else{
        newObj = {};
        for(var key in target){
                newObj[prefix+key] = target[key]; 
        }
    }
     return newObj;
}

Instead of using angular.extend, utilize angular.merge for deep property copy. This will prevent properties from the second object being copied into the first. Once you have implemented the custom function, proceed with:

var nJson1=addPrefix(json1,"json1");
var nJson2=addPrefix(json2,"json2");
var merged = angular.merge({},nJson1,nJson2);

Answer 3

Answer №2

An innovative solution involving iteration through keys and items.

const array1 = [{ Name: "John", Age: 25 }, { Name: "Alice", Age: 30 }],
    array2 = [{ City: "New York", Country: "USA" }, { City: "London", Country: "UK" }],
    mergedResult = function (data) {
        let finalArray = [];
        Object.keys(data).forEach(function (key) {
            data[key].forEach(function (item, index) {
                finalArray[index] = finalArray[index] || {};
                Object.keys(item).forEach(function (property) {
                    finalArray[index][key + property] = item[property];
                });
            });
        });
        return finalArray;
    }({ info1: array1, info2: array2 });

document.write('<pre>' + JSON.stringify(mergedResult, null, 4) + '</pre>');

Answer 4

An innovative solution involving iteration through keys and items.

const array1 = [{ Name: "John", Age: 25 }, { Name: "Alice", Age: 30 }],
    array2 = [{ City: "New York", Country: "USA" }, { City: "London", Country: "UK" }],
    mergedResult = function (data) {
        let finalArray = [];
        Object.keys(data).forEach(function (key) {
            data[key].forEach(function (item, index) {
                finalArray[index] = finalArray[index] || {};
                Object.keys(item).forEach(function (property) {
                    finalArray[index][key + property] = item[property];
                });
            });
        });
        return finalArray;
    }({ info1: array1, info2: array2 });

document.write('<pre>' + JSON.stringify(mergedResult, null, 4) + '</pre>');

Merge JSON objects while retaining duplicate keys

Answer №1

Answer №2

Similar questions

Finding the main page URL using PHP within a JavaScript include: A comprehensive guide

Encountering an "undefined is not an object" error while creating a sinon stub in an Angular

Updating the state after receiving API results asynchronously following a function call

Unable to activate Vue 13 keyCode in a text field using jQuery with Laravel Dusk Testing

Vue.js <v-data-table> - Automatic sorting/ custom sorting options

Initiating an Ajax POST request by clicking a button

Managing variables or properties that are not defined in ES6

Utilizing Anglar 16's MatTable trackBy feature on FormGroup for identifying unaltered fields

It is not possible to select a node using a where statement in JSON.net Linq

Transferring information using pure JavaScript AJAX and retrieving it through a Node API

Is there a way to dynamically add an option to multiple select boxes and then only redirect the browser if that specific option is chosen using jquery/js?

When using Webpack, there may be difficulties resolving relative path import of express static files

The invocation of res.json() results in the generation of CastError

What is the best way to redirect before displaying a page in Next.js?

PHP sending only a single space in an email

Display a page containing two distinct JSON arrays using Angular

Ways to receive notification during the user's selection of an option by hovering over it

When using the test() method in JavaScript with regular expressions, it may return true even if not all characters match, even when using

Obtain a variety of image sets nested within an array of content

A guide on incorporating and utilizing third-party Cordova plugins in Ionic 5