Question

我很难尝试对嵌套JSON执行ngFor。我已经读过ngFor应该只用于数组，但是有很多API可以抽出嵌套的JSON，我认为这必须是一种方法。

以下是我收到的JSON类别的示例-我正在简化它的含义：

{
  "Categories": {
    "candles": {
      "name": "Candle"
    },
    "oils": {
      "name": "Oil"
    },
    "chocolates": {
      "name": "Chocolates"
    },
    "toys": {
      "name": "Toys"
    }
  }
}

以下是http get的示例：

  this.http.get(this.jsonUriNestObj).subscribe(resultObj => {
  this.categoryObj = resultObj["Categories"];
  console.log(
    "resultObj['Categories']: ",
    JSON.stringify(resultObj["Categories"])
  );

这将是控制台中返回内容的一个示例：

resultObj['Categories']:  {"candles":{"name":"Candle"},"oils":{"name":"Oil"},"chocolates":{"name":"Chocolates"},"toys":{"name":"Toys"}}

以下是当前在选择中未显示任何选项，但同时零错误和零警告的内容：

<select id="categories" class="form-control">
  <option value="">Please select an item</option>
  <option
    *ngFor="let item of this.categoryObj.name; let i = index"
    value="{{ i }}"
    >{{ item }}</option
  >
</select>

我已经尝试过this.categoryObj [i]，this.categoryObj [i] ['name']等...

如何对嵌套的JSON进行操作-希望您可以提供动态解决方案。

像往常一样，在此先感谢您和您的新年快乐

Answer 1

您要遍历对象而不是数组，可以很容易地遍历array。

您可以使用pipe将对象转换为数组，也可以将json对象更改为array。

您需要一个易于迭代的新变量，以后可以像这样使用它

 name = 'Angular';
  categoryObj =  {"candles":{"name":"Candle"},"oils":{"name":"Oil"},"chocolates":{"name":"Chocolates"},"toys":{"name":"Toys"}}
  outputData: any;

  constructor(){
    this.outputData = Object.keys(this.categoryObj).reduce((prev,curr)=>{          
      prev.push(this.categoryObj[curr].name);
      return prev;
    },[])
  }

并在您看来

<select id="categories" class="form-control">
  <option value="">Please select an item</option>
  <option
    *ngFor="let item of this.outputData; let i = index"
    value="{{ i }}"
    >{{ item }}</option
  >
</select>

编辑： 当您要遍历数组内部的对象时，可以使用

 this.outputData = Object.keys(this.categoryObj).reduce((prev, curr) => {     
      prev.push(this.categoryObj[curr]);
      return prev;
    }, [])

这将为您提供对象数组

0: Object
name: "Candle"

1: Object
name: "Oil"

您可以像这样绑定它

<select id="categories" class="form-control">
  <option value="">Please select an item</option>
  <option
    *ngFor="let item of this.outputData; let i = index"
    value="{{ i }}"
    >{{ item.name }}</option
  >
</select>

Demo

Answer 2

您可以使用keyValue管道来迭代对象-我认为该管道可从6.1版本开始使用

尝试这样的事情

<select id="categories" class="form-control">
  <option value="">Please select an item</option>
  <option
    *ngFor="let item of this.categoryObj | keyvalue; let i = index"
    value="{{ item.key }}"
    >{{ item.value.name }}</option
  >
</select>

我认为这可能对您有所帮助-但请确保此pipe似乎是impure

有关更多信息，请检查this-新年快乐，编码愉快：）

Answer 3

声明一个变量以保存修订后的JSON列表：

list : any[] = [];

只需将您的get请求替换为：

this.http.get(this.jsonUriNestObj).subscribe(resultObj => {
    this.categoryObj = resultObj["Categories"];
    Object.keys(this.categoryObj).forEach(key => {
       this.list.push(this.categoryObj[key])
    })
});

HTML：

<select id="categories" class="form-control">
  <option value="">Please select an item</option>
  <option *ngFor="let item of list; let i = index" [value]="i">
      {{ item.name }}
  </option>
</select>

FORKED STACKBLITZ

Angular 6 ngFor嵌套JSON上的select对象

3 个答案: