用于嵌套JSON上的select对象的Angular 6

我很难尝试在嵌套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>

请选择一个项目
{{item}}

我试过这个。categoryObj[I]，这个。categoryObj[I]['name']等等

如何使用嵌套JSON？希望您能提供一个动态解决方案

---

像往常一样，提前感谢您和您的家人并祝他们新年快乐

您正在迭代对象而不是数组，数组可以轻松迭代

您可以使用

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.name }}</option
  >
</select>

<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>

在你看来

<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>    

这将为您提供一个对象数组

0: Object
name: "Candle"

1: Object
name: "Oil"

你可以像这样把它绑起来

 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.name }}</option
  >
</select>

<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>

请选择一个项目
{{item.name}

---

声明一个变量来保存修订后的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:

请选择一个项目
{{item.name}

---

您可以使用

keyValue

管道来迭代对象-我认为angular 6.1中提供了该管道

试试这样的

 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.name }}</option
  >
</select>

<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>

请选择一个项目
{{item.value.name}

我想这可能会对你有所帮助，但要确保这条

管道

看起来是

不纯净的

---

有关更多信息，请查看-新年快乐和快乐编码：）

感谢您的回复和新年快乐。我放置了console.log（“this.categoryObj[curr].name:”，this.categoryObj[curr].name）；就在prev.push的下面和return的上面，但是控制台中没有显示任何内容，下拉列表中也没有任何项目-这是因为它在闭包中吗？同样，当我使用调试器时；我收到一条警告-使用调试器语句是错误的forbidden@kronus检查我的演示链接，你会明白它是如何工作的，第二个调试器只适合我，你可以删除它。这将返回要绑定到select中的数组。是的，祝你新年快乐。是的，我刚刚经历过。因此，我尝试了这个.categoryObj[“Categories”]，它在控制台中显示以下内容，这就是我想要的-this.categoryObj:{…}​ 蜡烛：对象{name:“蜡烛”}​ 巧克力：对象{名称：“巧克力”}​ 油：对象{name:“油”}​ 玩具：对象{name:“玩具”}-但是，当我使用下拉菜单访问组件时，它崩溃了，没有特定的错误-错误：“[Object Object]”core.js：1673@kronus检查我的编辑，您在对象中有对象，您需要将该对象转换为数组以使其迭代，尝试理解我的代码，然后实现它。同时检查您的输出演示。