在角度2服务中从JSON响应中提取数据

时间:2021-09-19 18:24:57

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:

我在角度2中有这个服务,从API接收json数据(https://pixabay.com/api/docs/#api_javascript_example)获取数据的代码如下所示:

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

the data i receive looks something like this in JSON format:

我收到的数据看起来像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
}

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?

因此,“hits”对象是一个数组,而totalHits和total只是一个对象。现在我如何从我的应用程序中的hits数组中提取和使用“previewURL”或其他内容?

3 个解决方案

#1


1  

Let's suppose you have a service service called ImagesService which you Inject on the constructor like below:

假设您有一个名为ImagesService的服务服务,您可以在构造函数中注入,如下所示:

constructor(private _imagesService: ImagesService) {
}

And a variable which will hold the value

还有一个能够保持价值的变量

enteredLocation: string;

The method would look like below:

该方法如下所示:

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

#2


0  

Does this do what you're looking for?

这样做你想要的吗?

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

#3


0  

You can try this

你可以试试这个

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

Now you can use $scope.result for desired objects/values like as given in given API url

现在,您可以将$ scope.result用于所需的对象/值,如给定API URL中给出的那样

$scope.result will have a object with properties totalHits, hits, total

$ scope.result将有一个对象,其属性为totalHits,hits,total

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

You can use it as javascript object like.

您可以将它用作javascript对象之类的。

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

Hope it helps

希望能帮助到你

#1


1  

Let's suppose you have a service service called ImagesService which you Inject on the constructor like below:

假设您有一个名为ImagesService的服务服务,您可以在构造函数中注入,如下所示:

constructor(private _imagesService: ImagesService) {
}

And a variable which will hold the value

还有一个能够保持价值的变量

enteredLocation: string;

The method would look like below:

该方法如下所示:

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

#2


0  

Does this do what you're looking for?

这样做你想要的吗?

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

#3


0  

You can try this

你可以试试这个

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

Now you can use $scope.result for desired objects/values like as given in given API url

现在,您可以将$ scope.result用于所需的对象/值,如给定API URL中给出的那样

$scope.result will have a object with properties totalHits, hits, total

$ scope.result将有一个对象,其属性为totalHits,hits,total

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

You can use it as javascript object like.

您可以将它用作javascript对象之类的。

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

Hope it helps

希望能帮助到你