Fetching JSON as a feed

How-to Discussions
1

Hi.
I’m very new to this and I’ve been reading all the examples, youtube tutorials and many of the forums about this. But I can’t make it work and I don’t understand it. It is simple as I want to fetch data from JSON. Here I want to fetch the ‘title’ from my JSON data. Can anybody help me trying to explain how to fetch the data?

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

  function Article(item) {
    this.title = item.title;
  };

  fetch("https://dev.jexpo.se/dev/forms/news?getAttributes=1")
  .then(function(response) { return response.json(); })
  .then(function(responseObject) {

    var items = [];
    for (var i in responseObject.data.results) {
      items.push(new Article(responseObject.data.results[i]));
    }

    debug_log("Success" + JSON.stringify(data))
    data.replaceAll(items);
  });

  module.exports = {
    dataSource: data
  };

I’ve been trying to debug this for a time now, but my Fuse Monitor and Fuse Preview doesn’t always work so it’s kinda hard.

2

Hi Erica,

it seems you have hit a known macOS + local preview bug where on some occasions a connection to a https server would fail.

Here’s fully working code that runs fine on Android preview (iOS preview should be fine too), but logs Error: Network request failed to console when run on local preview:

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

    function Article(item) {
        this.title = item.title;
    };

    fetch("https://dev.jexpo.se/dev/forms/news?getAttributes=1")
    .then(function(response) { return response.json(); })
    .then(function(responseObject) {
        var items = [];
        responseObject.results.forEach(function(r) {
            items.push(new Article(r));
        });
        data.replaceAll(items);
        debug_log("data: " + JSON.stringify(data));
    }).catch(function(e) {
        console.log("Error: " + e.message);
    });

    module.exports = {
        dataSource: data
    };
    </JavaScript>
    <StackPanel Margin="16" ItemSpacing="16">
        <Each Items="{dataSource}">
            <Text Value="{title}" Alignment="Center" TextAlignment="Center" TextWrapping="Wrap" />
        </Each>
    </StackPanel>
</App>

Chaining .catch() blocks to promises is generally a good practice that aids in finding problems early.

Hope this helps!

3

Thank you so much! It worked beautifully on iOS preview aswell as Android preview.