时间戳

首页 > 解决方案 > 如何读取或获取 Json 对象内的 Json 数组

angular - 如何读取或获取 Json 对象内的 Json 数组

问题描述

在我的 Angular 应用程序中，我调用了 API 并获取了 Json 对象的数据。我的问题是如何读取 Json 对象中的 Json 数组。我收到的json对象是

{
"Drone": {
    "Droneid": 1001,
    "latlong": [
        {
            "lat": 12.989839,
            "lon": 80.198822
        },
        {
            "lat": 13.051832,
            "lon": 80.194480
        },
        {
            "lat": 13.038453,
            "lon": 80.227442
        },
        {
            "lat": 13.009018,
            "lon": 80.242550
        },
        {
            "lat": 12.976903,
            "lon": 80.237056
        },
        {
            "lat": 12.956829,
            "lon": 80.193107
        },
        {
            "lat": 12.980917,
            "lon": 80.150531
        },
        {
            "lat": 13.007680,
            "lon": 80.149158
        },
        {
            "lat": 13.043805,
            "lon": 80.154651
        }
    ]
}
}

我必须从上述对象调用 latlong 数组。

我的服务功能是

仪表板.service.ts

export class DashboardService {
public Drones:any;
  latlong:any=[];

  constructor(private http: HttpClient, private router: Router) {

mapping(token){
  let httpOptions = {
    headers: new HttpHeaders({
    'Content-Type': 'application/json',
      'Authorization': 'Token ' + token
    })
  };
    this.http.get(environment.apiurl +'/api/data/json', httpOptions).subscribe(  
    (dronesdt:any)=>{
      localStorage.setItem("dronesdt",JSON.stringify(dronesdt));
      console.log("Drones",JSON.parse(localStorage.getItem("dronesdt")));
} 
  )
}

仪表板.component.ts

  constructor(private ds:DashboardService,private router: Router) { }
 Drones:any;
  Droneid:string;
  latlong:any=[];

  this.mapping();

mapping(){
this.drones=JSON.parse(localStorage.getItem("dronesdt"));
console.log("Drones",this.drones)
}

我已收到整个 json 对象，但我无法接收对象内的数组。任何人都可以帮助我阅读对象内部的 Json 数组。

标签： angulartypescriptapi

解决方案

最好这样做：

仪表板.service.ts

export class DashboardService {

  constructor(private http: HttpClient, private router: Router) {

  getDrones():Observable<any> {
     return this.http.get(environment.apiurl +'/api/data/json', httpOptions);
  } 
}

仪表板.component.ts


 latlong:any=[];

 constructor(private ds:DashboardService,private router: Router) { }
  
 ngOnInit(){
   this.ds.getDrones().subscribe( res => {
      this.latlong = res.Drone.latlong;
      // Other local storage setting here...
   });
 }

推荐阅读