What is the process of transforming an object type into a two-dimensional array using lodash?

Question

What is the process of transforming an object type into a two-dimensional array using lodash?

In order to properly display multiple tables in my Angular project, I am looking to convert an object type into an array of different objects. The object I am working with is as follows:

let myObject = {
  internalValue:{city:"Paris", country:"France", pinCode:12345}, 
  originalValue:{city:"Nantes", country:"France", pinCode:34567}, 
  score:{city:10, country:100, pinCode:45}
};

The desired output array should look like this:

[
  [
    {detail:"Paris", label:"internalValue"},
    {detail:"Nantes", label:"originalValue"},
    {detail:10, label:"score"}
  ],
  [
    {detail:"France", label:"internalValue"},
    {detail:"France", label:"originalValue"},
    {detail:100, label:"score"}
  ],
  [
    {detail:12345, label:"internalValue"},
    {detail:34567, label:"originalValue"},
    {detail:45, label:"score"}
  ]
]

Currently, the code I have written for this transformation is as follows:

let tableData:any;
tableData = _.transform(myObject, result, value, key)=>{
  let retValue:any;
  _.forIn(value, (v,k)=> {
    let tempArr:Array<any>;
    let tempObj:any = {};
    tempObj.detail= v;
    tempObj.label=key;
    tempArr.push(tempObj);
    retValue.push(tempArr);
  })
  result = [...retValue];
  return result;
},[]);

I seem to be stuck when it comes to moving on to the next set of loops.

javascript angular typescript object lodash

Answer 1

Answer №1

There's no need for Lodash in this scenario. One can achieve the desired outcome by utilizing the Object.keys and Object.values methods to loop through the object properties.

To begin with, extract the necessary keys (city, country, pinCode) from the first object value and iterate over them. Here is an illustration:

let myObject = {
  internalValue:{city:"Paris", country:"France", pinCode:12345}, 
  originalValue:{city:"Nantes", country:"France", pinCode:34567}, 
  score:{city:10, country:100, pinCode:45}
};

let keys = Object.keys(myObject);
let values = Object.values(myObject);

let result = Object.keys(values[0]).map((_, i) => {
  return keys.map(key => {
    return {detail: myObject[key][Object.keys(values[0])[i]], label: key};
  });
});

console.log(result);

Answer 2

There's no need for Lodash in this scenario. One can achieve the desired outcome by utilizing the Object.keys and Object.values methods to loop through the object properties.

To begin with, extract the necessary keys (city, country, pinCode) from the first object value and iterate over them. Here is an illustration:

let myObject = {
  internalValue:{city:"Paris", country:"France", pinCode:12345}, 
  originalValue:{city:"Nantes", country:"France", pinCode:34567}, 
  score:{city:10, country:100, pinCode:45}
};

let keys = Object.keys(myObject);
let values = Object.values(myObject);

let result = Object.keys(values[0]).map((_, i) => {
  return keys.map(key => {
    return {detail: myObject[key][Object.keys(values[0])[i]], label: key};
  });
});

console.log(result);

Answer 3

Answer №2

Start by defining an array of keys that you want to extract (referred as 'fields' in this instance). Utilize the Object.entries() method on the original object to retrieve an array containing pairs of [key, value] (referred as 'entries' here). Proceed to map both the 'fields' and 'entries' arrays in order to generate a new array for each specified field:

const fields = ['city', 'country', 'pinCode'];

const extractFields = obj => {
  const entries = Object.entries(obj);

  return fields.map(field => 
    entries.map(([label, val]) => ({
      detail: val[field],
      label
    }))
  );
};

const myObject = {
  internalValue:{city:"Paris", country:"France", pinCode:12345}, 
  originalValue:{city:"Nantes", country:"France", pinCode:34567}, 
  score:{city:10, country:100, pinCode:45}
};

const extractedResult = extractFields(myObject);

console.log(extractedResult);

Answer 4

Start by defining an array of keys that you want to extract (referred as 'fields' in this instance). Utilize the Object.entries() method on the original object to retrieve an array containing pairs of [key, value] (referred as 'entries' here). Proceed to map both the 'fields' and 'entries' arrays in order to generate a new array for each specified field:

const fields = ['city', 'country', 'pinCode'];

const extractFields = obj => {
  const entries = Object.entries(obj);

  return fields.map(field => 
    entries.map(([label, val]) => ({
      detail: val[field],
      label
    }))
  );
};

const myObject = {
  internalValue:{city:"Paris", country:"France", pinCode:12345}, 
  originalValue:{city:"Nantes", country:"France", pinCode:34567}, 
  score:{city:10, country:100, pinCode:45}
};

const extractedResult = extractFields(myObject);

console.log(extractedResult);

Answer 5

Answer №3

Check out this example showcasing how lodash can be used:

let myData = {
  innerData:{city:"Tokyo", country:"Japan", pinCode:54321}, 
  originalData:{city:"Kyoto", country:"Japan", pinCode:76543}, 
  point:{city:15, country:50, pinCode:75}
};

const extractDetails = (data, keys = _.chain(data).values().map(_.keys).first().value()) => {
   // OR keys = Object.keys(Object.values(data)[0])

    return keys.map(key => {
        return _.chain(data)
        .mapValues(key)
        .map((detail, label) => ({ detail, label }))
        .value();
    });
};

const specifics = extractDetails(myData, ["city", "country", "pinCode"]);
console.log("specifics", specifics);

const general = extractDetails(myData);
console.log("general", general);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Answer 6

Check out this example showcasing how lodash can be used:

let myData = {
  innerData:{city:"Tokyo", country:"Japan", pinCode:54321}, 
  originalData:{city:"Kyoto", country:"Japan", pinCode:76543}, 
  point:{city:15, country:50, pinCode:75}
};

const extractDetails = (data, keys = _.chain(data).values().map(_.keys).first().value()) => {
   // OR keys = Object.keys(Object.values(data)[0])

    return keys.map(key => {
        return _.chain(data)
        .mapValues(key)
        .map((detail, label) => ({ detail, label }))
        .value();
    });
};

const specifics = extractDetails(myData, ["city", "country", "pinCode"]);
console.log("specifics", specifics);

const general = extractDetails(myData);
console.log("general", general);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

What is the process of transforming an object type into a two-dimensional array using lodash?

Answer №1

Answer №2

Answer №3

Similar questions

In Firefox, using the new Date function within a string does not function as expected

unable to use 'await' keyword to delay the code execution until a function finishes

Powering up your React components with MDX, Storybook, and Typescript!

Express JS encountering Firebase Google Sign-In glitch

Ways to retrieve parameters in getStaticPaths function?

What is preventing me from using AJAX to input data into sqlite?

Running various IT blocks within a Protractor loop to enhance web testing

Adding an id to a ul tag using JavaScript

Escape from an iframe with the help of a buster

Transforming text into numbers from JSON response with *ngFor in Angular 6

What is the most effective way to display a card with varying values depending on the user's input in a form?

I need to extract information from the database and save all entries from the form in order to send them to myself. This includes calculating the real-time multiplication of weight and pieces

VueJS component fails to properly sanitize the readme file, as discovered by Marked

Having trouble retrieving an object property in HTML or TypeScript within an Angular framework?

Ensuring the Persistence of Column State in Material-UI DataGrid/DataGridPro when Adjusting Visibility Using Column Toolbar

Is there a way to deactivate or dim a specific hour in an HTML time form?

Is it possible to animate multiple SVGs on a webpage with just the click of a button?

Displaying the chosen array in a Material UI Table within a React application does not show the desired checkboxes

Is it possible to adjust the timezone settings on my GraphQL timestamp data?

HTML5 database error: Uncaught TypeError due to illegal invocation