How to combine multiple arrays into single array using Typescript. Also display the combined array in accordions

huangapple go评论73阅读模式
英文:

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

使用对象entriesmap,您可以迭代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]) =&gt; ({ label: key, values: value }))

console.log(accodianDisplay) 

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月17日 20:59:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/76704744.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定