在angular 2服务中从JSON响应中提取数据 [英] Extract data from JSON response in a angular 2 service
本文介绍了在angular 2服务中从JSON响应中提取数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在angular 2中拥有此服务，该服务从API接收json数据( https://pixabay. com/api/docs/#api_javascript_example ) 获取数据的代码如下:
I have this service in angular 2 that receives json data from a API(https://pixabay.com/api/docs/#api_javascript_example) The code to get the data looks like this:
getImages() {
return this.http.get(`${this.Url}`)
.toPromise()
.then(response => response.json());
}
我收到的数据采用JSON格式，如下所示:
the data i receive looks something like this in JSON format:
{
"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
}
因此，"hits"对象是一个数组，而totalHits和total只是对象.现在如何从应用程序的hits数组中提取和使用"previewURL"或其他内容?
The "hits" object is therefore an array while totalHits and total is just objects. Now how do i extract and use, for example "previewURL" or something else from the hits array in my application?
推荐答案
让我们假设您有一个名为ImagesService的服务，您可以将其注入到构造函数中，如下所示:
Let's suppose you have a service service called ImagesService which you Inject on the constructor like below:
constructor(private _imagesService: ImagesService) {
}
还有一个将保存值的变量
And a variable which will hold the value
enteredLocation: string;
该方法如下所示:
getMyValue(){
this._imagesService.
getImages()
.subscribe(
data => {
this.enteredLocation=data.hits[0].previewURL;
}
);
}
这篇关于在angular 2服务中从JSON响应中提取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
