how to merge multiple objects into one object in jQuery / javascript

Question

I have an array of objects as below :

var jsonResponse = [
{"Geo":"Asia",
"Country":["China","Japan","India"],
"contact": "[email protected]"},
{"Geo":"Europe",
"Country":["Austria","Germany","UK"],
"contact": "[email protected]"},
{"Geo":"Africa",
"Country":"Egypt",
"contact": "[email protected]"},
... ];

I want to loop through each object by key, merge all unique values and store in a new array of objects.

The result should be as below :

var newjsonResponse = [
{"Geo":"world wide",
"Country":["China","Japan","India","Austria","Germany","UK","Egypt"],
"contact": ["[email protected]","[email protected]"]
}];

Here is my code. Any suggestions please what am I doing wrong ? Thank you very much.

var jsonResponse = [
{"Geo":"Asia",
"Country":["China","Japan","India"],
"contact": "[email protected]"},
{"Geo":"Europe",
"Country":["Austria","Germany","UK"],
"contact": "[email protected]"},
{"Geo":"Africa",
"Country":"Egypt",
"contact": "[email protected]"}];
var arrGeo = [];
var arrCountry = [];
var arrcontact = [];
var newjsonResponse = [{"Geo":"world wide"}];
$.each(jsonResponse, function(key,value) {
arrCountry.push(value["Country"]);
arrcontact.push(value["contact"]);
newjsonResponse["Country"].push(arrCountry);
newjsonResponse["Contact"].push(arrcontact);
});
console.log(newjsonResponse);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

• Rodrigo Martín de Lamo: The reason your example fails is because newjsonResponse["Country"] is not initialized and also it is an array, not an object.. Try var newjsonResponse = {"Geo":"world wide", "Country": [], "contact": []}

Answer 1

Without jquery, but should be pretty much the same since your just making a loop with jquery.

const jsonResponse = [
 { Geo: "Asia", Country: ["China", "Japan", "India"], contact: "[email protected]" },
 { Geo: "Europe", Country: ["Austria", "Germany", "UK"], contact: "[email protected]" },
 { Geo: "Africa", Country: "Egypt", contact: "[email protected]" },
];
const arrGeo = [];
const arrCountry = [];
const arrcontact = [];
for (const data of jsonResponse) {
 if (typeof data.Country === "string") {
 arrCountry.push(data.Country);
 } else {
 arrCountry.push(...data.Country);
 }
 if (!arrcontact.includes(data.contact)) {
 arrcontact.push(data.contact);
 }
}
const newjsonResponse = [
 {
 Geo: "world wide",
 Country: arrCountry,
 contact: arrcontact,
 },
];
console.log(newjsonResponse);

Another way:

const jsonResponse = [
 { Geo: "Asia", Country: ["China", "Japan", "India"], contact: "[email protected]" },
 { Geo: "Europe", Country: ["Austria", "Germany", "UK"], contact: "[email protected]" },
 { Geo: "Africa", Country: "Egypt", contact: "[email protected]" },
];
const newjsonResponse = { Geo: "world wide", Country: [], contact: [] };
for (const item of jsonResponse) {
 // Convert single country into a array for simplicity
 const countries =
 typeof item.Country === "string" ? [item.Country] : item.Country;
 // Loop over every country, checking that we don't add a duplicate
 for (const country of countries) {
 if (!newjsonResponse.Country.includes(country)) {
 newjsonResponse.Country.push(country);
 }
 }
 // Add contact if not allready in list
 if (!newjsonResponse.contact.includes(item.contact)) {
 newjsonResponse.contact.push(item.contact);
 }
}
console.log(newjsonResponse);

Answer 2

This is written with only JS and JQuery

const jsonResponse = [
 { Geo: "Asia", Country: ["China", "Japan", "India"], contact: "[email protected]" },
 { Geo: "Europe", Country: ["Austria", "Germany", "UK"], contact: "[email protected]" },
 { Geo: "Africa", Country: "Egypt", contact: "[email protected]" },
];
function _pluck(key , arr){
 return arr.flatMap(x => x[key])
}
function unique(array) {
 return $.grep(array, function(el, index) {
 return index == $.inArray(el, array);
 });
}
const countries = unique(_pluck('Country' , jsonResponse))
const contacts = unique(_pluck('contact' , jsonResponse))
const finalResponse = [{Geo : 'World Wide' ,Country :countries , Contacts : contacts }]
console.log(finalResponse)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>