форматировать REST-ответ на клиенте - PullRequest
Новая
       19

форматировать REST-ответ на клиенте

0 голосов
/ 09 июня 2018

существует ли стандартный установленный способ сделать следующее:

curl -i "http://api.waqi.info/feed/shanghai/?token=demo"

возвращает

{status:" ok ", data: {aqi: 70, время: {s: "2016-12-11 12:00:00"}, город: {name: "Shanghai", url: "http://aqicn.org/city/shanghai/", geo: [" 31.2047372 "," 121.4489017"]}, iaqi: {pm25:" ... "}}}

Я хочу создать простую страницу, которая вызывает API и форматирует результат.но я хочу сделать это в браузере, чтобы я мог разместить безсерверную веб-страницу.

Я смотрю на Angular и реагирую, но кажется, что для выполнения чего-то простого, подобного этому, требуется очень много настроек и багажа.

Я мог бы написать jscript и html с нуля, но мне также кажется, что для этого должны быть какие-то библиотеки.

Ответы [ 2 ]

0 голосов
/ 09 июня 2018

Я использовал jQuery плагин и использовал $.ajax() метод: см. здесь .

Позже я разделю все данные, используя keys, как показано ниже; 

$.ajax({
	url: 'http://api.waqi.info/feed/shanghai/?token=demo',
  success: function(ajax) {
  	console.log(ajax);
  	let data         = ajax.data;         // Object
    let api          = data.api;          // Int
    let attributions = data.attributions; // Array [3]
    let cityCoords   = data.city.geo;     // Array [2]
    let cityName     = data.city.name;    // String
    let cityUrl      = data.city.url;     // String 
    let dominentpol  = data.dominentpol; // String
    let iaqi         = data.iaqi;         // Object Keys = [co, d, h, no2, o3, p ,pm10, pm25, so2, t, w, wd]
    let idx          = data.idx;          // Int
    let time         = data.time;         // Object Keys = [s, tz, v]
    let status       = ajax.status;
    
    console.log("Data Object: " 
    + data + 
    "\nAPI Version: " 
    + api + 
    "\nAttributions #1 Name: " 
    + attributions[0].name +
    "\nAttributions #1 Url: " 
    + attributions[0].url +
    "\nAttributions #2 Name: " 
    + attributions[1].name +
    "\nAttributions #2 Url: " 
    + attributions[1].url +
    "\nAttributions #3 Name: " 
    + attributions[2].name +
    "\nAttributions #3 Url: " 
    + attributions[2].url +
    "\nCity Longitude: "
    + cityCoords[0] +
    "\nCity Latitude: "
    + cityCoords[1] +
    "\nCity Name: "
    + cityName +
    "\nCity Url: "
    + cityUrl +
    "\dDominentpol: "
    + dominentpol +
    "\nIaqi Key [co]: "
    + iaqi.co +
    "\nIaqi Key [d]: "
    + iaqi.d +
    "\nIaqi Key [h]: "
    + iaqi.h +
    "\nIaqi Key [no2]: "
    + iaqi.no2 +
    "\nIaqi Key [o3]: "
    + iaqi.o3 +
    "\nIaqi Key [p]: "
    + iaqi.p +
    "\nIaqi Key [pm10]: "
    + iaqi.pm10 +
    "\nIaqi Key [pm25]: "
    + iaqi.pm25 +
    "\nIaqi Key [so2]: "
    + iaqi.so2 +
    "\nIaqi Key [t]: "
    + iaqi.t +
    "\nIaqi Key [w]: "
    + iaqi.w +
    "\nIaqi Key [wd]: "
    + iaqi.wd +
    "\nIdx: "
    + idx +
    "\nTime Key = [s]: "
    + time.s +
    "\nTime Key = [tz]:"
    + time.tz +
    "\nTime Key = [v]:"
    + time.v +
    "\nStatus: "
    + status);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
0 голосов
/ 09 июня 2018

Вы можете написать ajax-вызов для получения таких данных: 

fetch('http://api.waqi.info/feed/shanghai/?token=demo')
  .then(function(response) {
    return response.json();
  })
  .then(function(jsonData) {
    console.log(jsonData); //the data you want to get
  });

Дополнительная информация здесь

Если вы хотите использовать некоторую библиотеку, вы можетепопробуй суперагент

...