/ / Access item dans le tableau JSON et les données des objets d'affichage - json, api

Élément d'accès dans un tableau JSON et données d'objets d'affichage - json, api

J'essaie d'utiliser l'API météo et d'obtenir des données ouvertespour le premier objet du tableau JSON.Au lieu de cela, j'obtiens tous les objets.Comment puis-je accéder, par exemple, au premier objet du tableau JSON? Et comment rendre les données affichées à la place de [objet, objet]. En ce moment, cela ressemble à ceci:

entrer la description de l'image ici

Cela devrait ressembler davantage à ceci:

      "name":"msl",
"levelType":"hmsl",
"level":0,
"values":[
1031

Voici mon code: HTML:

     <ion-header>
<ion-navbar>
<ion-title>New App</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding class="no-scroll">
<ion-grid>
</ion-row>
<button ion-button (click) = "getData()">Get Data</button>
<ion-row>{{result.timeSeries}}</ion-row>

<ion-row>
<ion-col>
</ion-grid>
</ion-content>

Code TS:

import { Component, state } from "@angular/core";
import { NavController, AlertController, Platform, Alert} from "ionic-angular";
import { MapPage } from "../map/map";
import { NewGamePage } from "../new-game/new-game";
import {AchievmentPage} from "../achievment/achievment";
import {DailyRoutesPage}from "../daily-routes/daily-routes";

import { LocalNotifications } from "@ionic-native/local-notifications"
import { PhonegapLocalNotification } from "@ionic-native/phonegap-local-notification";
import { Push, PushObject, PushOptions} from "@ionic-native/push"

import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs/Observable";


@Component({
selector: "page-home",
templateUrl: "home.html"
})
export class HomePage {

result: any = [];
data: Observable<any>;


constructor(public navCtrl: NavController, public alertCtrl: AlertController, private platform: Platform, private localNotification: LocalNotifications, private notiPhoneGap: PhonegapLocalNotification, public http: HttpClient) {
}
getData(){
var url = `https://opendata-download-metfcst.smhi.se/api/category/pmp3g/version/2/geotype/point/lon/16.158/lat/58.5812/data.json`;
this.data = this.http.get(url);
this.data.subscribe(data=>{
this.result = data;
})
}



}

Réponses:

0 pour la réponse № 1

Vous pouvez "stringifier" les données en utilisant la fonction intégrée JSON.stringify une fonction. Vous devrez spécifier le remplissage dans le troisième paramètre.

Ignorer le proxy CORS, je viens de l'utiliser pour contourner la même politique d'origine.

var apiUrl = "https://opendata-download-metfcst.smhi.se/api";
var apiPointUrl = `${apiUrl}/category/pmp3g/version/2/geotype/point`;

// Builds an API url to get a point at a set of coordinates.
function getPointData(longitude, latitude) {
return `${apiPointUrl}/lon/${longitude}/lat/${latitude}/data.json`;
}

// Wrapping with a CORS proxy so that there is no issue with Same-Origin-Policy
var requestQuery = `https://cors.io/?${getPointData(16.158, 58.5812)}`;

$.getJSON(requestQuery, (result, status, xhr) => {
// Display the first two hours in the timeSeries.
console.log(JSON.stringify(result.timeSeries.slice(0, 2), null, 2));
});
.as-console-wrapper { top: 0; max-height: 100% !important; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>