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": "x@y.com"},
{"Geo":"Europe",
"Country":["Austria","Germany","UK"],
"contact": "x@y.com"},
{"Geo":"Africa",
"Country":"Egypt",
"contact": "z@z.com"},
... ];

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": ["x@y.com","z@z.com"]
}];

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": "x@y.com"},
{"Geo":"Europe",
"Country":["Austria","Germany","UK"],
"contact": "x@y.com"},
{"Geo":"Africa",
"Country":"Egypt",
"contact": "z@z.com"}];

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>

Answer 1

This is written with only JS and JQuery

const jsonResponse = [
  { Geo: "Asia", Country: ["China", "Japan", "India"], contact: "x@y.com" },
  { Geo: "Europe", Country: ["Austria", "Germany", "UK"], contact: "x@y.com" },
  { Geo: "Africa", Country: "Egypt", contact: "z@z.com" },
];

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>

Answer 2

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: "x@y.com" },
  { Geo: "Europe", Country: ["Austria", "Germany", "UK"], contact: "x@y.com" },
  { Geo: "Africa", Country: "Egypt", contact: "z@z.com" },
];

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: "x@y.com" },
  { Geo: "Europe", Country: ["Austria", "Germany", "UK"], contact: "x@y.com" },
  { Geo: "Africa", Country: "Egypt", contact: "z@z.com" },
];

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);