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

Can you provide me the steps to delete the title attribute from images in Wordpress?

A valid ReactComponent must be returned in order to properly render in React. Avoid returning undefined, an array, or any other invalid object

What is the method for configuring the URL of an ajax request to open in a separate window?

What could be causing the error where axios.get is not functioning properly?

Drawing images on a Canvas using specified coordinates: A step-by-step guide

I could really use some assistance with this script I'm working on that involves using ($

How does the 'this' variable function when it comes to models in embedded documents?

A guide on verifying a username and password via URL using JavaScript

Trouble with basic JavaScript functionality in a React component

Trouble passing data back to main window after clicking ng-modal button in Angular

Importing ReactDOM alone does not result in the rendering of anything

Access the extended controller and call the core controller function without directly interacting with the core controller

URL for image preview on Amazon S3

Utilizing node-json2html, generate individual HTML tables for each record

What is the best way to link labels with input fields located separately in Angular?

Tips for customizing the appearance of a mat-select chosen item?

It is not possible to execute an injectable function using a service instance, as the parameter value consistently stays as null

Tips for distinguishing a mapped type using Pick from the original type when every property is optional

Embedding a YouTube video in a view player using HTML5

Eliminating unique phrases from text fields or content sections with the help of jQuery or JavaScript