[英]From an array of objects, extract properties into multiple arrays (one per property)?
I have a JSON array of objects in JS that look something like this:我在 JS 中有一个 JSON 对象数组,如下所示:
"data": [
{"name": "abc", "location": "NY", "value": 1234, "potato": "tomato", "someOtherProp": "prop1"},
{"name": "def", "location": "CA", ... etc}
{etc ...},
]
I'm creating a UI for filtering down some of these fields and want to create an array for each attribute with all the given values in the data.我正在创建一个用于过滤其中一些字段的 UI,并希望为每个属性创建一个数组,其中包含数据中的所有给定值。
I know this is possible using something like this:我知道使用这样的方法是可能的:
let result = objArray.map(a => a.name);
But using this strategy, I have to run map once for every property.但是使用这种策略,我必须为每个属性运行一次 map。 Is there any way to only go through the array once but create a separate array for each?
有没有办法只遍历数组一次,但为每个数组创建一个单独的数组? (Or is there a better way in general for creating filter options for a UI?)
(或者有没有更好的方法来为 UI 创建过滤器选项?)
To clarify, for the array above, I'd want an array for "names" (containing "abc" and "def"), an array for "locations" (containing NY, CA, etc.) an array for "potato"s and "someOtherProp".为了澄清,对于上面的数组,我想要一个用于“名称”的数组(包含“abc”和“def”),一个用于“位置”的数组(包含 NY、CA 等)以及一个用于“土豆”的数组s 和“someOtherProp”。
I appreciate any help!我感谢任何帮助! Thanks
谢谢
Loop through the array with .reduce()
.使用
.reduce()
循环遍历数组。 In each iteration, loop through the keys of the object using Object.keys()
, adding any unique values to an array of the same name.在每次迭代中,使用
Object.keys()
遍历对象的键,将任何唯一值添加到同名数组中。
This solution eliminates duplicate entries and works with any amount of properties.此解决方案消除了重复条目并适用于任意数量的属性。
const data = [{name: "abc", location: "NY"},{name: "def", location: "CA"},{name: "xyz", location: "TX"},{name: "zyx", location: "TX"}]; const getFiltersFromData = (data) => { return data.reduce((out,obj) => { Object.keys(obj).forEach(k => { if (out[k] === undefined) out[k] = [obj[k]]; //Array doesn't exist yet - instantiate it else if (!out[k].includes(obj[k])) out[k].push(obj[k]); //Array exists and this value isn't in it - add the value to it }); return out; }, {}); }; const filters = getFiltersFromData(data); console.log(filters.name); console.log(filters.location);
.as-console-wrapper, .as-console { height: 100% !important; max-height: 100% !important; top: 0; }
You could create the separate arrays from names, locations and values and then use map on the data array to push each attribute value to the arrays.您可以根据名称、位置和值创建单独的数组,然后在数据数组上使用 map 将每个属性值推送到数组。 You can do that vs. running map multiple times for each property:
您可以这样做,而不是为每个属性多次运行地图:
var names = [];
var locations = [];
var values = [];
data.map((elt) => {
names.push(elt.name);
locations.push(elt.location);
values.push(elt.value);
});
Try with Object.entries尝试使用Object.entries
You can get something like this:你可以得到这样的东西:
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.