# JSON fetch inside a function

**URL:** <https://forums.fusetools.com/t/json-fetch-inside-a-function/4982>\
**Category:** How-to Discussions\
**Created:** [February 3, 2017, 8:24pm UTC](https://forums.fusetools.com/t/json-fetch-inside-a-function/4982 "2017-02-03T20:24:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![girr.benjamin](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/girr.benjamin/32/210_2.png) [@girr.benjamin](https://forums.fusetools.com/u/girr.benjamin)\
**Post date:** [February 3, 2017, 8:24pm UTC](https://forums.fusetools.com/t/json-fetch-inside-a-function/4982/1 "2017-02-03T20:24:21Z")

</div>

Hello everybody,

I’ll try to call a function in my JavaScript to load a special article and display it in the UX. If I do this without a function directly in the JavaScript everything works fine. Inside the responseObject function the console.log is also perfect but then outside of this the Rezept variable is empty also if I do a return. I really get put of mind, looking for a solution since one week! Thanks a lot for your support and ideas!

```auto
var Rezept = Observable();

function getRecipe(recipeURL) {	

  fetch('https://XXX/recipes/api/recipes/51')
                        .then(function(response) { return response.json(); })
                        .then(function(responseObject) { 
                        	Rezept.value = responseObject; 
                        	console.log(JSON.stringify(Rezept));
                        	return Rezept;
                        });
							console.log(JSON.stringify(Rezept));
}

module.exports = {
Rezept: Rezept
}

```

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [February 4, 2017, 11:37am UTC](https://forums.fusetools.com/t/json-fetch-inside-a-function/4982/2 "2017-02-04T11:37:50Z")

</div>

I reformatted your post a bit. Keep in mind that you can use triple backticks (```) to mark code blocks. 🙂

The problem you’re experiencing might be because nothing subscribes to the Rezept observable in the UX? You can check these docs for more info on this: [https://www.fusetools.com/docs/fusejs/observable#subscribing-to-changes-in-observables](https://www.fusetools.com/docs/fusejs/observable#subscribing-to-changes-in-observables)

Also, both fetch and observables are asynchronous, so the 2nd console.log() you have in your code might be executed _before_ there is any data in the Rezept variable.

---

<div class="post-metadata">

**Author:** ![girr.benjamin](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/girr.benjamin/32/210_2.png) [@girr.benjamin](https://forums.fusetools.com/u/girr.benjamin)\
**Post date:** [February 4, 2017, 12:34pm UTC](https://forums.fusetools.com/t/json-fetch-inside-a-function/4982/3 "2017-02-04T12:34:01Z")

</div>

Hi Remi,

thanks for your styling.

I use the Rezept in the UX of the RecipePage like you can see below. Everything is working fine if I’m loading it directly in the JavaScript without calling it in a JavaScript function. Once I added it to the function in JavaScript it’s not working and the data is neither in the console and the UX:

```auto
<Each Items="{Rezept}">
 <Panel>	
   <DockPanel>
     <Panel Dock="Top" Background="#333" MaxWidth="300" Alignment="Left" Margin="0,20,0,0" Opacity="0.8">
     <Text Value="{recipeName}" TextWrapping="Wrap" Alignment="TopLeft" Margin="10" Color="#FFFFFF" Font="Patua" FontSize="20"/>
    </Panel>
  </DockPanel>
<Each Items="{images}">
 <Image Url="http://XXX/{imageUrl}" Dock="Left" Margin="0,10,0,0"/>	
 </Each>
</Panel>			
</Each>

```

---

<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:** [February 6, 2017, 9:02am UTC](https://forums.fusetools.com/t/json-fetch-inside-a-function/4982/4 "2017-02-06T09:02:36Z")

</div>

You are not doing any error checking. Add `.catch(function(error) { }` after your last `.then`.