# Access single JSON-Object

**URL:** <https://forums.fusetools.com/t/access-single-json-object/646>\
**Category:** General\
**Created:** [December 8, 2016, 12:27pm UTC](https://forums.fusetools.com/t/access-single-json-object/646 "2016-12-08T12:27:57Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [December 8, 2016, 12:27pm UTC](https://forums.fusetools.com/t/access-single-json-object/646/1 "2016-12-08T12:27:57Z")

</div>

Hi!

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?

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [December 8, 2016, 12:35pm UTC](https://forums.fusetools.com/t/access-single-json-object/646/2 "2016-12-08T12:35:20Z")

</div>

Hi!

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:

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

```

---

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [December 8, 2016, 12:50pm UTC](https://forums.fusetools.com/t/access-single-json-object/646/3 "2016-12-08T12:50:46Z")

</div>

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:

```auto
TypeError: Cannot read property '1' of undefined

```

This is my current Javascript File:

```auto
	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:

```auto
{
    "Database":[
 {
   "id": 0,
   "author": "x",
   "description": "xyz"
 },
 {
"id": 1,
   "author": "xy",
   "description": "xyzxyz"
 }

```

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [December 8, 2016, 12:56pm UTC](https://forums.fusetools.com/t/access-single-json-object/646/4 "2016-12-08T12:56:19Z")

</div>

try:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [December 8, 2016, 1:00pm UTC](https://forums.fusetools.com/t/access-single-json-object/646/5 "2016-12-08T13:00:29Z")

</div>

I tried to but I still get an error message:

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

```

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [December 8, 2016, 1:04pm UTC](https://forums.fusetools.com/t/access-single-json-object/646/6 "2016-12-08T13:04:37Z")

</div>

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`](https://www.fusetools.com/docs/fusejs/observable#subscribing-to-updates) 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.

---

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [December 8, 2016, 1:14pm UTC](https://forums.fusetools.com/t/access-single-json-object/646/7 "2016-12-08T13:14:23Z")

</div>

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [December 8, 2016, 1:21pm UTC](https://forums.fusetools.com/t/access-single-json-object/646/8 "2016-12-08T13:21:04Z")

</div>

Right, this is a case for `Router`/`Navigator` 🙂

Have you by chance gone through our [tutorial](https://www.fusetools.com/docs/tutorial/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](https://www.fusetools.com/docs/tutorial/multiple-hikes), [3](https://www.fusetools.com/docs/tutorial/splitting-up-components), and (especially) [4](https://www.fusetools.com/docs/tutorial/navigation-and-routing) 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 🙂

---

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [December 8, 2016, 1:25pm UTC](https://forums.fusetools.com/t/access-single-json-object/646/9 "2016-12-08T13:25:45Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [December 8, 2016, 1:27pm UTC](https://forums.fusetools.com/t/access-single-json-object/646/10 "2016-12-08T13:27:32Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [December 8, 2016, 1:36pm UTC](https://forums.fusetools.com/t/access-single-json-object/646/11 "2016-12-08T13:36:12Z")

</div>

Thats exactly what I want.

Thank you very much!

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [December 8, 2016, 1:36pm UTC](https://forums.fusetools.com/t/access-single-json-object/646/12 "2016-12-08T13:36:41Z")

</div>

Sweet, np!

---

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [December 10, 2016, 8:48am UTC](https://forums.fusetools.com/t/access-single-json-object/646/13 "2016-12-10T08:48:13Z")

</div>

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.

```auto
data.onValueChanged(module, function(x) {
    var thirdItem = data.value.Database[1];
    console.log(thirdItem.title);
});

```

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

Any ideas what the error causes?

EDIT:

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:

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

```