How to extract Object data inside an Array Using Each

How-to Discussions
1 
[{"createdAt":"2017-04-19T07:28:21.176Z","updatedAt":"2017-04-19T11:50:19.016Z","name":"Olive Table","location":{"latitude":34.536723,"longitude":69.163273},"picture":"/file/www/restaurants/sufi.jpg","cuisines":["Indian","Italian","Chinese"],"address":"Shahre Naw, Kabul","opening_time":"05:58:00.716Z","closing_time":"10:58:00.717Z","manager":"/db/User/10","website":"olive.com.af","is_veg":null},{"createdAt":"2017-04-19T07:28:54.255Z","updatedAt":"2017-04-19T11:50:14.279Z","name":"Lucky Town","location":{"latitude":34.539872,"longitude":69.118023},"picture":"/file/www/restaurants/star.jpg","cuisines":["Indian","Turkish","Chinese"],"address":"Sherpoor, Kabul","opening_time":"05:58:00.716Z","closing_time":"20:56:00.717Z","manager":"/db/User/10","website":"lucky.rest","is_veg":null}],

and I want extract data with Each

<Panel Dock="Top">
      <Each Items="{received}" >
        <StackPanel>
          <Text Value="{name}"/>
          <Text Value="{address}"/>
        </StackPanel>
      </Each>
    </Panel>

received is an Observable with contain the data in Array of object format

2

Hi Seddiq,

the only thing obviously wrong with the code is that you have the StackPanel inside of the Each, while it should be outside of it. That aside, I would still think that you should have seen something in output, provided the JavaScript-part of your code runs fine.

Here’s a complete working example with the data you supplied:

<App>
    <JavaScript>
    var Observable = require("FuseJS/Observable");

    var data = Observable(
        {
            "createdAt":"2017-04-19T07:28:21.176Z",
            "updatedAt":"2017-04-19T11:50:19.016Z",
            "name":"Olive Table",
            "location":{"latitude":34.536723,"longitude":69.163273},
            "picture":"/file/www/restaurants/sufi.jpg",
            "cuisines":["Indian","Italian","Chinese"],
            "address":"Shahre Naw, Kabul",
            "opening_time":"05:58:00.716Z",
            "closing_time":"10:58:00.717Z",
            "manager":"/db/User/10",
            "website":"olive.com.af",
            "is_veg":null
        },
        {
            "createdAt":"2017-04-19T07:28:54.255Z",
            "updatedAt":"2017-04-19T11:50:14.279Z",
            "name":"Lucky Town",
            "location":{"latitude":34.539872,"longitude":69.118023},
            "picture":"/file/www/restaurants/star.jpg",
            "cuisines":["Indian","Turkish","Chinese"],
            "address":"Sherpoor, Kabul","opening_time":"05:58:00.716Z",
            "closing_time":"20:56:00.717Z",
            "manager":"/db/User/10",
            "website":"lucky.rest",
            "is_veg":null
        }
    );

    module.exports = {
        data: data
    };
    </JavaScript>
    <ClientPanel>
        <StackPanel ItemSpacing="2" Margin="4">
            <Each Items="{data}">
                <DockPanel>
                    <Text Value="{name}" Dock="Left" />
                    <Text Value="{address}" Dock="Right" />
                </DockPanel>
            </Each>
        </StackPanel>
    </ClientPanel>
</App>
3

Also, make sure to read the docs on working with Observables, especially the lists: https://www.fusetools.com/docs/fusejs/observable-api#observable-lists

4 
<Page>
<JavaScript>
    var Observable = require("FuseJS/Observable");
    var db = require("baqend.js").db;
    var received = Observable();
    function getData () {
       db.connect("myApp",true);
       db.Restaurant.find().resultList(function(data){
        received.value = data;
         });
     module.exports ={
      received: received,
      }
  </JavaScript>
<WhileActive>
   <Callback Handler="{getData}" />
 </WhileActive>
<StackPanel Dock="Top" ItemSpacing="3" Margin="4" Height="200" Color="Blue">
  
  <Each Items="{received}">
    <DockPanel>
      <Text Value="{name}" Dock="Left" />
      <Text Value="{address}" Dock="Right" />
    </DockPanel>
  </Each>
</StackPanel>
5

But still problem is there

6

There is a lot going on in the code you pasted, and there are several things that could have gone wrong. I will however take a wild guess and suggest a single change:

replace received.value = data; with received.replaceAll(data);.

And to reiterate: make sure to read the docs on working with Observables, especially the lists: https://www.fusetools.com/docs/fusejs/observable-api#observable-lists

7

The actual code is not messed like the one I pasted here.
I tried received.replaceAll(data); too but still the problem is there, when console log the “data” it’s just a simple array of objects.

8

Well from that code it’s about everything I can tell. One more thing to try would be replacing WhileActive with Activated, but that is unlikely to change anything if you say that you can console.log() the data.

Either it’s a platform/device-specific issue and you should post a full reproduction project along with OS/device information,
Or the problem is somewhere else, outside of the code you’ve shown.

9
Finally find the problem, There was some parsing probem

\ db.Restaurant.find().resultList().then(function(res){
received.replaceAll(JSON.parse(JSON.stringify(res)));
});

\Thanks for your precious hints