Угловой 6 нгДля выбора объекта на вложенном JSON - PullRequest
Новая
       18

Угловой 6 нгДля выбора объекта на вложенном JSON

0 голосов
/ 01 января 2019

Мне трудно сделать ngFor для вложенного JSON.Я читал, что 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, но в то же время ноль ошибок и ноль предупреждений: 

<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'] и т. Д. *

Как мне ng для вложенного JSON - надеюсь, вы можете предложитьдинамическое решение.

Как обычно, заранее спасибо и с наступающим новым годом вам и вашим

Ответы [ 3 ]

0 голосов
/ 01 января 2019

Объявите одну переменную для хранения пересмотренного списка JSON: 

list : any[] = [];

Просто замените ваш запрос на получение следующим: 

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

0 голосов
/ 01 января 2019

Вы можете использовать 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 - С новым годом и счастливым кодированием:)

0 голосов
/ 01 января 2019

Вы перебираете объект, а не массив, массив можно легко перебирать.

Вы можете использовать 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>

Демо

...