Looping JSON Array

How-to Discussions
1

HI all first of all thanks a lot for bug fixes on version 0.36 . I have a problem looping an array returned by a webservice, my webservice returns a JSON array not a json object but it seems that I can’t loop through a json Array, here is the webService link:
http://5.61.24.215:30001/api/store/readlist

Here is javaScript code:

Which I am using xhr to fetch result as I have no idea why fetch is not working properly

var Observable = require("FuseJS/Observable")

var storesList = Observable();

/* fetch('http://5.61.24.215:30001/api/store/readlist')
.then(function(response) { return response.json(); })
.then(function(responseObject) { 
   storesList.value  = responseObject;    
 }).catch(function(error){
    console.log(error);
 });*/


var xhr = new XMLHttpRequest();


xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {

    storesList.value = this.responseText;
    console.log(storesList);
  }
});

xhr.open("GET", "http://5.61.24.215:30001/api/store/readlist");

xhr.send();

module.exports={
    storesList:storesList
};

And in the Ux file I have:

<Page ux:Class="StoresPage">
<Router ux:Dependency="router" />
<JavaScript File="StoresPage.js" />
<StackPanel>

<Each Items="{storesList}">
<Panel HitTestMode="LocalVisualAndChildren" >
<Grid RowCount="2">
        <Rectangle Row="1"><Text Value="{id}" /></Rectangle>
        <Rectangle Row="2"><Text Value="{name}" /></Rectangle>
</Grid>
</Panel>
</Each>
</StackPanel>
</Page>

But I see Nothing in my page.
I would be pleased if you let me know what is wrong.
Regards

2

Hi,
referring to observable.value means you’re accessing its 0th element.
Each expects an observable collection, not a single-value observable that contains an array in its 0th element (provided your webservice returns an array).

Exchange storesList.value = this.responseText; with storesList.replaceAll(this.responseText); and see if that helps.

1 Like
3

Thanks a lot Uldis, just in case that someone else has the same issue I changed it to the following to work properly

storesList.replaceAll(JSON.parse(this.responseText));