# Fetching JSON locally

**URL:** <https://forums.fusetools.com/t/fetching-json-locally/2858>\
**Category:** How-to Discussions\
**Created:** [July 7, 2016, 6:41pm UTC](https://forums.fusetools.com/t/fetching-json-locally/2858 "2016-07-07T18:41:06Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![asaxionis](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@asaxionis](https://forums.fusetools.com/u/asaxionis)\
**Post date:** [July 7, 2016, 6:41pm UTC](https://forums.fusetools.com/t/fetching-json-locally/2858/1 "2016-07-07T18:41:06Z")

</div>

Hello so I am not understanding how to fetch a JSON file locally and display the data; I understand I need to use

```auto

var Storage = require("FuseJS/Storage");

```

I’m just trying to do what the different colors JSON through HTTP are doing, except I am not understanding how to do it locally. Currently the json file is colors.json and the app goes as followed:

```auto
<App Background="#eee">
    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />
        <ScrollView>
            <Grid ColumnCount="2">
                <JavaScript>
                    var Observable = require("FuseJS/Observable");

                    var Storage = require("FuseJS/Storage");

                    var data = Observable();

                    Storage.read("color.json")
                        .then(function(contents) { 
                            data.value = contents.json(); 
                        });

                    module.exports = {
                        data: data
                    };
                </JavaScript>
                <Each Items="{data.colorsArray}">
                    <DockPanel Height="120" Margin="10,0">
                        <Panel DockPanel.Dock="Top" Margin="10" Height="30">
                            <Rectangle Layer="Background" CornerRadius="10" Fill="#fff"/>
                            <Text Value="{colorName}" TextAlignment="Center" Alignment="Center" />
                        </Panel>

                        <Rectangle Layer="Background" CornerRadius="10" Fill="{hexValue}"/>
                    </DockPanel>
                </Each>
            </Grid>
        </ScrollView>
    </DockPanel>
</App>

```

If someone could point in the right direction of how to observe the json file locally that would be fantastic, the documentation didn’t really help me as there isn’t much explanation for it.

And when I try writing to a text file the code isn’t working even though I have the file mytxtfile.txt listed as for where it shoud go (this part is litterally straight from the documentation) it says in the console that it wrote it successfully, but when i got to the file nothing is there.

```auto
<App>
    <JavaScript>
            var Storage = require("FuseJS/Storage");

            var success = Storage.write("mytxtfile.txt", "Hello from Fuse!");
                if(success) {
                    console.log("Successfully wrote to file");
                }
                else {
                    console.log("An error occured!");
                }

    </JavaScript>
</App>

```

---

<div class="post-metadata">

**Author:** ![Ish\_Singh](https://avatars.discourse-cdn.com/v4/letter/i/4bbf92/32.png) [@Ish\_Singh](https://forums.fusetools.com/u/Ish_Singh)\
**Post date:** [July 7, 2016, 6:43pm UTC](https://forums.fusetools.com/t/fetching-json-locally/2858/2 "2016-07-07T18:43:48Z")

</div>

Here is a short snippet that I use to read a file and parse JSON.

```auto
storage.read("kb.favorites.v2.txt").then(function (content)
  {
    //debug_log ('inside read favorite file');
    if (content)
    {
      //debug_log(content);
      var f = JSON.parse(content);
      //favorites.clear();
      debug_log ('favorites file read');
      //debug_log (JSON.stringify(f));
      favorites = f;
      //debug_log(JSON.stringify(favorites));

    }
  });

```

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [July 8, 2016, 6:11am UTC](https://forums.fusetools.com/t/fetching-json-locally/2858/3 "2016-07-08T06:11:15Z")

</div>

The docs explain it correctly, you used them wrong:

(One thing they don’t explain, but not sure if its true: I think reading for storage will only work for files you written via the Storage api, try using the bundle API)

```auto
var Bundle = require('FuseJS/Bundle');
Bundle.read('color.json')
    .then(function(contents) {
        // you should log what contents is (which should be a string, which means it doesn't have a json method)
        data.value = JSON.parse(contents); 
    });

```

and for writing:

```auto
var Storage = require('FuseJS/Storage');

Storage.write('mytxtfile.txt', 'Hello, from Fuse!')
    .then(function(success) {
        success // boolean
        // do your check inside here
    });

```

**For Fuse Team Reading This:** The `write` api should change, instead of returning a success boolean, the promise should `resolve` if successful returning the content back, and `reject` if failed returning the error.

---

<div class="post-metadata">

**Author:** ![asaxionis](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@asaxionis](https://forums.fusetools.com/u/asaxionis)\
**Post date:** [July 8, 2016, 2:09pm UTC](https://forums.fusetools.com/t/fetching-json-locally/2858/4 "2016-07-08T14:09:29Z")

</div>

> **Edwin Reynoso wrote:**
> 
> The docs explain it correctly, you used them wrong:
> 
> (One thing they don’t explain, but not sure if its true: I think reading for storage will only work for files you written via the Storage api, try using the bundle API)
> 
> ```uno
> var Bundle = require('FuseJS/Bundle');
> Bundle.read('color.json')
> .then(function(contents) {
> // you should log what contents is (which should be a string, which means it doesn't have a json method)
> data.value = JSON.parse(contents); 
> });
> 
> ```
> 
> and for writing:
> 
> ```uno
> var Storage = require('FuseJS/Storage');
> 
> Storage.write('mytxtfile.txt', 'Hello, from Fuse!')
> .then(function(success) {
> success // boolean
> // do your check inside here
> });
> 
> ```
> 
> **For Fuse Team Reading This:** The `write` api should change, instead of returning a success boolean, the promise should `resolve` if successful returning the content back, and `reject` if failed returning the error.

I’m sorry, but it seems like it didn’t want to work still; the mainview is looking like this now, and still doesn’t want to work.

```ux

<App Background="#eee">
    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />
        <ScrollView>
            <Grid ColumnCount="2">
                <JavaScript>

                  var Observable = require("FuseJS/Observable");

                    var Storage = require("FuseJS/Storage");

                    var Bundle = require('FuseJS/Bundle');

                    var data = Observable();

                  / Storage.read("color.json")
                        .then(function(contents) { 
                            return contents.json(); 
                        });

                     fetch('https://fuseweb.azureedge.net/forum-user-uploads/2016/08/22/pkzm4Tnk7v2s-legacy-files-ZjPdBhWNdPRMI4qK-colors.json&#39;)
                        .then(function(response) { return response.json(); })
                        .then(function(responseObject) { data.value = responseObject; });

                    /

                Bundle.read('color.json')
                    .then(function(contents) {
                        data.value = JSON.parse(contents); 
                    });

                    module.exports = {
                        data: data
                    };
                </JavaScript>
                <Each Items="{data.colorsArray}">
                    <DockPanel Height="120" Margin="10,0">
                        <Panel DockPanel.Dock="Top" Margin="10" Height="30">
                            <Rectangle Layer="Background" CornerRadius="10" Fill="#fff"/>
                            <Text Value="{colorName}" TextAlignment="Center" Alignment="Center" />
                        </Panel>

                        <Rectangle Layer="Background" CornerRadius="10" Fill="{hexValue}"/>
                    </DockPanel>
                </Each>
            </Grid>
        </ScrollView>
    </DockPanel>
</App>

```

I’ve never used JSON before so sorry for the invoncenience!

---

<div class="post-metadata">

**Author:** ![Tom1](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@Tom1](https://forums.fusetools.com/u/Tom1)\
**Post date:** [July 9, 2016, 4:29am UTC](https://forums.fusetools.com/t/fetching-json-locally/2858/5 "2016-07-09T04:29:43Z")

</div>

I am having same problem. I used Bundle. Below is my list.json file

```auto
[{
  "Director": [
    {
      "name": "Bruce Knight"
    }
  ],
  "Manager": [
    {
      "name": "Jennifer Mccoy"
    }
  ],
  "Assistance": [
    {
      "name": "Rachel Lopez"
    }
  ]
}]

```

JavaScript code:

```auto
     var Observable = require("FuseJS/Observable");

     var Bundle = require('FuseJS/Bundle');

      Bundle.read('list.json')
                .then(function(contents) {
                    data.value = JSON.parse(contents);
                    console.log("Reading data from file : " + data);
                }, function(error){
          console.log(error);
      });

```

There is no output. and yes I put “\*.json:Bundle” on project

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [July 9, 2016, 5:12am UTC](https://forums.fusetools.com/t/fetching-json-locally/2858/6 "2016-07-09T05:12:42Z")

</div>

It’s pretty weird how Observables work, so for an array instead of setting the Obervable value call `refreshAll`

```auto
<App>
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        var Bundle = require('FuseJS/Bundle');
        var Storage = require('FuseJS/Storage');

        var peopleObservable = Observable();
        Bundle.read('Assets/test.json')
            .then(function (content) {
                var people = JSON.parse(content);
                console.log('People:', people);
                peopleObservable.refreshAll(people);
            });
        module.exports = {
            peopleObservable: peopleObservable
        }
    </JavaScript>
    <StackPanel>
        <Each Items="{peopleObservable}">
            <Text Value="Name:" />
            <Text Value="{name}" />
            <Text Value="Developer:" />
            <Text Value="{isDeveloper}" />
        </Each>
    </StackPanel>
</App>

```

Then for a single big object set the `value` property:

```auto
<App>
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        var Bundle = require('FuseJS/Bundle');
        var Storage = require('FuseJS/Storage');

        var peopleObservable = Observable();
        Bundle.read('Assets/test.json')
            .then(function (content) {
                var people = JSON.parse(content);
                console.log('People:', people);
                peopleObservable.value = people;
            });
        module.exports = {
            peopleObservable: peopleObservable
        }
    </JavaScript>
    <StackPanel>
        <Each Items="{peopleObservable}">
            <Text Value="Name:" />
            <Text Value="{name}" />
            <Text Value="Developer:" />
            <Text Value="{isDeveloper}" />
        </Each>
    </StackPanel>
</App>

```

Here’s some helper functions:

```auto
<App>
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        var Bundle = require('FuseJS/Bundle');
        var Storage = require('FuseJS/Storage');

        var peopleObservable = Observable();
        var testJSON = readJSON('Assets/test.json');

        promiseJSONToObservable(testJSON, peopleObservable)
            .then(function (data) {
                // when observable value changed
            });

        function readJSON(filePath) {
            return Bundle.read(filePath)
            .then(function (content) {
                return JSON.parse(content);
            });
        }

        function promiseJSONToObservable(data, obs) {
            return data.then(function (data) {
                if(data instanceof Array) {
                    obs.refreshAll(data);
                } else {
                    obs.value = data;
                }
            });
        }

        module.exports = {
            peopleObservable: peopleObservable
        }
    </JavaScript>
    <StackPanel>
        <Each Items="{peopleObservable}">
            <Text Value="Name:" />
            <Text Value="{name}" />
            <Text Value="Developer:" />
            <Text Value="{isDeveloper}" />
        </Each>
    </StackPanel>
</App>

```

Now I feel like I’m overcomplicating things now, this is not straight forward, and I’m hope that I am overcomplicating things, and this should be easier, hopefully the fuse team can help here.

---

<div class="post-metadata">

**Author:** ![BeeWarloc](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/beewarloc/32/186_2.png) [@BeeWarloc](https://forums.fusetools.com/u/BeeWarloc)\
**Post date:** [July 12, 2016, 10:16am UTC](https://forums.fusetools.com/t/fetching-json-locally/2858/7 "2016-07-12T10:16:46Z")

</div>

Hi there…

First off, thanks to Edwin for the correct answer.

This is a common confusion regarding the `value` property, as it actually refers to the first item of an `Observable` list. This makes sense for single item observables, but not so much when dealing with several items.

We’re having internal discussions on how to make this more clear.

asaxionis, Tom, Ish, does this resolve your problems?

- 

Regarding the `write` method of the Storage module, we have soon-to-be-released FileSystem module that aims to replace the Storage module. The `write` methods of that new API rejects the promise instead of returning a boolean, as you suggested. 🙂