Combining JSON array objects in Vanilla Javascript to create a nested array based on a shared value

Question

Combining JSON array objects in Vanilla Javascript to create a nested array based on a shared value

I have been searching for a solution to address my specific issue but have not found an exact match. If there is a similar question, please provide a link to the solution.

I am looking to merge an array of objects that share a common value using vanilla Javascript. I have a JSON file that will generate the following javascript object, and I am unable to alter the original structure. Each object will have different nested names and values, but the common value is found in name[0].

var data = [
  {
    name: [
      'Data 1', // common value
      '1 Jan, 2019', // same value, should not be overwritten/merged
      'hotfix dec'
    ],
    value: [
      'hotfix1.fsfix',
      'hotfix1.txt'
    ]
  },
  {
    name: [
      'Data 1', // common value
      '1 Jan, 2019' // same value, should not be overwritten/merged
    ],
    value: 'data1.jar'
  },
  {
    name: [
      'Data 2',
      '1 Feb, 2019'
    ],
    value: 'data2.fsfix'
  },
  {
    name: [
      'Data 2',
      '1 Feb, 2019'
    ],
    value: 'data2.jar'
  },
  {
    name: [
      'Data 3',
      '1 Mar, 2018'
    ],
    value: 'data3.fsfix'
  }
]

The desired output is to merge nested objects that share the same name[0].

var data = [
  {
    name: [
      'Data 1', // common value
      '1 Jan, 2019', // same value, should not be overwritten/merged
      'hotfix dec'
    ],
    value: [
      'data1.fsfix',
      'data1.txt',
      'data1.jar' // Added after the merge
    ]
  },
  {
    name: [
      'Data 2',
      '1 Feb, 2019'
    ],
    value: [
      'data2.fsfix',
      'data2.jar' // Added after the merge
    ]
  },
  {
    name: [
      'Data 3',
      '1 Mar, 2018'
    ],
    value: 'data3.fsfix'
  }
]

With this new merged structure, I plan to create a function to iterate through each array set. Thank you in advance for your help.

javascript arrays json object

Answer 1

Answer №1

To organize the data based on the first name entry, one can utilize a Map. The data can then be filled into the value property within the respective Map value. Additionally, any extra values in the name arrays (beyond the first two entries) can be gathered, followed by the extraction of the Map values.

This approach maintains a linear time complexity:

var data = [{name: ['Data 1', '1 Jan, 2019', 'hotfix dec'],value: ['hotfix1.fsfix','hotfix1.txt']},{name: ['Data 1', '1 Jan, 2019'],value: 'data1.jar'},{name: ['Data 2','1 Feb, 2019'],value: 'data2.fsfix'},{name: ['Data 2','1 Feb, 2019'],value: 'data2.jar'},{name: ['Data 3','1 Mar, 2018'],value: 'data3.fsfix'}];

const map = new Map(data.map(o => 
    [o.name[0], { name: o.name.slice(0,2), value: [] }]));
data.forEach(o => map.get(o.name[0]).value.push(...[].concat(o.value)));
data.forEach(o => map.get(o.name[0]).name.push(...o.name.slice(2)));
const result = Array.from(map.values(), o => o.value.length === 1 
    ? { ...o, value: o.value[0] } : o);

console.log(result);

The map-function passed to the Array.from method serves as a callback function. Its purpose is to transform value arrays with only one string into that single string. If this transformation is unnecessary, the callback can be omitted and simply call Array.from(map.values()).

Answer 2

To organize the data based on the first name entry, one can utilize a Map. The data can then be filled into the value property within the respective Map value. Additionally, any extra values in the name arrays (beyond the first two entries) can be gathered, followed by the extraction of the Map values.

This approach maintains a linear time complexity:

var data = [{name: ['Data 1', '1 Jan, 2019', 'hotfix dec'],value: ['hotfix1.fsfix','hotfix1.txt']},{name: ['Data 1', '1 Jan, 2019'],value: 'data1.jar'},{name: ['Data 2','1 Feb, 2019'],value: 'data2.fsfix'},{name: ['Data 2','1 Feb, 2019'],value: 'data2.jar'},{name: ['Data 3','1 Mar, 2018'],value: 'data3.fsfix'}];

const map = new Map(data.map(o => 
    [o.name[0], { name: o.name.slice(0,2), value: [] }]));
data.forEach(o => map.get(o.name[0]).value.push(...[].concat(o.value)));
data.forEach(o => map.get(o.name[0]).name.push(...o.name.slice(2)));
const result = Array.from(map.values(), o => o.value.length === 1 
    ? { ...o, value: o.value[0] } : o);

console.log(result);

The map-function passed to the Array.from method serves as a callback function. Its purpose is to transform value arrays with only one string into that single string. If this transformation is unnecessary, the callback can be omitted and simply call Array.from(map.values()).

Answer 3

Answer №2

There are some Array methods that could potentially help achieve the desired outcome (code snippet provided below, though it has not been tested):

// Utilizing Array methods to merge matching entries by pushing values from matching objects to each other
data = data.map(entry => {
    let matchingObjects = data.filter(match => {
        return match.name[0] === entry.name[0];
    });
    matchingObjects.forEach(match => {
        if (match !== entry) {
            var flatValue = [entry.value].flat();
            entry.value = flatValue.push.apply(flatValue, [match.value].flat());
        }
    });
});

// Removing duplicates by filtering out all but the first entry of each name[0]
data = data.filter((entry, index) => {
    return index === data.findIndex(match => {
        return match.name[0] === entry.name[0];
    });
});

Answer 4

There are some Array methods that could potentially help achieve the desired outcome (code snippet provided below, though it has not been tested):

// Utilizing Array methods to merge matching entries by pushing values from matching objects to each other
data = data.map(entry => {
    let matchingObjects = data.filter(match => {
        return match.name[0] === entry.name[0];
    });
    matchingObjects.forEach(match => {
        if (match !== entry) {
            var flatValue = [entry.value].flat();
            entry.value = flatValue.push.apply(flatValue, [match.value].flat());
        }
    });
});

// Removing duplicates by filtering out all but the first entry of each name[0]
data = data.filter((entry, index) => {
    return index === data.findIndex(match => {
        return match.name[0] === entry.name[0];
    });
});

Answer 5

Answer №3

You have the option to utilize a combination of reduce and map to achieve your desired result. This dynamic duo offers great power and versatility.

    const information = [{name: ['Data 1', '1 Jan, 2019', 'hotfix dec'],value: ['hotfix1.fsfix','hotfix1.txt']},{name: ['Data 1', '1 Jan, 2019'],value: 'data1.jar'},{name: ['Data 2','1 Feb, 2019'],value: 'data2.fsfix'},{name: ['Data 2','1 Feb, 2019'],value: 'data2.jar'},{name: ['Data 3','1 Mar, 2018'],value: 'data3.fsfix'}];

    const mappedData = information.reduce((accumulator, current)=>{
        identifier = current.name[0];
        accumulator[identifier] = accumulator[identifier] || {
            name: [],
            value: []
        };
        const dataValue = Array.isArray(current.value) ? current.value : [current.value]

        accumulator[identifier].name = [...accumulator[identifier].name, ...current.name.filter((item)=>accumulator[identifier].name.indexOf(item)===-1)]
        accumulator[identifier].value = [...accumulator[identifier].value, ...dataValue.filter((item)=>accumulator[identifier].value.indexOf(item)===-1)]

        return accumulator
    },{})
    const finalResult = Object.keys(mappedData).map(key=> {
        const info = mappedData[key];
        info.value = info.value.length===1 ? info.value[0] : info.value
        return info;
    })

Answer 6

You have the option to utilize a combination of reduce and map to achieve your desired result. This dynamic duo offers great power and versatility.

    const information = [{name: ['Data 1', '1 Jan, 2019', 'hotfix dec'],value: ['hotfix1.fsfix','hotfix1.txt']},{name: ['Data 1', '1 Jan, 2019'],value: 'data1.jar'},{name: ['Data 2','1 Feb, 2019'],value: 'data2.fsfix'},{name: ['Data 2','1 Feb, 2019'],value: 'data2.jar'},{name: ['Data 3','1 Mar, 2018'],value: 'data3.fsfix'}];

    const mappedData = information.reduce((accumulator, current)=>{
        identifier = current.name[0];
        accumulator[identifier] = accumulator[identifier] || {
            name: [],
            value: []
        };
        const dataValue = Array.isArray(current.value) ? current.value : [current.value]

        accumulator[identifier].name = [...accumulator[identifier].name, ...current.name.filter((item)=>accumulator[identifier].name.indexOf(item)===-1)]
        accumulator[identifier].value = [...accumulator[identifier].value, ...dataValue.filter((item)=>accumulator[identifier].value.indexOf(item)===-1)]

        return accumulator
    },{})
    const finalResult = Object.keys(mappedData).map(key=> {
        const info = mappedData[key];
        info.value = info.value.length===1 ? info.value[0] : info.value
        return info;
    })

Combining JSON array objects in Vanilla Javascript to create a nested array based on a shared value

Answer №1

Answer №2

Answer №3

Similar questions

Is it feasible to cancel or clear the queue for a jQuery fadeOut function after a delay is specified? If so,

Setting input field value using jQuery depending on the attribute value

The function is receiving an empty array of objects

Access licensedContent property on YouTube API using PHP

The Firebase signInWithPopup functionality suddenly shuts down in a Next.js project

Jackson: decoding nested arrays

Problem with JSON in Spring Boot REST API

Transform a graphviz.dot.Digraph object into a networkx.Graph

Updating Tailwind CSS to accommodate older web browsers by converting modern rgba() notation to be browser-compatible

Autocomplete feature seems to be functioning properly in the online demonstration, while it does not seem

Using JSON and Jquery in Struts2 action

Retrieving two sets of AJAX data at the same time

Ldap.js: exploring nested searches

Assign a value to an object within a Vue data property

Controlling international shortcuts for numerous npm packages

What is the best way to access a Node/Express API key from the .env file in front-end JavaScript code?

Avoiding the capturing of events on $( document ).mousemove

Is there a way to use node.js to retrieve a video in mp4 format?

The JQuery TextNTags plugin eliminates tag formatting once the trigger syntax has been modified

(React) Error: Unable to access property 'this' as it is set to undefined while trying to utilize refs