Uncaught (in promise): TypeError: data.data is not iterable

Issue

I am trying to retrieve some images from wooccomerce api. Here is my Code :

this.config.getWithUrl(this.config.url + '/api/appsettings/get_all_banners/?insecure=cool')
.then((data: any) => {
this.banners = data.data;
     console.log(this.banners);
});

And I am getting this error :

consolelogs.js:49 ERROR Error: Uncaught (in promise): TypeError: data.data is not iterable
TypeError: data.data is not iterable
    at shared-data.service.ts:187
    at ZoneDelegate.invoke (zone-evergreen.js:359)
    at Object.onInvoke (core.js:34201)
    at ZoneDelegate.invoke (zone-evergreen.js:358)
    at Zone.run (zone-evergreen.js:124)

.........

Here is the Log of data:any object

{status: "ok", data: Array(2)}
status: "ok"
data: Array(2)
0:
banners_id: "2"
banners_title: "Banner"
banners_url: ""
banners_image: "https://dokanreach.com/wp-content/uploads/2020/02/shop4_home_slider2.jpg"
banners_group: ""
banners_html_text: null
expires_impressions: "0"
expires_date: "2020-02-29 00:00:00"
date_scheduled: null
date_added: "2020-02-21 00:00:00"
date_status_change: null
status: "1"
type: "Select Type"
banners_order: "1"
__proto__: Object
1: {banners_id: "4", banners_title: "Banner2", banners_url: "", banners_image: "https://dokanreach.com/wp-content/uploads/2017/03/01n_bg.jpg", banners_group: "", …}
length: 2
__proto__: Array(0)
__proto__: Object

Solution

You should Assign data.data into another variable after Process original result returned from Api In following way:

this.config.getWithUrl(this.config.url + '/api/appsettings/get_all_banners/?insecure=cool')
.then((data: any) => {
     var original_data = JSON.parse(JSON.stringify(data));
     console.log(original_data);
this.banners = original_data.data;
     console.log(this.banners);
});

I haven't tried it but, Sometime data format is not in proper way, so maybe it cause issue.

Answered By - Mayur Kukadiya