Javascript .map() 数组对象

Question

我正在尝试

.map()

一个数组对象来为每个键/值对创建一个

div

。这是对象格式的示例：

const data = {
   year: ["2018", "2020"],
   make: ["Honda"],
   model: ["Accord", "Civic"],
   subModel: []
}

这是我所拥有的：

const filterChips = Object.entries(data)
        .flatMap(([key, value]) => [value].flat()
            .filter(v => v !== "" && v !== null)
            .map(v => [key, v]))
        .map(it => (<div>{it}</div>));

这给了我输出：

<div>year2018</div>
<div>year2020</div>
<div>makeHonda</div>
<div>modelAccord</div>
<div>modelCivic</div>

这几乎是我想要的，但我希望能够将每个div中的键/值分开，所以最后一行代码是：

.map(it => (<div>{it.key}: {it.value}</div>));

因此输出将是：

<div>year: 2018</div>
<div>year: 2020</div>
<div>make: Honda</div>
<div>model: Accord</div>
<div>model: Civic</div>

我觉得我已经很接近了，但是最后一部分......

Answer 1

const filterChips  = Object.entries(data).reduce<string[]>((acc, [key, value])=>{
  for(const v of value){
    acc.push((<div>${key}: ${v}</div>))
  }
return acc
}, [])