Access item in JSON array and display objects data - json

Question

I am trying to use weather API and get open data for first object in JSON array.Instead i get all objects.How can i access for example first object in JSON array?Also how to make so the data will show instead of [object, object].
Right now it looks like this:
It should look more like this:
"name":"msl",
"levelType":"hmsl",
"level":0,
"values":[
1031
Here is my 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>
TS code:
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;
})
}
}

Answer 1

You can "stringify" the data using the built-in JSON.stringify function. You will need to specify the padding in the third parameter.
Ignore the CORS proxy, I just used it to bypass the same-origin-policy.
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>