Combine Two Arrays into a JSON Object and Merge Duplicate Key Values without Using ES6 in JavaScript

Question

Combine Two Arrays into a JSON Object and Merge Duplicate Key Values without Using ES6 in JavaScript

Seeking a swift javascript solution to merge two arrays with the same length into an array of json objects. In addition, the code should append any errors to the existing .error element. Preferably, the solution should utilize vanilla javascript instead of ES6.

var codes = ["12345", "12345","67890", "67890", "67890","67890","12092", "12092"];

var errors = ["12345 error 1","12345 error 2","67890 error 1","67890 error 2","67890 error 3","67890 error 4","12092 error 1","12092 error 2"];

Desired transformation:

{
    "code": "12345",
    "error": "12345 error 1, 12345 error 2"
},
{
    "code": "67890",
    "error": "67890 error 1, 67890 error 2, 67890 error 3, 67890 error 4, 67890 error 5"
},
{
    "code": "12092",
    "error": "12092 error 1 , 12092 error 2"
}

javascript arrays

Answer 1

Answer №1

To combine them, use the map method, then group them together and convert them into an array of objects:

const codes = ["12345", "12345","67890", "67890", "67890","67890","12092", "12092"];
const errors = ["12345 error 1","12345 error 2","67890 error 1","67890 error 2","67890 error 3","67890 error 4","12092 error 1", "12092 error 2"];

const result = Array.from(
    codes.map((code, index) => ({code, errors: errors[index]}))
        .reduce((accumulator, current) => accumulator.set(current.code, (accumulator.get(current.code) || []).concat(current.errors)), new Map))
    .map(([key, value]) => ({code: key, errors: value}));
console.log(result);

If you prefer the errors to be a single string, add the .join() method:

.map(([key, value]) => ({code: key, errors: value.join()}));

Legacy Version

var codes = ["12345", "12345", "67890", "67890", "67890", "67890", "12092", "12092"];
var errors = ["12345 error 1", "12345 error 2", "67890 error 1", "67890 error 2", "67890 error 3", "67890 error 4", "12092 error 1", "12092 error 2"];

var grouped =
  codes.map(function(code, index) {
    return {
      code: code,
      errors: errors[index]
    };
  })
  .reduce(function(accumulator, current) {
    accumulator[current.code] = (accumulator[current.code] || []).concat(current.errors);
    return accumulator;
  }, {});

var result = Object.keys(grouped).map(function(code) {
  return {
    code: code,
    errors: grouped[code]
  }
});

console.log(result);

Answer 2

To combine them, use the map method, then group them together and convert them into an array of objects:

const codes = ["12345", "12345","67890", "67890", "67890","67890","12092", "12092"];
const errors = ["12345 error 1","12345 error 2","67890 error 1","67890 error 2","67890 error 3","67890 error 4","12092 error 1", "12092 error 2"];

const result = Array.from(
    codes.map((code, index) => ({code, errors: errors[index]}))
        .reduce((accumulator, current) => accumulator.set(current.code, (accumulator.get(current.code) || []).concat(current.errors)), new Map))
    .map(([key, value]) => ({code: key, errors: value}));
console.log(result);

If you prefer the errors to be a single string, add the .join() method:

.map(([key, value]) => ({code: key, errors: value.join()}));

Legacy Version

var codes = ["12345", "12345", "67890", "67890", "67890", "67890", "12092", "12092"];
var errors = ["12345 error 1", "12345 error 2", "67890 error 1", "67890 error 2", "67890 error 3", "67890 error 4", "12092 error 1", "12092 error 2"];

var grouped =
  codes.map(function(code, index) {
    return {
      code: code,
      errors: errors[index]
    };
  })
  .reduce(function(accumulator, current) {
    accumulator[current.code] = (accumulator[current.code] || []).concat(current.errors);
    return accumulator;
  }, {});

var result = Object.keys(grouped).map(function(code) {
  return {
    code: code,
    errors: grouped[code]
  }
});

console.log(result);

Combine Two Arrays into a JSON Object and Merge Duplicate Key Values without Using ES6 in JavaScript

Answer №1

Similar questions

Utilizing a setTimeout function within a nested function in JavaScript

Utilize React and Jest to handle errors by either mocking window values or resolving them

Utilize Javascript to pull information from a REST API and generate a dynamic table with the retrieved

Preserving Foreign Key Relationships in Django Rest Framework Serializers

Is there a way to retrieve files from a main directory as well as all its subdirectories?

What is the best way to reset an HTML file input using JavaScript?

After sending the directories, an unusual issue arose that caught me off guard

Tips for retrieving the distance from the top of a specific div element and transferring it to another div

What is the proper way to implement array mapping within methods in Vue.js?

Incorporating images with JavaScript in Jade templates

How does the "deliver_order" function retrieve the value of the name parameter?

Tips for navigating through a webpage by scrolling

"Learn the steps to toggle a sub menu using an onclick event and how to hide it using another

"Within the node.js framework, the search/query section of the URL appears

Can Javascript (PWA) be used to detect fake GPS or mock GPS in applications?

transferring data from grails to javascript via a map

Changing the background color of a PHP input based on the webpage being viewed - here's how!

What's going on with the background color? It doesn't seem

steps to iterate through an array or object in javascript

Navigate to the adjacent IDs