用angular2解析嵌套的JSON数据
用angular2解析嵌套的JSON数据
提问于 2019-01-29 07:05:09
我正在使用Angular5，并从一个类似如下的API中接收一些JSON数据。
{
Cars: {
BMW: {
M3: {
description: 'BMW M3 car description'
features: [
{
name: 'feature name',
description: 'feature description'
}
]
},
M4: {
description: 'BMW M4 car description'
features: [
{
name: 'feature name',
description: 'feature description'
}
]
}
},
Audi: {
features: [
{
name: 'extra feature 1',
description: 'extra feature 1 description'
}
],
R8: {
description: 'Audi R8 car description'
features: [
{
name: 'feature name',
description: 'feature description'
}
]
},
R6: {
description: 'Audi R6 car description'
features: [...]
}
}
...
}
}现在，我需要将其呈现在模板中的结构中，例如：
M3
features...
M4
features...
R8
features...
R6
features...但问题是这些汽车模型对象(M3、M4、R8…)是作为对象内部的对象提供的(而不是我可以用简单的ngFor轻松遍历的对象数组)。
此外，在'Audi‘对象中，您会注意到在与'R8’和'R6‘相同的级别上有一个额外的"features“对象，
这需要为'R8‘和'R6’对象添加关键的"extra-features“
(因此，如果存在与汽车模型处于同一级别的'features‘对象，则应将其移动到汽车模型对象中，并带有关键的“额外功能”)
因此，Audi对象最终应该如下所示：
Audi: {
R8: {
description: 'Audi R8 car description'
features: [
{
name: 'feature name',
description: 'feature description'
}
],
extra-features: [
{
name: 'extra feature 1',
description: 'extra feature 1 description'
}
]
},
R6: {
description: 'Audi R6 car description'
features: [...],
extra-features: [
{
name: 'extra feature 1',
description: 'extra feature 1 description'
}
]
}
}在模板中呈现的最终结果如下所示：
M3
features...
M4
features...
R8
features...
extra-features...
R6
features...
extra-features...回答 1
Stack Overflow用户
发布于 2019-01-29 07:27:08
尝试如下所示：
const cars;
myCars = YourJsonData;
myCars.forEach((car, index, self) => {
cars.push(index);
car.forEach((model, indexM, self) {
cars[index].push(indexM);
model.forEach((feat, indexF, self) {
cars[index][indexM].push([indexF => indexF.value]);
});
});
});可以优化，但使用JS不是很好。
在模板中类似于：
*ngFor="let car in cars"
*ngIf="car.features"
*ngIf="car.extra-features"页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54411572
复制相关文章
相似问题
腾讯云开发者
