Question

我正在使用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”相同级别的额外“功能”对象，

这需要为具有键“额外功能”的“ R8”和“ R6”对象添加

（因此，如果与汽车模型处于同一级别的“特征”对象，则应使用键“附加特征”将其移入汽车模型对象内）

因此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...

Answer 1

尝试类似的东西：

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"

使用angular2解析嵌套的JSON数据

1 个答案: