Saving a json from an API into context/backend

General
#1

So I am not super familiar with using context or backend with fuse, I am an iOS developer and I used something similar in Swift, but basically all my question is, I’m making an API call to Firebase to bring down a json full of info their, and I want to parse through it, separating the objects within the json, and i need to save it onto the backend of the app so I can display it later. How exactly does this work? Mostly, how do I parse a json and save it into an array in Fuse?

Thanks for your help in advance!

#2

Hey!

You can check this example how to fetch data from server and store data as Observable object. If you want to get an array, just use .toArray operator on Observable object.

#3

I’ve been trying to implement that, but the problem is that in that example, the JSON that is being looped through, the feed for the news, is already an array. My json is just layers of json, and is not an array since I am pulling it down from firebase. How do you loop through the keys of a json? the for loop doesn’t work in the way I am trying.

Here is the json I am trying to parse through

{"\"32cfeb02-eb38-447e-90f5-a7f421531b12\"":{"comments":"Red","fuelType":"Unl","id":"\"32cfeb02-eb38-447e-90f5-a7f421531b12\"","vmake":"Mazda","vmodel":"3","vyear":"2014"},"\"38ce58e2-2b8e-45ca-9180-a9003af7bddf\"":{"comments":":)","fuelType":"Woo","id":"\"38ce58e2-2b8e-45ca-9180-a9003af7bddf\"","vmake":"Doge","vmodel":"Duranho","vyear":"2016"},"\"578abd5c-09b9-4063-88b9-602dda2b17b7\"":{"comments":"Red","fuelType":"Unl","id":"\"578abd5c-09b9-4063-88b9-602dda2b17b7\"","vmake":"Fird","vmodel":"3","vyear":"2014"},"\"837aac36-4745-406d-a6ca-1a4bf58041f1\"":{"comments":"","fuelType":"","id":"\"837aac36-4745-406d-a6ca-1a4bf58041f1\"","vmake":"Ford","vmodel":"Littlecar","vyear":"2010"}}

Here are my two attempts to recreate that example and try to make it work for my json:

fetch(url).then(function(response) {
        console.log(JSON.stringify(response));
        return response.json();
    }).then(function(json) {
        var firebaseJson = JSON.stringify(json);
        for (var i in firebaseJson.vehicles) {
            Context.vehicles.push(new Context.Vehicle(json.vehicles.i));
        }

fetch(url).then(function(response) {
        console.log(JSON.stringify(response));
        return response.json();
    }).then(function(json) {
        var firebaseJson = JSON.stringify(json);
        for (var i in firebaseJson.vehicles) {
            Context.vehicles.push(new Context.Vehicle(json.vehicles[1]));
        }

And here is that Context.Vehicle function:

function Vehicle(data) {
	console.log(data);
	this.vyear = data.vyear;
	this.vmake = data.vmake;
	this.vmodel = data.vmodel;
	this.fuelType = data.fuelType;
	this.comments = data.comments;
	this.id = data.id;
}
#4

I was also just thinking that something similar to this should do the trick

var firebaseJson = JSON.stringify(json);
        var vehicleList = firebaseJson.vehicles;
        Context.vehicles.push(vehicleList.map(function(x) { return x; });

however, it doesn’t yet. If anyone checking this thread thinks of why its not working, let me know.

#5

Hi Caleb,

the root cause of your issue appears to be that your API returns an object, not an array. In JavaScript, there is no straightforward way to iterate over object keys as if it was an array.

To work around that, there are several options, perfectly explained in this stackoverflow answer. I personally think that getting the object keys in an array and then looping over that is a pretty good approach.

Here, I took the JSON object that you receive from your backend, and put it right into Fuse JavaScript block. Obviously I’m not using fetch in this case as I don’t have your API URL, but this should be enough to explain the problem and solution:

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

        var json = {"\"32cfeb02-eb38-447e-90f5-a7f421531b12\"":{"comments":"Red","fuelType":"Unl","id":"\"32cfeb02-eb38-447e-90f5-a7f421531b12\"","vmake":"Mazda","vmodel":"3","vyear":"2014"},"\"38ce58e2-2b8e-45ca-9180-a9003af7bddf\"":{"comments":":)","fuelType":"Woo","id":"\"38ce58e2-2b8e-45ca-9180-a9003af7bddf\"","vmake":"Doge","vmodel":"Duranho","vyear":"2016"},"\"578abd5c-09b9-4063-88b9-602dda2b17b7\"":{"comments":"Red","fuelType":"Unl","id":"\"578abd5c-09b9-4063-88b9-602dda2b17b7\"","vmake":"Fird","vmodel":"3","vyear":"2014"},"\"837aac36-4745-406d-a6ca-1a4bf58041f1\"":{"comments":"","fuelType":"","id":"\"837aac36-4745-406d-a6ca-1a4bf58041f1\"","vmake":"Ford","vmodel":"Littlecar","vyear":"2010"}};

        var keys = Object.keys(json);
        keys.forEach(function(k) {
            list.add(new Vehicle(json[k]));
        });

        function Vehicle(data) {
            this.id = data.id;
            this.vyear = data.vyear;
            this.vmake = data.vmake;
            this.vmodel = data.vmodel;
            this.fuelType = data.fuelType;
            this.comments = data.comments;
        }

        module.exports = {
            list: list
        };
    </JavaScript>
    <ClientPanel>
        <ScrollView>
            <StackPanel Margin="4" ItemSpacing="2">
                <Each Items="{list}">
                    <StackPanel Orientation="Horizontal" ItemSpacing="8">
                        <Text Value="{vmake}" />
                        <Text Value="{vmodel}" />
                        <Text Value="{comments}" />
                    </StackPanel>
                </Each>
            </StackPanel>
        </ScrollView>
    </ClientPanel>
</App>
#6

Thanks for the help! Combined with that, I got it working.