Converting an array of arrays in JavaScript into an object

Question

Converting an array of arrays in JavaScript into an object

Managing a JS array with 66 examples can be overwhelming, but I have narrowed it down to just 4 for simplicity:

[["A","Example1"],["A","Example2"],["B","Example3"],["B","Example4"]]

I am now faced with the challenge of converting this array into an object that will work seamlessly with a multi select drop down menu:

var opt = [{
label: 'A', children:[
        {"label":"Example1","value":"Example1","selected":"TRUE"},
        {"label":"Example2","value":"Example2","selected":"TRUE"} 
      ]
},

{
label: 'B', children:[
  {"label":"Example3","value":"Example3","selected":"TRUE"},
  {"label":"Example4","value":"Example4","selected":"TRUE"}
  ]
}
]

Does anyone know of a more efficient way to accomplish this task?

javascript arrays object multi-select

Answer 1

Answer №1

Update: I have successfully achieved the desired outcome by utilizing the functions reduce() and filter().

const result = [['A', 'Example1'], ['A', 'Example2'], ['B', 'Example3'], ['B', 'Example4']].reduce((acc, cur) => {
  const objFromAccumulator = acc.filter((row) => row.label === cur[0]);
  const newChild = {label: cur[1], value: cur[1], selected: 'TRUE'};
  if (objFromAccumulator.length) {
    objFromAccumulator[0].children.push(newChild);
  } else {
    acc.push({label: cur[0], children: [newChild]});
  }
  return acc;
}, []);

console.log(result);

Answer 2

Update: I have successfully achieved the desired outcome by utilizing the functions reduce() and filter().

const result = [['A', 'Example1'], ['A', 'Example2'], ['B', 'Example3'], ['B', 'Example4']].reduce((acc, cur) => {
  const objFromAccumulator = acc.filter((row) => row.label === cur[0]);
  const newChild = {label: cur[1], value: cur[1], selected: 'TRUE'};
  if (objFromAccumulator.length) {
    objFromAccumulator[0].children.push(newChild);
  } else {
    acc.push({label: cur[0], children: [newChild]});
  }
  return acc;
}, []);

console.log(result);

Answer 3

Answer №2

Here's a snippet that should do the job:

const data = [["A","Example1"],["A","Example2"],["B","Example3"],["B","Example4"]];

const dictionary = new Map();
const result = data.reduce((finalArray, [key, label]) => {
    if (!dictionary.has(key)) {
        const newItem = {
            label: key,
            children: []
        };
        dictionary.set(key, newItem);
        finalArray.push(newItem);
    }
    dictionary.get(key).children.push({
        label,
        value: label,
        selected: "TRUE"
    })
    return finalArray;
}, []);
console.log(result);

Answer 4

Here's a snippet that should do the job:

const data = [["A","Example1"],["A","Example2"],["B","Example3"],["B","Example4"]];

const dictionary = new Map();
const result = data.reduce((finalArray, [key, label]) => {
    if (!dictionary.has(key)) {
        const newItem = {
            label: key,
            children: []
        };
        dictionary.set(key, newItem);
        finalArray.push(newItem);
    }
    dictionary.get(key).children.push({
        label,
        value: label,
        selected: "TRUE"
    })
    return finalArray;
}, []);
console.log(result);

Answer 5

Answer №3

Check out this clever and efficient solution that makes use of an object as a map:

const data = [["A","Example1"],["A","Example2"],["B","Example3"],["B","Example4"]];

const opt = data.reduce((results,[key,val]) => {
  if(!results[0][key]) //first element of results is lookup map of other elements
    results.push(results[0][key] = { label: key, children: [] });
  results[0][key].children.push({ label: val, value: val, selected:"TRUE" });
  return results;
}, [{}]).slice(1); //slice off map as it's no longer needed

console.log(opt);

Answer 6

Check out this clever and efficient solution that makes use of an object as a map:

const data = [["A","Example1"],["A","Example2"],["B","Example3"],["B","Example4"]];

const opt = data.reduce((results,[key,val]) => {
  if(!results[0][key]) //first element of results is lookup map of other elements
    results.push(results[0][key] = { label: key, children: [] });
  results[0][key].children.push({ label: val, value: val, selected:"TRUE" });
  return results;
}, [{}]).slice(1); //slice off map as it's no longer needed

console.log(opt);

Converting an array of arrays in JavaScript into an object

Answer №1

Answer №2

Answer №3

Similar questions

Attempting to bring in an image file into a React component

Assign Multiple Values to a PHP Variable and populate an HTML input field with the value

Is it considered acceptable to employ an endless loop to continually monitor the connection to a server?

Angular array mapping techniques

launch active link in pop-up dialog

`Troubleshooting Issue: Autocomplete feature in Jquery Codeigniter not functioning

Tips for achieving a gradual transformation of an element according to the scrolling position

Looking to retrieve the AssetLoadedFunc properties in the LoadAssets function? Wondering if you should use TypeScript or JavaScript

Tips for efficiently rendering large data in nextjs when it comes into view?

How come the button doesn't get enabled after three seconds even though ng-disabled is being used?

Utilize the self-reference feature within styled-components

Combining a pair of 2D arrays (M and N)

What is the mechanism behind the functionality of promise chains?

Setting up types for variables in Angular 2 componentsHere is an

New issue with Express js 4x: receiving an empty object from :req.params

Tips for generating a random number and verifying if it matches the user input using inner HTML

Avoid matching if a character is found in JavaScript

Error: Can't compile - Accordion controller is necessary

How can I convert a PHP array into radio buttons in an HTML form?

Creating a leaderboard with the help of arrays