Convert items to an array utilizing lodash

Question

Convert items to an array utilizing lodash

I need assistance converting an object into an array format. Here is the input object:

{
  "index": {
    "0": 40,
    "1": 242
  },
  "TID": {
    "0": "11",
    "1": "22"
  },
  "DepartureCity": {
    "0": "MCI",
    "1": "CVG"
  },
  "ArrivalCity": {
    "0": "SFB",
    "1": "LAS"
  },
  "Price": {
    "0": 90,
    "1": 98
  }
}

The desired output should look like this:

[
  {
    "index": 40,
    "TID": "11",
    "DepartureCity": "MCI",
    "ArrivalCity": "SFB",
    "Price": 90
  },
  {
    "index": 242,
    "TID": "22",
    "DepartureCity": "CVG",
    "ArrivalCity": "LAS",
    "Price": 98
  }
]

I attempted to use for loops, but it became quite complicated. Any help on simplifying this process would be greatly appreciated.

javascript arrays object underscore.js lodash

Answer 1

Answer №1

Check out this innovative solution using the lodash library

_.merge([], ..._.map(obj, (v, k) => _.mapValues(v, ev=> ({[k]:ev}))))

let inputObj = {
  "index": {
    "0": 40,
    "1": 242
  },
  "TID": {
    "0": "11",
    "1": "22"
  },
  "DepartureCity": {
    "0": "MCI",
    "1": "CVG"
  },
  "ArrivalCity": {
    "0": "SFB",
    "1": "LAS"
  },
  "Price": {
    "0": 90,
    "1": 98
  }
};

let res = _.merge([], ..._.map(inputObj, (v, k) => _.mapValues(v, ev=> ({[k] :ev}))));

console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

Answer 2

Check out this innovative solution using the lodash library

_.merge([], ..._.map(obj, (v, k) => _.mapValues(v, ev=> ({[k]:ev}))))

let inputObj = {
  "index": {
    "0": 40,
    "1": 242
  },
  "TID": {
    "0": "11",
    "1": "22"
  },
  "DepartureCity": {
    "0": "MCI",
    "1": "CVG"
  },
  "ArrivalCity": {
    "0": "SFB",
    "1": "LAS"
  },
  "Price": {
    "0": 90,
    "1": 98
  }
};

let res = _.merge([], ..._.map(inputObj, (v, k) => _.mapValues(v, ev=> ({[k] :ev}))));

console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

Answer 3

Answer №2

Utilize the reduce method to transform the entries into an array of objects by iterating through each value of the inner objects:

const data={"id":{"0":30,"1":215},"RoomType":{"0":"Standard","1":"Suite"},"Occupancy":{"0":2,"1":4},"Price":{"0":120,"1":250}}

const result = Object.entries(data).reduce((acc, [key, obj]) => {
  Object.values(obj).forEach((value, index) => {
    if (!acc[index]) acc[index] = {};
    acc[index][key] = value;
  });
  return acc;
}, []);
console.log(result);

Answer 4

Utilize the reduce method to transform the entries into an array of objects by iterating through each value of the inner objects:

const data={"id":{"0":30,"1":215},"RoomType":{"0":"Standard","1":"Suite"},"Occupancy":{"0":2,"1":4},"Price":{"0":120,"1":250}}

const result = Object.entries(data).reduce((acc, [key, obj]) => {
  Object.values(obj).forEach((value, index) => {
    if (!acc[index]) acc[index] = {};
    acc[index][key] = value;
  });
  return acc;
}, []);
console.log(result);

Answer 5

Answer №3

To optimize your code, try using Object.keys along with the method reduce

let data = { "key": { "0": 40, "1": 242 }, "ID": { "0": "11", "1": "22" }, "StartCity": { "0": "MCI", "1": "CVG" }, "DestinationCity": { "0": "SFB", "1": "LAS" }, "Cost": { "0": 90, "1": 98 } }

result = Object.keys(data['key']).map(function(index){
  return Object.keys(data).reduce(function(obj, item){
    obj[item] = data[item][index];
    return obj;
  }, {});
});
console.log(result);

Answer 6

To optimize your code, try using Object.keys along with the method reduce

let data = { "key": { "0": 40, "1": 242 }, "ID": { "0": "11", "1": "22" }, "StartCity": { "0": "MCI", "1": "CVG" }, "DestinationCity": { "0": "SFB", "1": "LAS" }, "Cost": { "0": 90, "1": 98 } }

result = Object.keys(data['key']).map(function(index){
  return Object.keys(data).reduce(function(obj, item){
    obj[item] = data[item][index];
    return obj;
  }, {});
});
console.log(result);

Answer 7

Answer №4

One way to organize the inner values is by mapping them to their corresponding index.

var data = { index: { 0: 40, 1: 242 }, TID: { 0: "11", 1: "22" }, DepartureCity: { 0: "MCI", 1: "CVG" }, ArrivalCity: { 0: "SFB", 1: "LAS" }, Price: { 0: 90, 1: 98 } },
    result = Object
        .entries(data)
        .reduce(
            (r, [k, o]) => Object
                .entries(o)
                .map(([i, v]) => Object.assign(r[i] || {}, { [k]: v })),
            []
        );

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 8

One way to organize the inner values is by mapping them to their corresponding index.

var data = { index: { 0: 40, 1: 242 }, TID: { 0: "11", 1: "22" }, DepartureCity: { 0: "MCI", 1: "CVG" }, ArrivalCity: { 0: "SFB", 1: "LAS" }, Price: { 0: 90, 1: 98 } },
    result = Object
        .entries(data)
        .reduce(
            (r, [k, o]) => Object
                .entries(o)
                .map(([i, v]) => Object.assign(r[i] || {}, { [k]: v })),
            []
        );

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 9

Answer №5

Utilizing the power of lodash, you can easily achieve the desired result by employing the _.reduce() and _.forEach() methods in the following manner:

const outcome = _.reduce(Object.entries(object), function(a, [key, obj]){
  _.forEach(Object.values(obj), function(val, i){
    if (!a[i]) a[i] = {};
    a[i][key] = val;
  });
  return a;
}, []);

Check out this demonstration:

const object = {
  "index": {
    "0": 40,
    "1": 242
  },
  "TID": {
    "0": "11",
    "1": "22"
  },
  "DepartureCity": {
    "0": "MCI",
    "1": "CVG"
  },
  "ArrivalCity": {
    "0": "SFB",
    "1": "LAS"
  },
  "Price": {
    "0": 90,
    "1": 98
  }
};

const outcome = _.reduce(Object.entries(object), function(a, [key, obj]){
  _.forEach(Object.values(obj), function(val, i){
    if (!a[i]) a[i] = {};
    a[i][key] = val;
  });
  return a;
}, []);

console.log(outcome);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.core.js"></script>

Answer 10

Utilizing the power of lodash, you can easily achieve the desired result by employing the _.reduce() and _.forEach() methods in the following manner:

const outcome = _.reduce(Object.entries(object), function(a, [key, obj]){
  _.forEach(Object.values(obj), function(val, i){
    if (!a[i]) a[i] = {};
    a[i][key] = val;
  });
  return a;
}, []);

Check out this demonstration:

const object = {
  "index": {
    "0": 40,
    "1": 242
  },
  "TID": {
    "0": "11",
    "1": "22"
  },
  "DepartureCity": {
    "0": "MCI",
    "1": "CVG"
  },
  "ArrivalCity": {
    "0": "SFB",
    "1": "LAS"
  },
  "Price": {
    "0": 90,
    "1": 98
  }
};

const outcome = _.reduce(Object.entries(object), function(a, [key, obj]){
  _.forEach(Object.values(obj), function(val, i){
    if (!a[i]) a[i] = {};
    a[i][key] = val;
  });
  return a;
}, []);

console.log(outcome);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.core.js"></script>

Convert items to an array utilizing lodash

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Validate if a string in JQuery contains a specific substring

Try utilizing a variety of background hues for uib progressbars

Marionette's Take on the Undead: Zombie Perspectives

What is the best method for extracting html-string from html-string across different browsers?

Error: We are facing an issue with new.mongoose.Schema as it is not functioning properly and

Experiencing a problem with value formatting while attempting to implement tremor for charts in React with Next.js version 13

Enhancing the session helper in Silex with additional values

The div smoothly descended from the top of the page to the center under the control of jQuery

Connecting an admin dashboard to a MERN e-commerce application: A step-by-step guide

React App folders are not being properly installed through NPX

The Javascript function is malfunctioning, unable to assign the 'onclick' property to null

Unable to sort the list items when utilizing the load() function

How can I retrieve the path to a specific subnode using Javascript/JSON?

What are some ways I can efficiently load large background images on my website, either through lazy loading or pre

How can I make the input box TextField in Material UI with React expand to full width when selected?

Modify content or display picture within accordion panel based on its identifier

What is the most effective method for synchronizing data with HTML5 video playback?

Encountering a TypeError while trying to import grapesjs into a nextjs project, specifically receiving the error: "Cannot read properties of null (reading 'querySelector')

Step-by-step guide for properly transferring PHP MySQL data to ChartJs

Mastering the ng-submit directive for AngularJS