# Unable to display the results of an SQLite DB Query on UX

**URL:** <https://forums.fusetools.com/t/unable-to-display-the-results-of-an-sqlite-db-query-on-ux/6118>\
**Category:** How-to Discussions\
**Created:** [September 19, 2016, 11:47am UTC](https://forums.fusetools.com/t/unable-to-display-the-results-of-an-sqlite-db-query-on-ux/6118 "2016-09-19T11:47:21Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Martin\_Kihuha](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/martin_kihuha/32/339_2.png) [@Martin\_Kihuha](https://forums.fusetools.com/u/Martin_Kihuha)\
**Post date:** [September 19, 2016, 11:47am UTC](https://forums.fusetools.com/t/unable-to-display-the-results-of-an-sqlite-db-query-on-ux/6118/1 "2016-09-19T11:47:21Z")

</div>

I’m building an app that fetches data from SQLite and then displays info to the user. Challenge is in displaying detailed info after selecting an item where I get the below response but I cannot display the specific details i.e. title or beds in the UX

`[{"prop_id":"2","title":"This Title","price":"200","beds":"4","baths":"5","excerpt":"Description of this property\n","contract":"RENT"}]`

I have an observable which I assign the result of the above database query and then parse it to be able to display it’s result on the console as shown below:

```auto
var Observable = require("FuseJS/Observable");
var sqlite = require("SQLite");
var det = sqlite.open("my.sqlite");
var prop = Observable();

this.onParameterChanged(function(param) {
	debug_log("Fetching Property ID: " + param);
	getDetails(param);
});

function getDetails(id) {
	try {
		var data = det.query("SELECT * FROM table WHERE prop_id = ?", id);
		prop.value = JSON.stringify(data);
		console.log(prop.value);
	}
	catch (e) {
		console.log("Unable to retrieve details from DB\n" + e);
	}
}

module.exports = {
	prop: prop,
	back: function() {
		router.goBack();
	},
	search: function() {
		router.push("search");
	}
}

```

I am able to display the result of prop within a Text element i.e. {prop}" displays `[{"prop_id":"2","title":"This Title","price":"200","beds":"4","baths":"5","excerpt":"Description of this property\n","contract":"RENT"}]` on preview. However, I cannot get the value of {prop.title}, {prop.beds} etc

Where could I be going wrong in my code?

---

<div class="post-metadata">

**Author:** ![Vegard\_Strand\_Lende](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/vegard_strand_lende/32/349_2.png) [@Vegard\_Strand\_Lende](https://forums.fusetools.com/u/Vegard_Strand_Lende)\
**Post date:** [September 19, 2016, 3:42pm UTC](https://forums.fusetools.com/t/unable-to-display-the-results-of-an-sqlite-db-query-on-ux/6118/2 "2016-09-19T15:42:00Z")

</div>

You need to parse your JSON string into JavaScript objects. You can do that with [**`JSON.parse()`**](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse). Then query the JS object for whatever property you want.

For example:

```auto
var jsonString = ...; // The JSON string you get from your database
var obj = JSON.parse(jsonString);
var title = obj[0].title;
var beds = obj[0].beds;

```

---

<div class="post-metadata">

**Author:** ![Bjorn-Olav\_Strand](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bjorn-olav_strand/32/583_2.png) [@Bjorn-Olav\_Strand](https://forums.fusetools.com/u/Bjorn-Olav_Strand)\
**Post date:** [September 19, 2016, 7:43pm UTC](https://forums.fusetools.com/t/unable-to-display-the-results-of-an-sqlite-db-query-on-ux/6118/3 "2016-09-19T19:43:23Z")

</div>

`prop` gets set to the JSON string of the db-query. I would do `prop.replaceAll(data);`, instead of `prop.value = JSON.stringify(data);`

---

<div class="post-metadata">

**Author:** ![Martin\_Kihuha](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/martin_kihuha/32/339_2.png) [@Martin\_Kihuha](https://forums.fusetools.com/u/Martin_Kihuha)\
**Post date:** [September 19, 2016, 8:12pm UTC](https://forums.fusetools.com/t/unable-to-display-the-results-of-an-sqlite-db-query-on-ux/6118/4 "2016-09-19T20:12:30Z")

</div>

> **Vegard Strand Lende wrote:**
> 
> You need to parse your JSON string into JavaScript objects. You can do that with [**`JSON.parse()`**](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse). Then query the JS object for whatever property you want.
> 
> For example:
> 
> ```auto
> var jsonString = ...; // The JSON string you get from your database
> var obj = JSON.parse(jsonString);
> var title = obj[0].title;
> var beds = obj[0].beds;
> 
> ```

So I’ve made changes to my code as proposed by both Vegard Strand Lende and Bjorn-Olav Strand as shown below:

var Observable = require(“FuseJS/Observable”);  
var sqlite = require(“SQLite”);  
var det = sqlite.open(“my.sqlite”);  
var prop = Observable();

this.onParameterChanged(function(param) {  
debug\_log("Fetching Property ID: " + param);  
getDetails(param);  
});

function getDetails(id) {  
try {  
var data = det.query(“SELECT \* FROM propertiz WHERE prop\_id = ?”, id);  
var obj = JSON.parse(data);  
title.value = obj[0].title;  
[//prop.value](https://prop.value) = JSON.stringify(data);  
prop.replaceAll(data);  
testPahali(prop);  
}  
catch (e) {  
[//console.log](https://console.log)(“Unable to retrieve details from DB\n” + e);  
console.log(“\n” + e);  
}  
}

module.exports = {  
prop: prop,  
title: title,  
back: function() {  
router.goBack();  
},  
search: function() {  
router.push(“search”);  
}  
}

Unfortunately, I still get nothing displayed on my UX which looks like this:

I’ll appreciate any further assistance on the above issue as I have been banging my head on this issue for the past 2 weeks

---

<div class="post-metadata">

**Author:** ![Bjorn-Olav\_Strand](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bjorn-olav_strand/32/583_2.png) [@Bjorn-Olav\_Strand](https://forums.fusetools.com/u/Bjorn-Olav_Strand)\
**Post date:** [September 19, 2016, 8:34pm UTC](https://forums.fusetools.com/t/unable-to-display-the-results-of-an-sqlite-db-query-on-ux/6118/5 "2016-09-19T20:34:56Z")

</div>

> **Martin Kihuha wrote:**

```auto
> var Observable = require("FuseJS/Observable");
> var sqlite = require("SQLite");
> var det = sqlite.open("my.sqlite");
> var prop = Observable();
> 
> this.onParameterChanged(function(param) {
> debug_log("Fetching Property ID: " + param);
> getDetails(param);
> });
> 
> function getDetails(id) {
> try {
> var data = det.query("SELECT * FROM propertiz WHERE prop_id = ?", id);
> var obj = JSON.parse(data);
> title.value = obj[0].title;
> //prop.value = JSON.stringify(data);
> prop.replaceAll(data);
> testPahali(prop);
> }
> catch (e) {
> //console.log("Unable to retrieve details from DB\n" + e);
> console.log("\n" + e);
> }
> }
> 
> module.exports = {
> prop: prop,
> title: title,
> back: function() {
> router.goBack();
> },
> search: function() {
> router.push("search");
> }
> }

```

> Unfortunately, I still get nothing displayed on my UX which looks like this:

```auto
> <StackPanel>
> <pricText Value="{price}" />
> <locText Value="Karen" />
> <Rectangle Height="1" RowSpan="3" Fill="#02344A" Layer="Background" Margin="30,0" />
> <Grid RowCount="2" ColumnCount="2" Margin="40,10">
> <detText Row="0" Column="0" Value="{beds}" />
> <detText Row="0" Column="2" Value="{baths}" />
> <Rectangle Width="1" ColumnSpan="3" Fill="#02344A" Layer="Background" />
> <fa_bed Row="2" Column="0" TextColor="#000" TextAlignment="Center" />
> <Image Row="2" Column="2" Color="#000" File="Assets/shower.png" Height="20" Alignment="Center" />
> </Grid>
> </StackPanel>

```

> I’ll appreciate any further assistance on the above issue as I have been banging my head on this issue for the past 2 weeks

You will not need to `JSON.parse` the data from SQLite. It is not in JSON format, but returned as JavaScript Objects.

The problem is with your UX. You can try this to start:

```auto
<Each Items="{prop}">
<StackPanel>
	<pricText Value="{price}" />
	<locText Value="Karen" />
	<Rectangle Height="1" RowSpan="3" Fill="#02344A" Layer="Background" Margin="30,0" />
	<Grid RowCount="2" ColumnCount="2" Margin="40,10">
		<detText Row="0" Column="0" Value="{beds}" />
		<detText Row="0" Column="2" Value="{baths}" />
		<Rectangle Width="1" ColumnSpan="3" Fill="#02344A" Layer="Background" />
		<fa_bed Row="2" Column="0" TextColor="#000" TextAlignment="Center" />
		<Image Row="2" Column="2" Color="#000" File="Assets/shower.png" Height="20" Alignment="Center" />
	</Grid>
</StackPanel>
</Each>

```

---

<div class="post-metadata">

**Author:** ![Martin\_Kihuha](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/martin_kihuha/32/339_2.png) [@Martin\_Kihuha](https://forums.fusetools.com/u/Martin_Kihuha)\
**Post date:** [September 22, 2016, 5:34am UTC](https://forums.fusetools.com/t/unable-to-display-the-results-of-an-sqlite-db-query-on-ux/6118/6 "2016-09-22T05:34:02Z")

</div>

Apologies on my delayed response as I have been traveling with limited access to the Internet.

I made the proposed changes as shown below without any difference as I still cannot display the values on my UX:

this.onParameterChanged(function(param) {  
debug\_log("Fetching Property ID: " + param);  
getDetails(param);  
});

function getDetails(id) {  
try {  
var data = det.query(“SELECT \* FROM propertiz WHERE prop\_id = ?”, id);  
prop.value = JSON.parse(data);  
console.log(prop.value);  
}  
catch (e) {  
[//console.log](https://console.log)(“Unable to retrieve details from DB\n” + e);  
console.log("\n" + e);  
}  
}

module.exports = {  
prop: prop,  
back: function() {  
router.goBack();  
},  
search: function() {  
router.push(“search”);  
}  
}

I’m not sure where I could be going wrong. So I’ll tear down my code and start afresh to see if there is something amiss.

---

<div class="post-metadata">

**Author:** ![Bjorn-Olav\_Strand](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bjorn-olav_strand/32/583_2.png) [@Bjorn-Olav\_Strand](https://forums.fusetools.com/u/Bjorn-Olav_Strand)\
**Post date:** [September 22, 2016, 8:17am UTC](https://forums.fusetools.com/t/unable-to-display-the-results-of-an-sqlite-db-query-on-ux/6118/7 "2016-09-22T08:17:14Z")

</div>

Return value from `query` is not a JSON string.

---

<div class="post-metadata">

**Author:** ![Martin\_Kihuha](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/martin_kihuha/32/339_2.png) [@Martin\_Kihuha](https://forums.fusetools.com/u/Martin_Kihuha)\
**Post date:** [September 22, 2016, 10:27am UTC](https://forums.fusetools.com/t/unable-to-display-the-results-of-an-sqlite-db-query-on-ux/6118/8 "2016-09-22T10:27:31Z")

</div>

> **Bjørn-Olav Strand wrote:**
> 
> Return value from `query` is not a JSON string.

Isn’t that why I then populate it into my Observable variable using this line:

prop.value = JSON.parse(data);

Or what is the best way to handle it?

---

<div class="post-metadata">

**Author:** ![Bjorn-Olav\_Strand](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bjorn-olav_strand/32/583_2.png) [@Bjorn-Olav\_Strand](https://forums.fusetools.com/u/Bjorn-Olav_Strand)\
**Post date:** [September 22, 2016, 10:29am UTC](https://forums.fusetools.com/t/unable-to-display-the-results-of-an-sqlite-db-query-on-ux/6118/9 "2016-09-22T10:29:19Z")

</div>

```
prop.replaceAll(data);
```

---

<div class="post-metadata">

**Author:** ![Martin\_Kihuha](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/martin_kihuha/32/339_2.png) [@Martin\_Kihuha](https://forums.fusetools.com/u/Martin_Kihuha)\
**Post date:** [September 22, 2016, 10:46am UTC](https://forums.fusetools.com/t/unable-to-display-the-results-of-an-sqlite-db-query-on-ux/6118/10 "2016-09-22T10:46:05Z")

</div>

> **Bjørn-Olav Strand wrote:**
> 
> ```
> prop.replaceAll(data);
> 
> ```

Thanks Bjørn-Olav Strand. This is now working