Comment récupérer les valeurs d'une liste dans un JSON en Angular ?

Question

J'ai besoin de récupérer les valeurs qui sont à l'intérieur des villes de ce JSON, mais je ne peux pas :

{ 
"id":0,
"department":"Amazonas",
"cities":["Leticia","Puerto Bayarta",]
},
{ 
"id":1,
"department":"Antioquia",
"cities":["Medellin","Bello",]
}

Ce sont les composants et les services que j'ai réalisés :

villes.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class CitiesService {
  constructor(private http: HttpClient) {}
  getJSON(url: string) {
    return this.http.get(url);
  }
}

Le composant a une interface :

nueva-organizacion.component.ts

import { Component, OnInit } from '@angular/core';

import { CitiesService } from 'src/app/services/cities.service';

interface City{
  department: string;
  cities: string[];
}

@Component({
  selector: 'app-nueva-organizacion',
  templateUrl: './nueva-organizacion.component.html',
  styleUrls: ['./nueva-organizacion.component.css'],
})
export class NuevaOrganizacionComponent implements OnInit {
  public cities: City[] = [];
  constructor(
    public cities: CitiesService,
  ) {}

  ngOnInit(): void {
    this.cities
      .getJSON(
        'https://raw.githubusercontent.com/marcovega/colombia-json/master/colombia.min.json'
      )
      .subscribe((res: any) => {
        this.cities = res;
      });
  }

Et enfin, je voudrais afficher les villes dans un sélecteur :

nueva-organizacion.component.html

<div class="form-input">
   <select id="city" class="custom-select">
      <option selected>Choose one...</option>
      <option *ngFor="let city of cities">
         {{ city.cities }}
      </option>
   </select>
</div>

Je voudrais obtenir quelque chose comme ceci dans le sélecteur :

Choose one...
Leticia
Puerto Bayarta
Medellin
Bello

Mais je comprends ça :

Choose one...
Leticia, Puerto Bayarta
Medellin, Bello

Peut-être que la bonne méthode consiste à utiliser l'index {{ city.cities[] }} mais je ne sais pas comment.

Answer 1

Gardez à l'esprit qu'à l'intérieur de NuevaOrganizacionComponent, vous avez deux propriétés portant le même nom : 'cities', d'abord le tableau des villes et ensuite le service des villes.

Je vous recommande également d'utiliser deux sélections au lieu d'une, la première pour sélectionner le département et la seconde pour sélectionner la ville.

Le code ressemblera à ceci :

nueva-organizacion.component.ts :

import { Component, OnInit } from '@angular/core';
import { CitiesService } from 'src/app/services/cities.service';

@Component({
  selector: 'app-nueva-organizacion',
  templateUrl: './nueva-organizacion.component.html',
  styleUrls: ['./nueva-organizacion.component.css'],
})
export class NuevaOrganizacionComponent implements OnInit {
  public departmentsArr = [] 
  public departmentSelected:any = null;
  public citySelected:any = null;
  constructor(
    public citiesServ: CitiesService,
  ) {}

  ngOnInit(): void {
    const urlCities = "https://raw.githubusercontent.com/marcovega/colombia-json/master/colombia.min.json"
    this.citiesServ.getJSON(urlCities)
    .subscribe((res: any) => {
        this.departmentsArr = res;
    });
  }
  getCities(){
      return this.departmentsArr.find(department => department.id == this.departmentSelected).ciudades
  }
  alertSelection(){
      const departmentName = this.departmentsArr.find(department => department.id == this.departmentSelected).departamento;
      const cityName = this.citySelected;
      alert(`
      You selected the department: ${departmentName} and the city: ${cityName}`)
  }
}

nueva-organizacion.component.html

<div class="form-input">
    <label for="departmentSelector">Select your department</label>
   <select id="departmentSelected" class="custom-select" name="departmentSelector" [(ngModel)]="departmentSelected">
      <option value="null">Choose one department...</option>
      <option 
        *ngFor="let department of departmentsArr"
        [value]="department.id">
         {{ department.departamento }}
      </option>
   </select>
</div>

<div class="form-input" *ngIf="departmentSelected">
    <label for="citySelector">Select your city</label>
    <select id="citySelector" class="custom-select" name="citySelector"  [(ngModel)]="citySelected">
      <option selected>Choose one city...</option>
      <option 
        *ngFor="let city of getCities()"
        [value]="city">
         {{ city }}
      </option>
   </select>
</div>

<button (click)="alertSelection()">WHAT WAS SELECTED?</button>

Veuillez également vérifier FormsModule est importé dans votre app.module.ts ou votreSubmodule.module.ts. Ceci est important pour activer la fonctionnalité ([ngModule]).

import {FormsModule} from "@angular/forms";
// Other things
imports: [
    // Other modules
    FormsModule
  ],

Answer 2

ngOnInit(): void {
  this.cities
    .getJSON(
      'https://raw.githubusercontent.com/marcovega/colombia-json/master/colombia.min.json'
    )
    .subscribe((res: any) => {
      this.cities = [];
      foreach(entry in res){
        foreach(citi in entry.cities){
          this.cities.push(citi);
        }
      }
    });
}

De ce côté, vous avez un tableau d'entrées qui contient un tableau de villes. Vous devez d'abord aplatir toutes les villes à l'intérieur de ans, quelque chose comme le code ci-dessus. Mon code n'est pas exact mais devrait vous donner une idée de ce qu'il faut écrire.