Combining elements from a string array to create a hierarchical object in JavaScript

Question

Combining elements from a string array to create a hierarchical object in JavaScript

I need assistance with merging values from an array into a predefined nested object. Here is an example of the array with values,

['name=ABC XYZ', 'hobbies=[M,N,O,P]', 'profession=S', 'age=27']

The object that needs to be updated with these values looks like this,

const person = {
    details_1: {
      name: null,
      hobbies: null,
      profession: null
    },
    details_2: {
      age: null
    }
  };

The desired output should resemble the following structure,

const updated_person = {
    details_1: {
      name: 'ABC XYZ',
      hobbies: [M,N,O,P],
      profession: 'S'
    },
    details_2: {
      age: 27
    }
  };

Your help on this matter is greatly appreciated!

javascript arrays object nested-object

Answer 1

Answer №1

This time, I approached the problem differently by creating a new solution. I decided to utilize an interface where I outlined the required data structure. In the following steps, I converted the string array into key and value pairs, filtering out the keys defined in the interface and storing them in an empty object literal.

const data = ["name=ABC XYZ", "hobbies=[M,N,O,P]", "profession=S", "age=27"];

const dataInterface = {
  details_1: { name: null, hobbies: null, profession: null },
  details_2: { age: null },
};

function orderData(arr) {
  const records = arr.map((item) => {
    let [key, value] = item.split("=");
    if (value[0] === "[" && value[value.length - 1] === "]") {
      value = value.slice(1, value.length - 1).split(",");
    }
    return { key, value };
  });

  const dataBlock = {};
  Object.keys(dataInterface).forEach((detail) => {
    dataBlock[detail] = {};
    Object.keys(dataInterface[detail]).forEach((dataKey) => {
      dataBlock[detail][dataKey] = records.filter((record) => {
        return record.key === dataKey;
      })[0].value;
    });
  });
  return dataBlock;
}

const orderedData = orderData(data);
console.log(orderedData);

Answer 2

This time, I approached the problem differently by creating a new solution. I decided to utilize an interface where I outlined the required data structure. In the following steps, I converted the string array into key and value pairs, filtering out the keys defined in the interface and storing them in an empty object literal.

const data = ["name=ABC XYZ", "hobbies=[M,N,O,P]", "profession=S", "age=27"];

const dataInterface = {
  details_1: { name: null, hobbies: null, profession: null },
  details_2: { age: null },
};

function orderData(arr) {
  const records = arr.map((item) => {
    let [key, value] = item.split("=");
    if (value[0] === "[" && value[value.length - 1] === "]") {
      value = value.slice(1, value.length - 1).split(",");
    }
    return { key, value };
  });

  const dataBlock = {};
  Object.keys(dataInterface).forEach((detail) => {
    dataBlock[detail] = {};
    Object.keys(dataInterface[detail]).forEach((dataKey) => {
      dataBlock[detail][dataKey] = records.filter((record) => {
        return record.key === dataKey;
      })[0].value;
    });
  });
  return dataBlock;
}

const orderedData = orderData(data);
console.log(orderedData);

Answer 3

Answer №2

One way to accomplish this task is by looping through the given array.

const data = ['name=John Doe', 'interests=[A,B,C]', 'occupation=X', 'age=30'];

const individual = {
  bio_1: {},
  bio_2: {}
};

data.forEach(element => {
  (element.split('=')[0] !== 'age') ? individual.bio_1[element.split('=')[0]] = element.split('=')[1] : individual.bio_2[element.split('=')[0]] = element.split('=')[1]
});

console.log(individual);

Answer 4

One way to accomplish this task is by looping through the given array.

const data = ['name=John Doe', 'interests=[A,B,C]', 'occupation=X', 'age=30'];

const individual = {
  bio_1: {},
  bio_2: {}
};

data.forEach(element => {
  (element.split('=')[0] !== 'age') ? individual.bio_1[element.split('=')[0]] = element.split('=')[1] : individual.bio_2[element.split('=')[0]] = element.split('=')[1]
});

console.log(individual);

Answer 5

Answer №3

When trying to merge an unstructured array into a structured object in JavaScript, it can be challenging to ensure that the array values are correctly assigned to the corresponding properties in the object.

While JavaScript does offer the assign() function for merging objects, it is important that your source data matches the structure of the object and not just an array.

For example, transforming this array:

['name=ABC XYZ', 'hobbies=[M,N,O,P]', 'profession=S', 'age=27']

into an object like this:

const source = [{details_1: {"name":"ABC XYZ", "hobbies":"[M,N,O,P]", "profession":"S"}, details_2: {"age":"27"}}]

allows you to use Object.assign() to merge it with a structure like:

const person = {
  details_1: {
    name: null,
    hobbies: null,
    profession: null
  },
  details_2: {
    age: null
  }
};

You may need to create a new instance of person or clear it before using Object.assign(). Alternatively, if person is already an object, you could implement a fill() method to handle the array data accordingly.

Answer 6

When trying to merge an unstructured array into a structured object in JavaScript, it can be challenging to ensure that the array values are correctly assigned to the corresponding properties in the object.

While JavaScript does offer the assign() function for merging objects, it is important that your source data matches the structure of the object and not just an array.

For example, transforming this array:

['name=ABC XYZ', 'hobbies=[M,N,O,P]', 'profession=S', 'age=27']

into an object like this:

const source = [{details_1: {"name":"ABC XYZ", "hobbies":"[M,N,O,P]", "profession":"S"}, details_2: {"age":"27"}}]

allows you to use Object.assign() to merge it with a structure like:

const person = {
  details_1: {
    name: null,
    hobbies: null,
    profession: null
  },
  details_2: {
    age: null
  }
};

You may need to create a new instance of person or clear it before using Object.assign(). Alternatively, if person is already an object, you could implement a fill() method to handle the array data accordingly.

Combining elements from a string array to create a hierarchical object in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting Angular JS Module Injection Issues

Use Ramda to convert an array of objects into nested objects

Quickly view products in Opencart will automatically close after adding them to the cart and redirecting the

Pagination with composite queries in Firestore allows for efficient retrieval of

Secure your data with public key encryption and decryption using the Crypto Module in NodeJS

Guide to dynamically insert rows in HTML using Vue.js based on the selected option

Preventing default behavior in a JQuery post request

Extracting information from a designated website using Python, including pages with search functionality and javascript features

Assign an event listener to a collection of elements

A comprehensive guide on organizing JavaScript files within an Angular project

Learn how to dynamically modify the text and color of a column value within a <v-data-table> component in Vue.js 2.6.11 and Vuetify 2.2.11 based on a specific condition

how to ensure a consistent property value across all scopes in AngularJS

Tips for using parsley on a dynamically loaded webpage

Ways to alter the typography style if the text exceeds a certain length

Code snippet in Java and JSON explaining the method to retrieve a specific element from a JSON object which includes an array of objects {[ {},{} ]}

What is the purpose of requiring the explicit invocation of app.listen(port) to enable express-ws to function properly?

Tips for modifying and refreshing data in a live table with JQuery

"Efficiently handle JSON and binary data passing with the enhanced functionality of Express Body Parser

Discovering the Nearest Point to the Mouse Cursor using Three JS Ray Casting

The collapsible section expands upon loading the page