如何在Angular2中显示该JSON

Question

How do I display this specific JSON using *ngFor?

{
    "status": 0,
    "dallases": [{
        "vehicle_id": 17954,
        "dallassettings": "3",
        "dallasupdated": "False",
        "dallas_list": [{
            "number": 666111222,
            "auth": 3
        }, {
            "number": 666777888,
            "auth": 4
        }, {
            "number": 123454321,
            "auth": 4
        }]
    }
}

vehicle.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Jsonp, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class VehicleService {
    constructor(private http: Http) { }

    getVehicle() {
        return this.http.get('myURL')
            .map(res => res.json());
    }
}

vehicle.component.ts

import { Component, enableProdMode } from '@angular/core';
import { VehicleService } from './vehicle.service';

enableProdMode();

@Component({
  //moduleId: module.id,  
  selector: 'vehicle-json',
  templateUrl: './vehicle.html',
  providers: [VehicleService]
})
export class VehicleComponent {
  //vehicles: Vehicle[];
  vehicles: GeneralVehicle[];

  constructor(private vehicleService: VehicleService) {
    this.vehicleService.getVehicle().subscribe(vehicle => {
      this.vehicles = vehicle;
    });
  }
}

/*interface Vehicle {
  id: number;
  title: string;
  body: string;
}*/
interface GeneralVehicle {
  status: number;
  dallases: Vehicle[];
}

interface Vehicle {
  vehicle_id: number;
  dallassettings: number;
  dallasupdated: string;
  dallas_list: DallasList[];
}

interface DallasList {
  number: number;
  auth: number;
}

When I worked on dummy data it was simply, but this JSON structure is more complex. I tried using Pipe, but I'm not sure if I'm using it correctly.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'keys' })
export class VehiclePipe implements PipeTransform {
    transform(value, args: string[]): any {
        let keys = [];
        for (let key in value) {
            keys.push(key);
        }
        return keys;
    }
}

That's the *ngFor

*ngFor="let vehicle of vehicles | keys"

I'd like to dislay status once, and then repeat all the dallases (Vehicle[]).

Answer 1

You have to loop through 2 ngFor's:

<div *ngFor="let vehicle of vehicles | keys">
    <h1>{{ vehicle.status }}</h1>
    <ul *ngFor="let dallas of vehicle.dallases">
        <li>{{ dallas | json }}</li> //Show the data you want
    </ul>
</div>

Answer 2

vehicles is an object. I see no need to iterate over the keys with the pipe you proposed. You can access the members you need directly. You should iterate over the dalasses property of vehicles - which is an array. Then display the array member as you require. Eg with a json pipe to get in text format, you you might also implement custom formatting inside the template through properties.

Example:

<div>
  <h1>{{ vehicle.status }}</h1>
  <div *ngFor="let vehicle of vehicles.dallases">
    <div>ID: {{vehicle.vehicle_id}}</div>
    <div>Settings: {{vehicle.dallassettings}}</div>
    <div>Updated: {{vehicle.dallasupdated}}</div>
    <div *ngFor="let d of vehicle.dallas_list">
      <div>number: {{d.number}}</div>
      <div>auth: {{d.auth}}</div>
    </div>
  </div>
</div>

Answer 3

At least you have one error here:

dallassettings: '3' // string

but in your interface you have:

dallassettings: number;

Then if you implement Matthiases implementation, put a *ngIf -statement, since I suspect you get your data async, so view is rendered before data retrieved, which would cause a undefined error.

<div *ngIf="vehicles"> // here!
  <h1>{{ vehicles.status }}</h1>
  <div *ngFor="let vehicle of vehicles.dallases">
    <div>ID: {{vehicle.vehicle_id}}</div>
    <div>Settings: {{vehicle.dallassettings}}</div>
    <div>Updated: {{vehicle.dallasupdated}}</div>
    <div *ngFor="let d of vehicle.dallas_list">
      <div>number: {{d.number}}</div>
      <div>auth: {{d.auth}}</div>
    </div>
  </div>
</div>

EDIT your status is undefined, since you you are using the wrong attribute it should be vehicles.status with "s". When I edited this post, I also added the "s" to the answer, so that it would be correct :)