ngДля многомерного объекта JSON - PullRequest
Новая
       16

ngДля многомерного объекта JSON

2 голосов
/ 28 октября 2019

У меня есть угловое приложение, которое вызывает внешний API, который возвращает строку JSON продуктов.

productService делает простой вызов API: 

getProducts() {
    return this.http.get(this.apiUrl + '/getProducts', this.config)
}

Мой компонент подписывается на данныев переменную: 

AllProducts: Object;
ProductGroups: Object;

constructor(private _product: ProductService) {}

ngOnInit() {
    this._product.getProducts().subscribe(data = > {
        this.AllProducts = data;
        this.ProductGroups = Object.keys(data);
        console.log("Got Products");
        console.log(this.AllProducts);
        console.log(this.ProductGroups);
    })
}

Строка Json выглядит следующим образом: 

{\"Product1\": {\"P1-1\": {\"productType\": \"Test\", \"productStatus\": \"In Stock\", \"productTitle\": \"Product1 Test Product\", \"productDescription\": \"First test product1\"}}, \"Product2\": {\"P2-1\": {\"productType\": \"Test\", \"productStatus\": \"In Stock\", \"productTitle\": \"Product2 test product 1\", \"productDescription\": \"The first product of group 2\"}, \"P2-2\": {\"productType\": \"Test\", \"productStatus\": \"Out of Stock\", \"productTitle\": \"Product2 test product 2\", \"productDescription\": \"Second product of group 2\"}}}

Вывод консоли браузера для AllProducts выглядит следующим образом: 

Object {
Product1: Object {
"P1-1": Object { productType: "Test"
 ...

Мой HTMLиспользует вложенные *ngFor s, чтобы попытаться отобразить что-либо на странице: 

<div *ngfor='let productGroup of ProductGroups'>
   <h2>{{productGroup}}</h2>
   <ul>
      <li *ngfor="let item of AllProducts['productGroup']">
         {{item}}
      </li>
   </ul>
</div>

<h2> правильно отображает названия групп продуктов, но я не смог перечислить какие-либо сведения о продукте.

Редактировать:

У меня также есть контроль над API, если легче настроить строку JSON.

Следует также упомянуть, что в настоящее время она работает на Angular 6.0.0и я пока не смог заставить его работать на 6.1.0 или любой другой версии.

1 Ответ

3 голосов
/ 28 октября 2019

Вы можете использовать KeyValuePipe (доступно в угловой версии 6.1) для этого: 

<div *ngFor='let productGroup of AllProducts | keyvalue'>
    <h2>{{productGroup.key}}</h2>
    <ul>
      <li *ngFor="let item of productGroup.value | keyvalue">
        {{item.key}}
         <ul>
            <li *ngFor="let innerItem of item.value | keyvalue">
                  {{innerItem.key}}: {{innerItem.value}}
            </li>
         </ul>
      </li>
    </ul>
  </div>
...