2
votes

Angular 6 ngPour sélectionner un objet sur un JSON imbriqué

J'ai du mal à essayer de faire un ngFor sur JSON imbriqué. J'ai lu que ngFor est censé être uniquement pour les tableaux, mais il y a tellement d'API qui pompent le JSON imbriqué, que je pense que cela doit être un moyen.

Ce qui suit est un exemple de la catégorie JSON que je suis réception - Je simplifie ce que cela pourrait être:

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

Voici un exemple de http get:

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

Ce serait un exemple de ce qui revient dans la console:

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

Ce qui suit est ce qui n'affiche actuellement aucune option dans la sélection, mais en même temps, aucune erreur et zéro avertissement:

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

J'ai essayé this.categoryObj [i], this.categoryObj [i] ['name'], etc. ..

Comment puis-je ngPour un JSON imbriqué - j'espère que vous pouvez offrir une solution dynamique.

Comme d'habitude, merci d'avance et bonne année à vous et aux vôtres >

json angular6 ngfor

0 commentaires

3 Réponses :

1
votes

Vous effectuez une itération sur l'objet et non sur un tableau, le tableau peut être facilement itéré.

Vous pouvez utiliser pipe pour transformer vos objets en tableau ou vous pouvez changer votre code json > objet à array.

Vous avez besoin d'une nouvelle variable qui peut itérer facilement et vous pouvez l'utiliser plus tard, comme ceci

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

et à votre avis

0: Object
name: "Candle"

1: Object
name: "Oil"

MODIFIER: Comme vous voulez parcourir l'objet à l'intérieur du tableau, vous pouvez utiliser

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

cela vous donnera un tableau d'objets

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

et vous pouvez le lier comme ceci

 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;
    },[])
  }

Démo

6 commentaires

merci pour votre réponse et bonne année à vous. J'ai placé console.log ("this.categoryObj [curr] .name:", this.categoryObj [curr] .name); juste en dessous du prev.push et au-dessus du retour, mais rien ne s'affiche dans la console et aucun élément dans la liste déroulante - est-ce parce que c'est dans une fermeture?

Aussi, quand j'ai utilisé le débogueur; J'ai reçu un avertissement - L'utilisation des instructions du débogueur est interdite

@kronus vérifiez mon lien de démonstration, vous comprendrez comment cela fonctionne, deuxièmement, le débogueur est juste pour moi, vous pouvez le supprimer. et cela renverra le tableau que vous souhaitez lier dans select. et oui bonne année à toi aussi

ouais, je vivais juste ça. En conséquence, j'ai essayé this.categoryObj ["Categories"], qui montre ce qui suit dans la console et c'est ce que je voulais - this.categoryObj: {…} bougies: Object {name: "Candle"} chocolats: Object {name: "Chocolates"} huiles: Object {name: "Oil"} toys: Object {name: "Toys"} - mais, quand je suis allé au composant avec le menu déroulant, il s'est écrasé sans erreur spécifique - ERREUR Erreur: "[objet objet]" core.js: 1673

@kronus vérifie ma modification, vous avez un objet à l'intérieur de l'objet, vous devez convertir cet objet en tableau pour le faire itérer, essayer de comprendre mon code et ensuite l'implémenter. Vérifiez également la démo pour votre sortie.

this.output = Object.values (this.categoryObj);

0
votes

Déclarez une variable pour contenir la liste JSON révisée:

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

Remplacez simplement votre requête get par ceci:

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

HTML:

list : any[] = [];

FORKED STACKBLITZ

0 commentaires

1
votes

Vous pouvez utiliser le tube keyValue pour itérer des objets - je pense que ce tube est disponible à partir de angular 6.1

Essayez quelque chose comme ça

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

Je pense que cela pourrait vous aider - mais assurez-vous que ce pipe semble être impur

Pour plus d'informations, vérifiez this - Bonne année et bonne programmation :)

0 commentaires