Извлечение данных из ответа JSON в угловом 2 сервисе

Я имею эту услугу в угловом 2, который получает данные JSON с API (https://pixabay.com/api/docs/#api_javascript_example) кода, чтобы получить данные выглядят следующим образом:Извлечение данных из ответа JSON в угловом 2 сервисе

getImages() { 
    return this.http.get(`${this.Url}`) 
     .toPromise() 
     .then(response => response.json()); 
    }

данные я получаю выглядит примерно так в формате JSON: поэтому

{ 
    "totalHits":500, 
    "hits":[ 
     { 
      "previewHeight":99, 
      "likes":13, 
      "favorites":6, 
      "tags":"ranunculus, flower, blossom", 
      "webformatHeight":426, 
      "views":84, 
      "webformatWidth":640, 
      "previewWidth":150, 
      "comments":16, 
      "downloads":27, 
      "pageURL":"https://pixabay.com/en/ranunculus-flower-blossom-bloom-1591670/", 
      "previewURL":"https://pixabay.com/static/uploads/photo/2016/08/13/22/14/ranunculus-1591670_150.jpg", 
      "webformatURL":"https://pixabay.com/get/e830b80e2ef3013ed95c4518b74f4795e373e5d404b0154694f5c87da1efb6_640.jpg", 
      "imageWidth":2000, 
      "user_id":526143, 
      "user":"Pezibear", 
      "type":"photo", 
      "id":1591670, 
      "userImageURL":"https://pixabay.com/static/uploads/user/2016/02/11/19-21-18-242_250x250.jpg", 
      "imageHeight":1333 
     }, 
     { 
      "previewHeight":99, 
      "likes":6, 
      "favorites":2, 
      "tags":"sun flower, macro, beautiful colors", 
      "webformatHeight":426, 
      "views":157, 
      "webformatWidth":640, 
      "previewWidth":150, 
      "comments":7, 
      "downloads":33, 
      "pageURL":"https://pixabay.com/en/sun-flower-macro-beautiful-colors-1584193/", 
      "previewURL":"https://pixabay.com/static/uploads/photo/2016/08/10/20/17/sun-flower-1584193_150.jpg", 
      "webformatURL":"https://pixabay.com/get/e830b90b29fd023ed95c4518b74f4795e373e5d404b0154694f5c87da1efb6_640.jpg", 
      "imageWidth":5472, 
      "user_id":2225626, 
      "user":"Boke9a", 
      "type":"photo", 
      "id":1584193, 
      "userImageURL":"https://pixabay.com/static/uploads/user/2016/05/16/19-03-09-294_250x250.jpg", 
      "imageHeight":3648 
     }, 
     { 
      "previewHeight":98, 
      "likes":63, 
      "favorites":36, 
      "tags":"sun flower, flower, flowers", 
      "webformatHeight":419, 
      "views":17533, 
      "webformatWidth":640, 
      "previewWidth":150, 
      "comments":44, 
      "downloads":9787, 
      "pageURL":"https://pixabay.com/en/sun-flower-flower-flowers-yellow-1536088/", 
      "previewURL":"https://pixabay.com/static/uploads/photo/2016/07/23/00/12/sun-flower-1536088_150.jpg", 
      "webformatURL":"https://pixabay.com/get/e830b20928fc093ed95c4518b74f4795e373e5d404b0154694f5c87da1efb6_640.jpg", 
      "imageWidth":4896, 
      "user_id":1195798, 
      "user":"Couleur", 
      "type":"photo", 
      "id":1536088, 
      "userImageURL":"https://pixabay.com/static/uploads/user/2016/07/27/00-45-19-570_250x250.jpg", 
      "imageHeight":3208 
     }, 
     { 
      "previewHeight":99, 
      "likes":31, 
      "favorites":19, 
      "tags":"sun flower, flower, flowers", 
      "webformatHeight":426, 
      "views":19170, 
      "webformatWidth":640, 
      "previewWidth":150, 
      "comments":23, 
      "downloads":14266, 
      "pageURL":"https://pixabay.com/en/sun-flower-flower-flowers-yellow-1497092/", 
      "previewURL":"https://pixabay.com/static/uploads/photo/2016/07/04/18/16/sun-flower-1497092_150.jpg", 
      "webformatURL":"https://pixabay.com/get/e831b80828fd033ed95c4518b74f4795e373e5d404b0154694f5c87da1efb6_640.jpg", 
      "imageWidth":4896, 
      "user_id":1195798, 
      "user":"Couleur", 
      "type":"photo", 
      "id":1497092, 
      "userImageURL":"https://pixabay.com/static/uploads/user/2016/07/27/00-45-19-570_250x250.jpg", 
      "imageHeight":3264 
     }, 
      "previewHeight":83, 
      "likes":75, 
      "favorites":51, 
      "tags":"rose, flower, yellow", 
      "webformatHeight":355, 
      "views":21156, 
      "webformatWidth":640, 
      "previewWidth":150, 
      "comments":18, 
      "downloads":4446, 
      "pageURL":"https://pixabay.com/en/rose-flower-yellow-yellow-rose-113735/", 
      "previewURL":"https://pixabay.com/static/uploads/photo/2013/05/26/12/14/rose-113735_150.jpg", 
      "webformatURL":"https://pixabay.com/get/e834b2082bf11c2ad65a5854e54d4596e770e3c818b5164090f9c57fa5ee_640.jpg", 
      "imageWidth":2410, 
      "user_id":817, 
      "user":"blizniak", 
      "type":"photo", 
      "id":113735, 
      "userImageURL":"https://pixabay.com/static/uploads/user/2013/06/28/17-07-05-714_250x250.jpg", 
      "imageHeight":1337 
     }, 
     { 
      "previewHeight":99, 
      "likes":83, 
      "favorites":90, 
      "tags":"yellow, flower, wood", 
      "webformatHeight":426, 
      "views":17696, 
      "webformatWidth":640, 
      "previewWidth":150, 
      "comments":17, 
      "downloads":8088, 
      "pageURL":"https://pixabay.com/en/yellow-flower-wood-370256/", 
      "previewURL":"https://pixabay.com/static/uploads/photo/2014/06/17/07/21/yellow-370256_150.jpg", 
      "webformatURL":"https://pixabay.com/get/ea32b10d2df21c2ad65a5854e54d4596e770e3c818b5164090f9c57fa5ee_640.jpg", 
      "imageWidth":5184, 
      "user_id":299467, 
      "user":"elektrosmart", 
      "type":"photo", 
      "id":370256, 
      "userImageURL":"https://pixabay.com/static/uploads/user/2014/06/18/11-30-30-400_250x250.jpg", 
      "imageHeight":3456 
     }, 
     { 
      "previewHeight":99, 
      "likes":65, 
      "favorites":45, 
      "tags":"flower, yellow, spehel", 
      "webformatHeight":423, 
      "views":17772, 
      "webformatWidth":640, 
      "previewWidth":150, 
      "comments":15, 
      "downloads":9653, 
      "pageURL":"https://pixabay.com/en/flower-yellow-spehel-144486/", 
      "previewURL":"https://pixabay.com/static/uploads/photo/2013/07/10/18/13/flower-144486_150.jpg", 
      "webformatURL":"https://pixabay.com/get/e831b50b20f21c2ad65a5854e54d4596e770e3c818b5164090f9c57fa5ee_640.jpg", 
      "imageWidth":4928, 
      "user_id":38776, 
      "user":"corinaselberg", 
      "type":"photo", 
      "id":144486, 
      "userImageURL":"https://pixabay.com/static/uploads/user/2013/06/09/18-45-26-703_250x250.jpg", 
      "imageHeight":3264 
     }, 
     { 
      "previewHeight":99, 
      "likes":56, 
      "favorites":49, 
      "tags":"flower, yellow, spring", 
      "webformatHeight":425, 
      "views":15902, 
      "webformatWidth":640, 
      "previewWidth":150, 
      "comments":10, 
      "downloads":4896, 
      "pageURL":"https://pixabay.com/en/flower-yellow-spring-sun-108685/", 
      "previewURL":"https://pixabay.com/static/uploads/photo/2013/05/03/13/14/flower-108685_150.jpg", 
      "webformatURL":"https://pixabay.com/get/e835b90920f11c2ad65a5854e54d4596e770e3c818b5164090f9c57fa5ee_640.jpg", 
      "imageWidth":3812, 
      "user_id":27062, 
      "user":"GREGOR", 
      "type":"photo", 
      "id":108685, 
      "userImageURL":"https://pixabay.com/static/uploads/user/2013/08/15/14-01-39-728_250x250.jpg", 
      "imageHeight":2537 
     }, 
     { 
      "previewHeight":91, 
      "likes":11, 
      "favorites":1, 
      "tags":"flower, blossom, bloom", 
      "webformatHeight":391, 
      "views":276, 
      "webformatWidth":640, 
      "previewWidth":150, 
      "comments":7, 
      "downloads":106, 
      "pageURL":"https://pixabay.com/en/flower-blossom-bloom-nature-plant-1569136/", 
      "previewURL":"https://pixabay.com/static/uploads/photo/2016/08/04/14/05/flower-1569136_150.jpg", 
      "webformatURL":"https://pixabay.com/get/e830b70629f7073ed95c4518b74f4795e373e5d404b0154694f5c87da1efb6_640.jpg", 
      "imageWidth":4559, 
      "user_id":2364555, 
      "user":"pixel2013", 
      "type":"photo", 
      "id":1569136, 
      "userImageURL":"https://pixabay.com/static/uploads/user/2016/07/09/22-11-03-216_250x250.jpg", 
      "imageHeight":2792 
     }, 
     { 
      "previewHeight":75, 
      "likes":35, 
      "favorites":23, 
      "tags":"lily, flowers, early", 
      "webformatHeight":323, 
      "views":11884, 
      "webformatWidth":640, 
      "previewWidth":150, 
      "comments":17, 
      "downloads":9816, 
      "pageURL":"https://pixabay.com/en/lily-flowers-early-flower-garden-1512813/", 
      "previewURL":"https://pixabay.com/static/uploads/photo/2016/07/12/18/54/lily-1512813_150.jpg", 
      "webformatURL":"https://pixabay.com/get/e830b00d20f5023ed95c4518b74f4795e373e5d404b0154694f5c87da1efb6_640.jpg", 
      "imageWidth":3861, 
      "user_id":2364555, 
      "user":"pixel2013", 
      "type":"photo", 
      "id":1512813, 
      "userImageURL":"https://pixabay.com/static/uploads/user/2016/07/09/22-11-03-216_250x250.jpg", 
      "imageHeight":1952 
     }, 
     { 
      "previewHeight":150, 
      "likes":21, 
      "favorites":11, 
      "tags":"flower, tulip, yellow", 
      "webformatHeight":640, 
      "views":4937, 
      "webformatWidth":425, 
      "previewWidth":100, 
      "comments":2, 
      "downloads":1084, 
      "pageURL":"https://pixabay.com/en/flower-tulip-yellow-overblown-143487/", 
      "previewURL":"https://pixabay.com/static/uploads/photo/2013/07/05/15/15/flower-143487_150.jpg", 
      "webformatURL":"https://pixabay.com/get/e831b20b20f31c2ad65a5854e54d4596e770e3c818b5164090f9c57fa5ee_640.jpg", 
      "imageWidth":2848, 
      "user_id":38776, 
      "user":"corinaselberg", 
      "type":"photo", 
      "id":143487, 
      "userImageURL":"https://pixabay.com/static/uploads/user/2013/06/09/18-45-26-703_250x250.jpg", 
      "imageHeight":4288 
     }, 
     { 
      "previewHeight":99, 
      "likes":92, 
      "favorites":57, 
      "tags":"yellow rose, flower, nature", 
      "webformatHeight":425, 
      "views":27475, 
      "webformatWidth":640, 
      "previewWidth":150, 
      "comments":12, 
      "downloads":6234, 
      "pageURL":"https://pixabay.com/en/yellow-rose-flower-nature-196393/", 
      "previewURL":"https://pixabay.com/static/uploads/photo/2013/10/16/16/59/yellow-rose-196393_150.jpg", 
      "webformatURL":"https://pixabay.com/get/e83cb70c21f71c2ad65a5854e54d4596e770e3c818b5164090f9c57fa5ee_640.jpg", 
      "imageWidth":6016, 
      "user_id":32636, 
      "user":"ADGraphics", 
      "type":"photo", 
      "id":196393, 
      "userImageURL":"https://pixabay.com/static/uploads/user/2013/05/26/07-31-11-275_250x250.jpg", 
      "imageHeight":4000 
     }, 
     { 
      "previewHeight":99, 
      "likes":66, 
      "favorites":72, 
      "tags":"girl, flowers, yellow", 
      "webformatHeight":426, 
      "views":31785, 
      "webformatWidth":640, 
      "previewWidth":150, 
      "comments":9, 
      "downloads":22655, 
      "pageURL":"https://pixabay.com/en/girl-flowers-yellow-beauty-nature-1319114/", 
      "previewURL":"https://pixabay.com/static/uploads/photo/2016/04/09/23/10/girl-1319114_150.jpg", 
      "webformatURL":"https://pixabay.com/get/e836b00629f5053ed95c4518b74f4795e373e5d404b0154694f5c87da1efb6_640.jpg", 
      "imageWidth":4272, 
      "user_id":485024, 
      "user":"AdinaVoicu", 
      "type":"photo", 
      "id":1319114, 
      "userImageURL":"", 
      "imageHeight":2848 
     }, 
     { 
      "previewHeight":99, 
      "likes":4, 
      "favorites":3, 
      "tags":"sunflower, yellow, nature", 
      "webformatHeight":426, 
      "views":93, 
      "webformatWidth":640, 
      "previewWidth":150, 
      "comments":0, 
      "downloads":26, 
      "pageURL":"https://pixabay.com/en/sunflower-yellow-nature-flower-1545465/", 
      "previewURL":"https://pixabay.com/static/uploads/photo/2016/07/27/14/42/sunflower-1545465_150.jpg", 
      "webformatURL":"https://pixabay.com/get/e830b50a2cf2043ed95c4518b74f4795e373e5d404b0154694f5c87da1efb6_640.jpg", 
      "imageWidth":3456, 
      "user_id":2929824, 
      "user":"PhilGONDAS", 
      "type":"photo", 
      "id":1545465, 
      "userImageURL":"https://pixabay.com/static/uploads/user/2016/07/21/21-17-48-780_250x250.jpg", 
      "imageHeight":2304 
     }, 
     { 
      "previewHeight":106, 
      "likes":36, 
      "favorites":36, 
      "tags":"gerbera, flower, blossom", 
      "webformatHeight":454, 
      "views":36235, 
      "webformatWidth":640, 
      "previewWidth":150, 
      "comments":46, 
      "downloads":33283, 
      "pageURL":"https://pixabay.com/en/gerbera-flower-blossom-bloom-1365459/", 
      "previewURL":"https://pixabay.com/static/uploads/photo/2016/05/01/18/29/gerbera-1365459_150.jpg", 
      "webformatURL":"https://pixabay.com/get/e836b70a2cf1083ed95c4518b74f4795e373e5d404b0154694f5c87da1efb6_640.jpg", 
      "imageWidth":2746, 
      "user_id":2412387, 
      "user":"Marisa04", 
      "type":"photo", 
      "id":1365459, 
      "userImageURL":"https://pixabay.com/static/uploads/user/2016/08/06/15-20-03-139_250x250.jpg", 
      "imageHeight":1950 
     } 
    ], 
    "total":11276 
}

«удары» объект является массивом, а totalHits и общее только объекты. Теперь, как я извлекаю и использую, например, «previewURL» или что-то еще из массива hits в моем приложении?

источник

2016-08-19 gurkis

Из памяти (так синтаксис, вероятно, далек), но что-то вроде: вар ГИМ = getImages(); imgs.hits [индекс] .previewUrl; –

объясните, что вам нужно. вы можете получить доступ к 'previewURL', например,' json.hits [0] .previewURL' например – Maxx

Давайте предположим, что у вас есть услуга сервис под названием ImagesService который вы Вводят от конструктора, как показано ниже:

constructor(private _imagesService: ImagesService) { 
}

И переменная, которая будет содержать значение

enteredLocation: string;

метод будет см. ниже:

getMyValue(){ 
     this._imagesService. 
     getImages() 
     .subscribe(
      data => {     
       this.enteredLocation=data.hits[0].previewURL; 
      } 
     ); 
    }

источник

2016-08-19 13:45:28 eg16

Выполняет ли это то, что вы ищете?

getImages().then(resp => { 
    console.log(resp['hits'][0]['previewURL']); 
});

источник

2016-08-19 13:41:13 jcolemang

Вы можете попробовать это

getImages() { 
    return this.http.get(`${this.Url}`) 
     .toPromise() 
     .then(function(response){ 
     $scope.result=response.data; 
}); 
    }

Теперь вы можете использовать $scope.result для желаемых объектов/значений, например, как указано в данный API URL

$ scope.result будет иметь объект со свойствами totalHits, hits, total

$scope.result={ 
"totalHits"://some value, 
hits:[] //array of objects, 
total: ://some value 
}

Вы можете использовать его как объект javascript.

if (parseInt($scope.result.totalHits) > 0) 
      $.each($scope.result.hits, function(i, hit){ console.log(hit.previewURL); }); 
     else 
      console.log('No hits');

Надеется, что это помогает

источник

2016-08-19 14:25:34 Paarth

Извлечение данных из ответа JSON в угловом 2 сервисе

ответ

Смежные вопросы