Access single JSON-Object


I have a JSON-File just like in the “Basic JSON and HTTP usage” Example.
But I’m trying to figure out how I can access just a single Object of my Array.

I don’t want to get every Object with “Each”.
I need something like “data.colorsArray.2” to just get the stuff from only this object.

Is there any possibility for this?


You do this in JavaScript using the indexing operator array[]. Note that array indexing is 0 based (meaning the 0th element is the first element of the array).

Here is an example:

var myArray = [1,2,3];
var thirdItem = myArray[2];

Can i directly do this with my data variable (in which the JSON gets fetched)?
I tried to, but it doesn’t seem to work.

It just gives me this error:

TypeError: Cannot read property '1' of undefined

This is my current Javascript File:

	var Observable = require("FuseJS/Observable");
    var data = Observable();
	fetch('[Link to my JSON File]')
    .then(function(response) { return response.json(); })
    .then(function(responseObject) { data.value = responseObject; });

    var thirdItem = data.Database[1];
	module.exports = {
    	data: data

My JSON looks like this:

   "id": 0,
   "author": "x",
   "description": "xyz"
"id": 1,
   "author": "xy",
   "description": "xyzxyz"


var thirdItem = data.value.Database[1];

Instead of var thirdItem = data.Database[1]; like you have currently. Observable wraps another value inside, so we have to get the value out of it and then treat that as an array.

I tried to but I still get an error message:

LOG: Error: JavaScript error in Pages/poi.js line 7: Name: TypeError: Cannot read property 'Database' of undefined

Aha, ofc. This is because by the time you’re trying to look up the value in the data Observable, it hasn’t been populated yet with data from fetch. This is because fetch happens asynchronously; the code doesn’t “pause” while waiting for the HTTP request to occur. So, by the time the var thirdItem = data.Database[1]; line runs, data might not have gotten a value from the fetch yet. Does that make sense?

Depending on where/when you need thirdItem, there are a few different ways to make sure it’s only accessed once data has a value, for example, by subscribing to updates on data or simply doing the lookup as part of your fetch callbacks. It’s a bit hard to know what’s best though, as different methods are appropriate in different situations. If you could perhaps share a bit more of what you’re trying to do, we could probably help you find a nice pattern.

Ah, I see the problem.

I have a JSON-Database of nearby landmarks (with descriptions, links to images etc.).
This Database is fetched with my JS-File on Startup in my MainView.

I have another UX-Page, where I have an overview with all my landmarks inside my JSON.
I can perfectly get access to the informations here with

<Each Items="{data.Database}">

But when I go on a landmark in this overview, I want to change to a new UX-File with further informations to this landmark.

Somehow I need to track which Landmark i have pressed and transfer this information to the new UX-File.
And, of course, I need access to this single Object.

Right, this is a case for Router/Navigator :slight_smile:

Have you by chance gone through our tutorial? It covers quite a lot of ground and is especially helpful if you’re wondering how to put an app with multiple views together where data is passed between the views. It also talks about abstracting a backend and moving data in/out of it.

Particularly for your case, chapters 2, 3, and (especially) 4 should be most relevant, but I’d recommend reading through the whole thing to get a good overview of how the pieces fit together. If you imagine the hikes are your landmarks, it should be pretty clear :slight_smile:

Sounds great!
Thanks for you help.

Passing data between my views should be exactly what I need.
This should also solve my problem of accessing a single Database-Object, right?

I believe so; it sounds like you want an “overview” page (which you can build using your data Observable and Each), and when you press one of the items you want the corresponding landmark and to pass that to a detail page. All of these details are covered in those tutorial chapters :slight_smile:

Thats exactly what I want.

Thank you very much!

Sweet, np!

I tried to get it working by subscribing to updates because i’ll need the database in more cases.
The first error i mentioned above is gone now.
But unfortunately my landmark-Overview is not showing any entries anymore.

data.onValueChanged(module, function(x) {
    var thirdItem = data.value.Database[1];

If i uncomment the “var thirdItem”-Part, the Overview is working fine.

Any ideas what the error causes?


That part is obviously blocking something, because even the console.log afterwards is not executed (a console.log before the thirdItem is declared is working fine).

EDIT #2:
Nevermind. Got a naming-mistake in it…

Its working fine this way:

data.onValueChanged(module, function(x) {
    var thirdItem = data.value.poiDatabase[1];
    console.log("Title: " + thirdItem.title);