英文:
How to combine multiple arrays into single array using Typescript. Also display the combined array in accordions
问题
我正在尝试将多个数组数据显示在手风琴中,将它们合并成一个单一数组。
我有一个包含不同数组的对象,如下所示:
水果:Array(4),
树木:Array(3),
蔬菜:Array(2),...等等。
我想将所有这些数组都推入一个数组中,并在单独的手风琴中显示它们。
在合并数组之前:
{
水果:[{label:'苹果',text:'红色'},{label:'芒果',text:'黄色'},{label:'橙子',text:'橙色'},{label:'葡萄',text:'黑色'}]
树木:[{label:'枫树',text:'橙叶'},{label:'红花树',text:'粉叶'},{label:'松树',text:'绿叶'}]
蔬菜:[{label:'番茄',text:'红色'},{label:'南瓜',text:'黄色'},{label:'胡萝卜',text:'橙色'},{label:'洋葱',text:'红色'}]
}
我想使用Typescript将上述数组合并成一个单一数组,并在手风琴中显示它们。
[
{label:水果,values:[{label:'苹果',text:'红色'},{label:'芒果',text:'黄色'},{label:'橙子',text:'橙色'},{label:'葡萄',text:'黑色'}]},
{label:树木,values:[{label:'枫树',text:'橙叶'},{label:'红花树',text:'粉叶'},{label:'松树',text:'绿叶'}]},
{label:蔬菜,values:[{label:'番茄',text:'红色'},{label:'南瓜',text:'黄色'},{label:'胡萝卜',text:'橙色'},{label:'洋葱',text:'红色'}]}
]
在合并它们之后,在手风琴中显示它们。请查看以下链接的图像:
英文:
I am trying to display multiple arrays data in accordions by combining them into single array.
I have an object which contains different arrays like
Fruits: Array(4),
Trees:Array(3),
Vegetables:Array(2),…etc.
I want to push all these arrays into one array and display them in separate accordions.
Before Combine Array:
{
Fruits: [{label:’Apple’, text:’Red Color’},{label:’Mango’, text:’Yellow Color’},{label:’Orange’, text:’Orange Color’},{label:’Grap’, text:’Black Color’}]
Trees: [{label:’Maple Tree’, text:’Orange Leafs’},{label:’Redbud Tree’, text:’Pink Leafs’},{label:’Pine’, text:Green Leafs’}]
Vegetables: [{label:’Tomato’, text:’Red Color’},{label:’PumpKin’, text:’Yellow Color’},{label:’Carrot’, text:’Orange Color’},{label:’Onion’, text:’Red Color’}]
}
I want to combine above arrays into one single array as below by using Typescript and display them in accordion.
[
{label:Fruits, values:[ {label:’Apple’, text:’Red Color’},{label:’Mango’, text:’Yellow Color’},
{label:’Orange’, text:’Orange Color’},{label:’Grap’, text:’Black Color’}]},
{label:Trees, values:[{label:’Maple Tree’, text:’Orange Leafs’},{label:’Redbud Tree’, text:’Pink Leafs’},{label:’Pine’, text:Green Leafs’}]},
{label:Vegetables, values:[{label:’Tomato’, text:’Red Color’},{label:’PumpKin’, text:’Yellow Color’},{label:’Carrot’, text:’Orange Color’},{label:’Onion’, text:’Red Color’}]}
]
After combining them. Dispaly them in accordions. Please check the link for Image
enter image description here
答案1
得分: 0
Object.entries(obj).map(([key, value]) => ({ label: key, values: value }))
这行代码可以实现您的需求。它会将原始对象中的每个键值对转换成一个对象数组,其中每个 "label" 对应键,每个 "values" 对应键值对中的值部分。
完整示例:
const obj = {
Fruits: [{ label: "Apple", text: "Red Color" }, { label: "Mango", text: "Yellow Color" }, { label: "Orange", text: "Orange Color" }, { label: "Grap", text: "Black Color" }],
Trees: [{ label: "Maple Tree", text: "Orange Leafs" }, { label: "Redbud Tree", text: "Pink Leafs" }, { label: "Pine", text: "Green Leafs" }],
Vegetables: [{ label: "Tomato", text: "Red Color" }, { label: "PumpKin", text: "Yellow Color" }, { label: "Carrot", text: "Orange Color" }, { label: "Onion", text: "Red Color" }]
}
const formattedArr = Object.entries(obj).map(([key, value]) => ({ label: key, values: value }))
在我的 NodeJS 控制台上运行的结果如下:
[
{
label: 'Fruits',
values: [ [Object], [Object], [Object], [Object] ]
},
{ label: 'Trees', values: [ [Object], [Object], [Object] ] },
{
label: 'Vegetables',
values: [ [Object], [Object], [Object], [Object] ]
}
]
formattedArr[0].values 的结果如下:
[
{ label: 'Apple', text: 'Red Color' },
{ label: 'Mango', text: 'Yellow Color' },
{ label: 'Orange', text: 'Orange Color' },
{ label: 'Grap', text: 'Black Color' }
]
现在您只需将数组映射到您的折叠面板(accordion),这是一个简单的 HTML 和 TypeScript 任务。
英文:
Object.entries(obj).map(([key, value]) => ({ label: key, values: value }))
Should do the trick. This takes your original object, and get each key:value pair, map them to an array of objects where each "label" is the key and each "values" is the value part of the pair.
The full example:
const obj = {
Fruits: [{ label: "Apple", text: "Red Color" }, { label: "Mango", text: "Yellow Color" }, { label: "Orange", text: "Orange Color" }, { label: "Grap", text: "Black Color" }],
Trees: [{ label: "Maple Tree", text: "Orange Leafs" }, { label: "Redbud Tree", text: "Pink Leafs" }, { label: "Pine", text: "Green Leafs" }],
Vegetables: [{ label: "Tomato", text: "Red Color" }, { label: "PumpKin", text: "Yellow Color" }, { label: "Carrot", text: "Orange Color" }, { label: "Onion", text: "Red Color" }]
}
const formattedArr = Object.entries(obj).map(([key, value]) => ({ label: key, values: value }))
Result being on my NodeJS console:
[
{
label: 'Fruits',
values: [ [Object], [Object], [Object], [Object] ]
},
{ label: 'Trees', values: [ [Object], [Object], [Object] ] },
{
label: 'Vegetables',
values: [ [Object], [Object], [Object], [Object] ]
}
]
The result of formattedArr[0].values being:
[
{ label: 'Apple', text: 'Red Color' },
{ label: 'Mango', text: 'Yellow Color' },
{ label: 'Orange', text: 'Orange Color' },
{ label: 'Grap', text: 'Black Color' }
]
Now you just have to map the array to your accordion, simple html and ts job
答案2
得分: 0
使用对象entries
和map
,您可以迭代JSON对象中的键和值对,并转换数据以适应您的手风琴。
// 在转换之前的对象
var obj = {
Fruits: [{ label: "Apple", text: "Red Color" }, { label: "Mango", text: "Yellow Color" }, { label: "Orange", text: "Orange Color" }, { label: "Grap", text: "Black Color" }],
Trees: [{ label: "Maple Tree", text: "Orange Leafs" }, { label: "Redbud Tree", text: "Pink Leafs" }, { label: "Pine", text: "Green Leafs" }],
Vegetables: [{ label: "Tomato", text: "Red Color" }, { label: "PumpKin", text: "Yellow Color" }, { label: "Carrot", text: "Orange Color" }, { label: "Onion", text: "Red Color" }]
}
var accordionDisplay = Object.entries(obj).map(([key, value]) => ({ label: key, values: value }))
console.log(accordionDisplay)
注意:我已经将"accodianDisplay"更正为"accordionDisplay",以正确拼写。
英文:
Using object entries
along with map
you can iterate over the key and value pairs in your JSON object and transform data in order to fit your accordion.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// Your object before transforming
var obj = {
Fruits: [{ label: "Apple", text: "Red Color" }, { label: "Mango", text: "Yellow Color" }, { label: "Orange", text: "Orange Color" }, { label: "Grap", text: "Black Color" }],
Trees: [{ label: "Maple Tree", text: "Orange Leafs" }, { label: "Redbud Tree", text: "Pink Leafs" }, { label: "Pine", text: "Green Leafs" }],
Vegetables: [{ label: "Tomato", text: "Red Color" }, { label: "PumpKin", text: "Yellow Color" }, { label: "Carrot", text: "Orange Color" }, { label: "Onion", text: "Red Color" }]
}
var accodianDisplay = Object.entries(obj).map(([key, value]) => ({ label: key, values: value }))
console.log(accodianDisplay)
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论