# How can i display data from a bundle?

**URL:** <https://forums.fusetools.com/t/how-can-i-display-data-from-a-bundle/6601>\
**Category:** How-to Discussions\
**Created:** [June 11, 2016, 10:05pm UTC](https://forums.fusetools.com/t/how-can-i-display-data-from-a-bundle/6601 "2016-06-11T22:05:36Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jesedu15](https://avatars.discourse-cdn.com/v4/letter/j/f17d59/32.png) [@jesedu15](https://forums.fusetools.com/u/jesedu15)\
**Post date:** [June 11, 2016, 10:05pm UTC](https://forums.fusetools.com/t/how-can-i-display-data-from-a-bundle/6601/1 "2016-06-11T22:05:36Z")

</div>

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/oGT59pxAdKKm-legacy-files-GG7XiJZFWL6zJ2mt-JzwBYvGrv3n7YQJKfSgheCma.png)

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/t1BtBkOxSgQY-legacy-files-R9nsNrvsvMYfxRqV-3-8plm4jYMUYZea8WzarYNn-.png)

---

<div class="post-metadata">

**Author:** ![Olle\_Fredriksson](https://avatars.discourse-cdn.com/v4/letter/o/e95f7d/32.png) [@Olle\_Fredriksson](https://forums.fusetools.com/u/Olle_Fredriksson)\
**Post date:** [June 13, 2016, 11:47am UTC](https://forums.fusetools.com/t/how-can-i-display-data-from-a-bundle/6601/2 "2016-06-13T11:47:33Z")

</div>

Hey!

You’ll need to add the file contents to the module exports, and probably also parse the file contents as JSON before you do that. It might help to read [the docs on databinding](https://www.fusetools.com/docs/fuse/reactive/databinding_1).

Hope that helps!

---

<div class="post-metadata">

**Author:** ![jesedu15](https://avatars.discourse-cdn.com/v4/letter/j/f17d59/32.png) [@jesedu15](https://forums.fusetools.com/u/jesedu15)\
**Post date:** [June 13, 2016, 9:56pm UTC](https://forums.fusetools.com/t/how-can-i-display-data-from-a-bundle/6601/3 "2016-06-13T21:56:15Z")

</div>

OLLe I did it like this, (i couldnt do it with the .json file), but doing this the images arent showing on the preview( with the {imagefile)

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/28rl5hclytlU-legacy-files-yyl8gmLxuJWFROMM-jBCZ6xt1dinbxvJ6AhjCoyhB.png)

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/flYYbS5wshGu-legacy-files-u72jqc8SW0hH5rlX-JhBOXu66i_d7tim7h_3gdDkj.png)

---

<div class="post-metadata">

**Author:** ![jesedu15](https://avatars.discourse-cdn.com/v4/letter/j/f17d59/32.png) [@jesedu15](https://forums.fusetools.com/u/jesedu15)\
**Post date:** [June 13, 2016, 10:09pm UTC](https://forums.fusetools.com/t/how-can-i-display-data-from-a-bundle/6601/4 "2016-06-13T22:09:54Z")

</div>

Olle Or if i create a json file and store it in Gitfub is even better. How can i create the json file? :'v

---

<div class="post-metadata">

**Author:** ![jesedu15](https://avatars.discourse-cdn.com/v4/letter/j/f17d59/32.png) [@jesedu15](https://forums.fusetools.com/u/jesedu15)\
**Post date:** [June 15, 2016, 9:05pm UTC](https://forums.fusetools.com/t/how-can-i-display-data-from-a-bundle/6601/5 "2016-06-15T21:05:12Z")

</div>

How? :'v

---

<div class="post-metadata">

**Author:** ![Anders\_Bondehagen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_bondehagen/32/98_2.png) [@Anders\_Bondehagen](https://forums.fusetools.com/u/Anders_Bondehagen)\
**Post date:** [June 20, 2016, 10:49am UTC](https://forums.fusetools.com/t/how-can-i-display-data-from-a-bundle/6601/6 "2016-06-20T10:49:40Z")

</div>

This is how Olle suggested it:

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

        var spiders = Observable();
        bundles.read('spiders.json').then(function(data) {
            spiders.value = JSON.parse(data);
        });

        module.exports = {
            spiders: spiders
        }
    </JavaScript>
    <StackPanel>
        <Each Items="{spiders.Araneomorphae}">
            <Text Value="{name}" />
            <Image File="{imagefile}" />
        </Each>
    </StackPanel>
</App>

```