Merge arrays to form nested structures

Question

Merge arrays to form nested structures

Here's a mind-bending scenario for you.

Imagine I have two arrays - one containing categories and the other containing arrays that follow the structure of those categories. For example:

var categoryArray = ["Name", "Title", "Hire Date"];
var infoArray = [["John","Project Manager","January 5"], ["Alex","Accountant","December 15"], ["Joanne","Graphic Designer","August 26"]];

I want to combine this data into a single object. To start off, I create an empty object like so:

var myDict = {};

I attempted to achieve this using nested for-loops, trying to populate myDict with the array contents. Here's what I tried:

// Loop through each entry in the infoArray
for (i = 0; i < infoArray.length; i++) {
    var row = String("row"+i);
    myDict.row = {};
    // Loop through each category
    for (x = 0; x < categoryArray.length; x++) {
        myDict.row.categoryArray[x] = infoArray[i][x];
    }
}

Clearly, there are many mistakes here, and I'm stuck on how to fix them. The main issue seems to be using variables/arrays as names for objects. Any help from the all-knowing internet would be greatly appreciated!

javascript oop

Answer 1

Answer №1

let newData = infoArray.map(function(currArr) {
    return categoryArray.reduce(function(prev, currKey, index) {
        prev[currKey] = currArr[index];
        return prev;
    }, {});
});

Data Output

[ { Name: 'John',
    Title: 'Project Manager',
    'Hire Date': 'January 5' },
  { Name: 'Alex',
    Title: 'Accountant',
    'Hire Date': 'December 15' },
  { Name: 'Joanne',
    Title: 'Graphic Designer',
    'Hire Date': 'August 26' } ]

If your tool does not support Array.prototype.map method, you can utilize this alternative:

let newData = [];
for (let i = 0; i < infoArray.length; i += 1) {
    let tempObject = {};
    for (let j = 0; j < categoryArray.length; j += 1) {
        tempObject[categoryArray[j]] = infoArray[i][j];
    }
    newData.push(tempObject);
}

Answer 2

let newData = infoArray.map(function(currArr) {
    return categoryArray.reduce(function(prev, currKey, index) {
        prev[currKey] = currArr[index];
        return prev;
    }, {});
});

Data Output

[ { Name: 'John',
    Title: 'Project Manager',
    'Hire Date': 'January 5' },
  { Name: 'Alex',
    Title: 'Accountant',
    'Hire Date': 'December 15' },
  { Name: 'Joanne',
    Title: 'Graphic Designer',
    'Hire Date': 'August 26' } ]

If your tool does not support Array.prototype.map method, you can utilize this alternative:

let newData = [];
for (let i = 0; i < infoArray.length; i += 1) {
    let tempObject = {};
    for (let j = 0; j < categoryArray.length; j += 1) {
        tempObject[categoryArray[j]] = infoArray[i][j];
    }
    newData.push(tempObject);
}

Answer 3

Answer №2

Instead of using row0, row1, etc., it would be better to utilize an array for a more organized approach. Here is an example:

var categoryArray = ["Name", "Title", "Hire Date"];
var infoArray = [["John","Project Manager","January 5"],["Alex","Accountant","December 15"],["Joanne","Graphic Designer","August 26"]];
var myDict = {};

for (i = 0; i < infoArray.length; i++) {
    var row = {};
    myDict["row"+i] = row;
    
    for (x = 0; x < categoryArray.length; x++) {
        row[categoryArray[x]] = infoArray[i][x];
    }
}

Generated Output:

{
    "row0": {
        "Name": "John",
        "Title": "Project Manager",
        "Hire Date": "January 5"
    },
    "row1": {
        "Name": "Alex",
        "Title": "Accountant",
        "Hire Date": "December 15"
    },
    "row2": {
        "Name": "Joanne",
        "Title": "Graphic Designer",
        "Hire Date": "August 26"
    }
}

Answer 4

Instead of using row0, row1, etc., it would be better to utilize an array for a more organized approach. Here is an example:

var categoryArray = ["Name", "Title", "Hire Date"];
var infoArray = [["John","Project Manager","January 5"],["Alex","Accountant","December 15"],["Joanne","Graphic Designer","August 26"]];
var myDict = {};

for (i = 0; i < infoArray.length; i++) {
    var row = {};
    myDict["row"+i] = row;
    
    for (x = 0; x < categoryArray.length; x++) {
        row[categoryArray[x]] = infoArray[i][x];
    }
}

Generated Output:

{
    "row0": {
        "Name": "John",
        "Title": "Project Manager",
        "Hire Date": "January 5"
    },
    "row1": {
        "Name": "Alex",
        "Title": "Accountant",
        "Hire Date": "December 15"
    },
    "row2": {
        "Name": "Joanne",
        "Title": "Graphic Designer",
        "Hire Date": "August 26"
    }
}

Answer 5

Answer №3

// It seems like the declaration below does not assign "Row1", "Row2", etc as nested objects as intended, but instead rewrites a child called "row"
myDict.row = {};

Indeed. To achieve that, you need to use

 myDict[row] = {};

(and similarly below: myDict[row][…] = …)

// The initial run of this will create a child of "row1" named "name," storing the value "John" (equivalent to infoArray[1][1])
myDict.row.categoryArray[x] = infoArray[i][x];

Once again, using .categoryArray[x] implies a literal property name (the property x of the non-existent property "categoryArray") - wrapping it in brackets is necessary.

Your final code should be:

var myDict = {};
for (var i = 0; i < infoArray.length; i++) { // declaring iteration variables locally
    var row = "row"+i;
    myDict[row] = {};
    for (var x = 0; x < categoryArray.length; x++) {
        myDict[row][categoryArray[x]] = infoArray[i][x];
    }
}

Answer 6

// It seems like the declaration below does not assign "Row1", "Row2", etc as nested objects as intended, but instead rewrites a child called "row"
myDict.row = {};

Indeed. To achieve that, you need to use

 myDict[row] = {};

(and similarly below: myDict[row][…] = …)

// The initial run of this will create a child of "row1" named "name," storing the value "John" (equivalent to infoArray[1][1])
myDict.row.categoryArray[x] = infoArray[i][x];

Once again, using .categoryArray[x] implies a literal property name (the property x of the non-existent property "categoryArray") - wrapping it in brackets is necessary.

Your final code should be:

var myDict = {};
for (var i = 0; i < infoArray.length; i++) { // declaring iteration variables locally
    var row = "row"+i;
    myDict[row] = {};
    for (var x = 0; x < categoryArray.length; x++) {
        myDict[row][categoryArray[x]] = infoArray[i][x];
    }
}

Merge arrays to form nested structures

Answer №1

Answer №2

Answer №3

Similar questions

Node.js retrieves values through the app.get and app.post methods

JavaScript failing to load following PHP header() redirect

AngularJS Filter without creating a new object

Can grapesjs be integrated into AngularJS using a controller?

How to effectively utilize signed requests for AWS S3 when uploading images?

The functionality of the web application is not supported in Multi-Device-Hybrid-Apps format

The Angular carousel fails to display or operate properly

jQuery Autocomplete API Issue: Undefined

What is the best way to hand off slots to a descendant component in Vue 3?

How can we handle multiple asynchronous calls within a function?

Update the path dynamically in Next.js without the need to reload the page

Tips for eliminating white spaces when text wraps onto a new line

What is the best way to specify the CSS :hover state within a jQuery selector?

Error: The window object is not found in this context when initializing the Commerce module from the commerce.export.js file located in the node_modules folder within the @chec

The Angular directive alters the scope, however, the template continues to display the unchanged value

Ways to distinguish XmlHttpRequest Access-Control-Allow-Origin issues from regular network errors

Error message: Issue with TypeScript and cleave.js - 'rawValue' property is not found on type 'EventTarget & HTMLInputElement'

A guide to managing Ajax in functional components in React without using classes

A more efficient way to have Vue import files from the assets folder rather than manually inserting script tags into the index.html file

Importing named exports dynamically in Next.js