.map array by its objects keys then .map 每个键的值
.map array by its objects keys then .map each key for values
如果我有一个像这样的对象数组:
[{"name":"chair","type":"metal"},{"name":"chair","type":"wood"},{"name":"table","type":"plastic"},...]
我怎样才能映射它 returns:
<h3>chair</h3>
metal
wood
<h3>table</h3>
plastic
ecc.
我试过的是:
return (
<>
{Object.values(myarray.reduce( (c, e) => {
if (!c[e.name]) c[e.name] = e;
return c;
}, {})).map((title, index) => (
<div key={index}>
<h3>{title}</h3>
{myarray.filter(one => one.name === title)
.map((item, i) => (
<div key={i}>{item.type}</div>
))}
</div>
))}
</>
)
但它抛出
Error: Objects are not valid as a React child (found: object with keys
{name, type}). If you meant to render a collection of children, use an
array instead.
这是分组的简单逻辑
var data= [{"name":"chair","type":"metal"},{"name":"chair","type":"wood"},{"name":"table","type":"plastic"}]
var groupBy = (xs, f) => {
return xs.reduce((r, v, i, a, k = f(v)) => ((r[k] || (r[k] = [])).push(v), r), {});
};
var groupData = groupBy(data, (d) => d.name);
$.each(groupData,function(key,val){
$('#pnlData').append("<h3>"+key+"</h3>")
$.each(val,function(skey,sval){
$('#pnlData').append("<span>"+sval.type+"</span> <br/>")
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pnlData"> </div>
这是一个示例代码
const a = [{"name":"chair","type":"metal"},{"name":"chair","type":"wood"},{"name":"table","type":"plastic"}];
const b = {};
a.map(row => {
b[row.name] = b[row.name] || []
b[row.name].push(row.type)
})
console.log(b) // you can check results here...
// result: {"chair":["metal","wood"],"table":["plastic"]}
Reduce是你需要的功能:
const things = [{name: 'chair', type: 'metal'}, ...]
things.reduce((a, _) => {
a[_.name] = a[_.name] || [] // make array for this thing
a[_.name].indexOf(_.type) < 0 && a[_.name].push(_.type) // add type if not already present
return a
}, {})
您可以使用reduce
函数按名称对所有条目进行分组。然后你可以使用 Object.keys
或 Object.values
来获取条目名称或类型。
array.reduce((reducer, current) => {
if (!reducer[current.name]) {
reducer[current.name] = [];
}
reducer[current.name].push(current.type);
return reducer;
}, {})
// result : { chair: ["wood", "metal"], table: ["plastic"] }
如果可能更改数据 structure/array 对象。我认为如果它看起来像这样会更容易。您的新数组:
const myArray = [
{
"name":"chair",
"types":["metal", "wood"]
},
{
"name":"table",
"types":["plastic"]
}
]
//in your ui code would be
myArray.map(item => {
return <div>
<h3>item.name</h3>
{item.types.map(type => <div>{type}</div>)}
</div>
})
您可以将数据数组简化为一个对象,然后使用该对象进行渲染。
// reducer
let data = [
{ name: "chair", type: "metal" },
{ name: "chair", type: "wood" },
{ name: "table", type: "plastic" }
];
let data2 = data.reduce((xuu, val) => {
xuu[val.name] = xuu[val.name] || [];
xuu[val.name].push(val.type);
return xuu;
}, {});
// render
{Object.keys(data2).map((key, index1) => {
return (
<div key={index1}>
<h3>{key}</h3>
{data2[key].map((val, index2) => {
return <div key={index2}>{val}</div>;
})}
</div>
);
})}
你可以玩玩 my sandbox
如果我有一个像这样的对象数组:
[{"name":"chair","type":"metal"},{"name":"chair","type":"wood"},{"name":"table","type":"plastic"},...]
我怎样才能映射它 returns:
<h3>chair</h3>
metal
wood
<h3>table</h3>
plastic
ecc.
我试过的是:
return (
<>
{Object.values(myarray.reduce( (c, e) => {
if (!c[e.name]) c[e.name] = e;
return c;
}, {})).map((title, index) => (
<div key={index}>
<h3>{title}</h3>
{myarray.filter(one => one.name === title)
.map((item, i) => (
<div key={i}>{item.type}</div>
))}
</div>
))}
</>
)
但它抛出
Error: Objects are not valid as a React child (found: object with keys {name, type}). If you meant to render a collection of children, use an array instead.
这是分组的简单逻辑
var data= [{"name":"chair","type":"metal"},{"name":"chair","type":"wood"},{"name":"table","type":"plastic"}]
var groupBy = (xs, f) => {
return xs.reduce((r, v, i, a, k = f(v)) => ((r[k] || (r[k] = [])).push(v), r), {});
};
var groupData = groupBy(data, (d) => d.name);
$.each(groupData,function(key,val){
$('#pnlData').append("<h3>"+key+"</h3>")
$.each(val,function(skey,sval){
$('#pnlData').append("<span>"+sval.type+"</span> <br/>")
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pnlData"> </div>
这是一个示例代码
const a = [{"name":"chair","type":"metal"},{"name":"chair","type":"wood"},{"name":"table","type":"plastic"}];
const b = {};
a.map(row => {
b[row.name] = b[row.name] || []
b[row.name].push(row.type)
})
console.log(b) // you can check results here...
// result: {"chair":["metal","wood"],"table":["plastic"]}
Reduce是你需要的功能:
const things = [{name: 'chair', type: 'metal'}, ...]
things.reduce((a, _) => {
a[_.name] = a[_.name] || [] // make array for this thing
a[_.name].indexOf(_.type) < 0 && a[_.name].push(_.type) // add type if not already present
return a
}, {})
您可以使用reduce
函数按名称对所有条目进行分组。然后你可以使用 Object.keys
或 Object.values
来获取条目名称或类型。
array.reduce((reducer, current) => {
if (!reducer[current.name]) {
reducer[current.name] = [];
}
reducer[current.name].push(current.type);
return reducer;
}, {})
// result : { chair: ["wood", "metal"], table: ["plastic"] }
如果可能更改数据 structure/array 对象。我认为如果它看起来像这样会更容易。您的新数组:
const myArray = [
{
"name":"chair",
"types":["metal", "wood"]
},
{
"name":"table",
"types":["plastic"]
}
]
//in your ui code would be
myArray.map(item => {
return <div>
<h3>item.name</h3>
{item.types.map(type => <div>{type}</div>)}
</div>
})
您可以将数据数组简化为一个对象,然后使用该对象进行渲染。
// reducer
let data = [
{ name: "chair", type: "metal" },
{ name: "chair", type: "wood" },
{ name: "table", type: "plastic" }
];
let data2 = data.reduce((xuu, val) => {
xuu[val.name] = xuu[val.name] || [];
xuu[val.name].push(val.type);
return xuu;
}, {});
// render
{Object.keys(data2).map((key, index1) => {
return (
<div key={index1}>
<h3>{key}</h3>
{data2[key].map((val, index2) => {
return <div key={index2}>{val}</div>;
})}
</div>
);
})}
你可以玩玩 my sandbox