How to display array values within JSON object

General
1

I am pretty new to using Fuse but finding it quite interesting. I need help on how to iterate JSON document with arrays within it using for() loop. The code below works well when accessing the outer objects but I want to display the array values within the individual JSON objects. For instance I want to display “value” under the body object and uri under field_image object.

<App Background="#ECEFF1">
	<JavaScript>
		var Observable = require("FuseJS/Observable");
		var pictures = Observable();

		fetch("http://thelimitlessladyboss.com/drupal/api/rest1/node/2.json")
		.then(function(result){
			result.json().then(function(data){
				for (var i = 1; i <=1; i++) {
					var item = data;
					pictures.add(item);
					}
			});
		});
		
            module.exports = {

			pictures: pictures
		}
		
	</JavaScript>
		<ScrollView ClipToBounds="true">
           <StackPanel>
               <Each Items="{pictures}">
                    <Text Value="{title}" TextWrapping="Wrap" Alignment="Left" />
                    <Text Value="{type}" TextWrapping="Wrap" Alignment="Left" />
                    <Text Value="{created}" TextWrapping="Wrap" Alignment="Left" />
                </Each>
           </StackPanel>
       </ScrollView>

</App> 

{
    "title": "Abbas Elit Fere Iustum Mauris Nibh Nisl Singularis Sudo Ymo",
    "status": "1",
    "comment": "2",
    "type": "article",
    "created": "1503271074",
    "changed": "1503774556",
 
    "body": {
        "und": [
            {
                "value": "Autem illum luptatum probo quadrum utinam validus. Metuo neo quae quidem. Bene decet illum loquor odio os pertineo tamen tego tum. Ludus nobis sagaciter venio. Commodo eligo gemino inhibeo quia quidne sino tincidunt utrum. Commoveo erat humo metuo populus vereor.\n\nAbico lenis verto. Elit iusto occuro quis singularis. Inhibeo scisco vulpes. Aptent autem commoveo duis olim quia suscipit venio.</p>\n",
                "safe_summary": ""
            }
        ]
    },
    "field_tags": [],
    "field_image": {
        "und": [
            {
                "filename": "imagefield_0zI9mu.gif",
                "uri": "public://field/image/imagefield_0zI9mu.gif",
                "filemime": "image/gif",
                "filesize": "4037",
                "status": "1",
               "title": "Abigo eligo esse ille lucidus ludus persto quidne typicus zelus.",
                "width": "442",
                "height": "478"
            }
        ]
    }
2

It should be as easy as referring to the right properties of the object in question. Something like this:

       <StackPanel>
           <Each Items="{pictures}">
                <Text Value="{title}" TextWrapping="Wrap" Alignment="Left" />
                <Text Value="{type}" TextWrapping="Wrap" Alignment="Left" />
                <Text Value="{created}" TextWrapping="Wrap" Alignment="Left" />
                <StackPanel>
                    <Each Items="{field_image.und}">
                        <Image Url="{uri}" />
                    </Each>
                </StackPanel>
                <StackPanel>
                    <Each Items="{body.und}">
                        <Text Value="{value}" TextWrapping="Wrap" Alignment="Left" />
                    </Each>
                </StackPanel>
            </Each>
       </StackPanel>

Please note that GIF images are not supported in Fuse.

3

Thanks for the reply. The code below still did not display values for the fields. Can you please set up the project at your end and see what the issue is? The JSON url is functional. I will really appreciate.

4

I did, and it did display the body.und.value for me just fine. It did not display the GIF image for the reason I noted in my reply above.