Accessing JSON

piyush_kasliwal

We are facing accessing JSON from an file.

We are having the JSON file in the same directory as the HTML file / ENYO script file accessing the JSON file. We are not able to open the file itself.
Can some one please help us with opening and reading contents from an file.
Also if we get an sample how to parse JSON data.

PK.

piyush_kasliwal

Also we were not able to open an SQLite file in the same manner

omastudios

How were you attempting to open the JSON file? Please post your code if possible.

unwiredben

There's no reason to expect that you could open a SQLite file. No browser out there supports opening foreign SQLite files, although there may be a plugin for PhoneGap that can handle it for iOS or Android apps.

benluo

persistencejs does some kinds of your request. I ever did a mojo app for Palm Pre to use this lib (old version).

Wish it help you.

PrashantHadole

We are facing accessing Data from an JSON file.

{
	{"day1":"10"},
	{"day2":"11"},
	{"day3":"12"},
	{"day4":"13"},
	{"day5":"14"},
	{"day6":"15"},
	{"day7":"16"},
	{"day8":"17"},
	{"day9":"18"},
	{"day10":"19"}
}

This is my wt.json file and We have to access the weights of the each day from this file.

We have import this file using code.

And for access the day1 weight We used following code.

var Data = enyo.json.parse(localStorage.getItem('day1'));

But var Data not contains the weight for day1.

So, Can some one please help us and provide correct code for it.

PH.

ekdikeo

You may be able to use XHR to read the data in the file, and then parse it - but you definitely need to read up on how localStorage works, because that is not how it works.

rafa_bernad

@PrashantHadole The JSON you posted is not a valid JSON object, AFAIK.

quindo

@PrashantHadole If you want to test the json try this site: json.parser.online.fr/
Cut and Paste the json and it will parse it and show you what it can make of it :-)

unwiredben

jsonlint.com is the online parser I use to check things out.

localStorage doesn't mean "read from a file", it's just another kind of cookie where the browser can store data it got from other means. Using the enyo.Ajax kind to load from a file URL is what you need, but beware that Chrome restricts this a lot unless you start it with the right command line switch.

sjmiles

If your wt.json is next to index.html, and the file looks more like this:

{
	"day1":"10",
	"day2":"11",
	"day3":"12",
	"day4":"13",
	"day5":"14",
	"day6":"15",
	"day7":"16",
	"day8":"17",
	"day9":"18",
	"day10":"19"
}

Then you can access it with enyo code like this:

var request = new enyo.Ajax({url: "wt.json"});
request.response(this, function(inSender, inData) {
	this.items = inData;
	alert(this.items.day5); // shows "14"
});
request.go();

PrashantHadole

@sjmiles..............Thank you .........It's Work..............

aiff

@sjmiles your example dos`t use in ie?

sjmiles

As far as I know, it should work in all browsers (over http://, not necessarily file://, and only from a single origin).

Scott

palakpatel8

If i take..

a1=new Array("day1","day2","day3","day4","day5","day6","day7");

var request = new enyo.Ajax({url: "wt.json"});
request.response(this, function(inSender, inData) {
	this.items = inData;
	alert(this.items.a1[0]); // not show anything in alert
});

request.go();

But it does not show anything.....

sjmiles

It's not clear to me what is in your 'wt.json' file. If you are saying your JSON file contains this:

a1=new Array("day1","day2","day3","day4","day5","day6","day7");

This is not valid JSON, and you should be seeing an error in your console. Valid JSON would look like this:

{"a1": ["day1","day2","day3","day4","day5","day6","day7"]}

Scott

palakpatel8

Its my JSON file name as 'wt.json'

{
	"day1":10,
	"day2":11,
	"day3":12,
	"day4":13,
	"day5":14,
	"day6":15,
	"day7":16,
	"day8":17,
	"day9":20,
	"day10":19
}

palakpatel8

i want to acess wt.json using loop..

var request = new enyo.Ajax({url: "wt.json"});
request.response(this, function(inSender, inData) {
	this.items = inData;
        for(var i=1;i<7;i++)
        {
	    alert(this.items.day+""+i);  // not show anything in alert
        }
});

request.go();

dynamically this.items.day+""+i

that means
this.items.day1;
this.items.day2;......
this.items.day7

if some one knows solution for my problem then please send correct code.

sjmiles

this.items["day" + i]

PrashantHadole

Thank you very much sjmiles.............its work for the loop..........

palakpatel8

it works....thanks :)

piyush_kasliwal

Thanks all. Its working for me now.

Fred_D_Castillo

JSON to ENYO List

I am very new to JSON and ENYO. I am looking for help to turn some JSON info into a list. I have been playing with examples trying to get it to work but still no luck at this point. I don’t know enough to see what I need to change. I wanted to see if there is anyone who could look at what I have at this point and make suggestions. You can look at the live example I am playing with at http://webos.dtechz.com/test1/listtest.html. The example will show what I am trying to get. I need to create a dynamic list from the JSON file. You can also see my current JSON file at http://webos.dtechz.com/test1/listtest.json.
Any help would be greatly appreciated. Also if anyone knows of a tutorial that I could look at to learn JSON that would be great.

This is my current code:

<!doctype html>
<html>
<head>
	<title>SAP Systems List</title>
	<!-- -->
	<meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<!-- -->
	<script src="../enyo/enyo.js" type="text/javascript"></script>
	<script src="../lib/layout/package.js" type="text/javascript"></script>
	<script src="../onyx/package.js" type="text/javascript"></script>
	<!-- -->
	<style>
		body {
			background-color: gray;
		}
		.list {
			max-width: 800px;
			margin: auto;
			background-color: #eee;
		}
		.item {
			border: 1px solid silver;
			padding: 14px;
			font-size: 12px;
		}
		.index {
			float: right;
			font-size: 16px;
			font-weight: normal;
		}
	</style>
</head>

<body>
	<script>
		enyo.kind({
			name: "App",
			components: [
				{kind: "onyx.Toolbar", classes: "customToolBar", components: [
					{content: "IT SAP Info Portal Page!", classes: "customToolBarHeader"},
					]},
				{name: "list", kind: "List", rows: 55, multiSelect: false, classes: "enyo-fit list", onSetupRow: "setupRow", style: "margin-top: 55px", components: [
					{name: "sapitems", kind: "SAPItem", classes: "item enyo-border-box", components: [
		  ]}
				]}
			],
setupRow: function(inSender, inIndex) {
  var request = new enyo.Ajax({url: "listtest.json"});
	request.response(this, function(inSender, inData) {
	this.items = inData;
});
request.go();
},
});


enyo.kind({
		name: "SAPItem",
		events: {
		onRemove: ""
		},
		published: {
		assigned_landscape: "N",
		system_id_sid: "AD1",
		instance_number: 23,
		application_server: "tst123.sample.com",
		gui_description: "AD1 - Central Instance",
		sap_release: "ADS",
		stack_type: "",
		sap_version: "NW7.0 EHP1 SPS06",
		tst_ip_address: "",
		tstg_ip_address: ""
	},
			components: [
				{components: [
					{name: "sapname", tag: "strong", style: "font-size:18px; font-weight:bold; 	color: #156C99; ", content: "System Name"},
					{name: "gui_description", classes: "description", content: "System Description"},
					{kind: enyo.Control, tag: "ul", components: [
					{kind: enyo.Control, tag: "li", components: [
					{kind: enyo.Control, tag: "strong", content: "Assigned Landscape: "},
					{kind: enyo.Control, tag: "span", style: "color: #A2221C; ", name: "assigned_landscape"}
				]},
				{kind: enyo.Control, tag: "li", components: [
					{kind: enyo.Control, tag: "strong", content: "System ID (SID): "},
					{kind: enyo.Control, tag: "span", style: "color: #A2221C; ", name: "system_id_sid"}
				]},
				{kind: enyo.Control, tag: "li", components: [
					{kind: enyo.Control, tag: "strong", content: "Instance Number: "},
					{kind: enyo.Control, tag: "span", style: "color: #A2221C; ", name: "instance_number"}
				]},
				{kind: enyo.Control, tag: "li", components: [
					{kind: enyo.Control, tag: "strong", content: "Application Server: "},
					{kind: enyo.Control, tag: "span", style: "color: #A2221C; ", name: "application_server"}
				]},
				{kind: enyo.Control, tag: "li", components: [
					{kind: enyo.Control, tag: "strong", content: "SAP Release: "},
					{kind: enyo.Control, tag: "span", style: "color: #A2221C; ", name: "sap_release"}
				]},
				{kind: enyo.Control, tag: "li", components: [
					{kind: enyo.Control, tag: "strong", content: "Stack Type: "},
					{kind: enyo.Control, tag: "span", style: "color: #A2221C; ", name: "stack_type"}
				]},
				{kind: enyo.Control, tag: "li", components: [
					{kind: enyo.Control, tag: "strong", content: "SAP Version: "},
					{kind: enyo.Control, tag: "span", style: "color: #A2221C; ", name: "sap_version"}
				]},
				{kind: enyo.Control, tag: "li", components: [
					{kind: enyo.Control, tag: "strong", content: "TST IP Address: "},
					{kind: enyo.Control, tag: "span", style: "color: #A2221C; ", name: "tst_ip_address"}
				]},
				{kind: enyo.Control, tag: "li", components: [
					{kind: enyo.Control, tag: "strong", content: "TstG IP Address: "},
					{kind: enyo.Control, tag: "span", style: "color: #A2221C; ", name: "tstg_ip_address"}
				]},
		]},
					
			]},
			],
	update: function(inData) {
		this.$.sapname.setContent(this.system_id_sid);
		this.$.assigned_landscape.setContent(this.assigned_landscape);
		this.$.system_id_sid.setContent(this.system_id_sid);
		this.$.instance_number.setContent(this.instance_number);
		this.$.application_server.setContent(this.application_server);
		this.$.gui_description.setContent(this.gui_description);
		this.$.sap_release.setContent(this.sap_release);
		this.$.stack_type.setContent(this.stack_type);
		this.$.sap_version.setContent(this.sap_version);
		this.$.tst_ip_address.setContent(this.tst_ip_address);
		this.$.tstg_ip_address.setContent(this.tstg_ip_address);
		
		
		this.render();
	},
	
	create: function(params) {
		this.inherited(arguments);
		this.update();
	}
			
		
		});

	
		new App({fit: true, classes: "enyo-unselectable"}).write();
	</script>
</body>
</html>

This is my current JSON file:

[
	{
		"assigned_landscape": "N",
		"system_id_sid": "AD1",
		"instance_number": "",
		"application_server": "tst123.sample.com",
		"gui_description": "AD1 - Central Instance",
		"sap_release": "ADS",
		"stack_type": "JAVA",
		"sap_version": "NW7.0 EHP1 SPS06",
		"tst_ip_address": "",
		"tstg_ip_address": ""
	},
	{
		"assigned_landscape": "N+1",
		"system_id_sid": "ADD",
		"instance_number": "",
		"application_server": "",
		"gui_description": "ADD - Central Instance",
		"sap_release": "ADS",
		"stack_type": "",
		"sap_version": "NW7.0 EHP1 SPS06",
		"tst_ip_address": "",
		"tstg_ip_address": ""
	},
	{
		"assigned_landscape": "N+1",
		"system_id_sid": "ADQ",
		"instance_number": "",
		"application_server": "",
		"gui_description": "ADQ - Central Instance",
		"sap_release": "ADS",
		"stack_type": "",
		"sap_version": "NW7.0 EHP1 SPS06",
		"tst_ip_address": "",
		"tstg_ip_address": ""
	},
	{
		"assigned_landscape": "N",
		"system_id_sid": "AP1",
		"instance_number": "",
		"application_server": "tst163.sample.com",
		"gui_description": "AP1 - Central Instance",
		"sap_release": "ADS",
		"stack_type": "",
		"sap_version": "NW7.0 EHP1 SPS06",
		"tst_ip_address": "",
		"tstg_ip_address": ""
	}
]

psarin

A few things:

var request = new enyo.Ajax({url: "listtest.json"});
request.response(this, function(inSender, inData) {
	this.items = inData;
});
request.go();

should NOT be in setupRow. Use a function called create in the main app to make this request. The way you have it set up now, setupRow is never called because there is no data to set up the row with.

You should also change that code to:

var request = new enyo.Ajax({url: "listtest.json"});
request.response(this, function(inSender, inData) {
	this.items = inData;

	this.$.list.setRows(this.items.length);
	this.$.list.setRowsPerPage(10);
	this.$.list.build();

});

setupRow should look something like:

	setupRow: function(inSender, inEvent) {
		var index= inEvent.index;
		var record = this.items[index];
		console.log(record);
		if (record) {
        	        this.$.sapname.setContent(this.system_id_sid);
			this.$.assigned_landscape.setContent(this.assigned_landscape);
			this.$.system_id_sid.setContent(this.system_id_sid);
			this.$.instance_number.setContent(this.instance_number);
			this.$.application_server.setContent(this.application_server);
			this.$.gui_description.setContent(this.gui_description);
			this.$.sap_release.setContent(this.sap_release);
			this.$.stack_type.setContent(this.stack_type);
			this.$.sap_version.setContent(this.sap_version);
			this.$.tst_ip_address.setContent(this.tst_ip_address);
			this.$.tstg_ip_address.setContent(this.tstg_ip_address);
			return true;
		}
	}

.

Note there is NO this.render() in this code. And, remember, console.log() is your friend.

sjmiles

Here is better code:

enyo.kind({
	name: "App",
	components: [
		{kind: "onyx.Toolbar", classes: "customToolBar", components: [
			{content: "IT SAP Info Portal Page!", classes: "customToolBarHeader"},
		]},
		{name: "list", kind: "List",multiSelect: false, classes: "enyo-fit list", onSetupRow: "setupRow", style: "margin-top: 55px", components: [
			{name: "sapitem", kind: "SAPItem", classes: "item enyo-border-box"}
		]}
	],
	create: function() {
		this.inherited(arguments);
		this.loadItems();
	},
	loadItems: function() {
		var request = new enyo.Ajax({url: "listtest.json"});
		request.response(this, function(inSender, inData) {
			this.setItems(inData);
		});
		request.go();
	},
	setItems: function(inData) {
		this.items = inData;
		this.$.list.setRows(inData.length);
		this.$.list.reset();
	},
	setupRow: function(inSender, inEvent) {
		var item = this.items[inEvent.index];
		this.$.sapitem.setItem(item);
	}
});

and SAPItem:

enyo.kind({
	name: "SAPItem",
	published: {
		item: null
	},
	events: {
		onRemove: ""
	},
	components: [ /* component stuff */],
	itemChanged: function() {
		var i = this.item;
		this.$.sapname.setContent(i.system_id_sid);
		/* etc */
	}
});

Your layout would be easier to make using Fittable, but we can tackle that after. :)

PrashantHadole

I have to save weight for particular day for same wt.json file......

var request = new enyo.Ajax({ url: "wt.json" });
                     request.response(this, function (inSender, inData) {

                         this.items = inData;
                                                  
                         this.items["day" + (window.date)] = window.currentwt;                         
                     });

                     request.go();

Here, window.currentwt is the weight and I want save it for this .items["day" + (window.date)] day........

But , Its not work ........so please help me .......and correct above code.

The JSON file of weight is wt.json

{
	"day1":10,
	"day2":11,
	"day3":12,
	"day4":13,
	"day5":14,
	"day6":15,
	"day7":16,
	"day8":17,
	"day9":20,
	"day10":19
}

omastudios

You can't 'save' to a JSON file using an Ajax request. You'd do better to store your JSON in localStorage or a local db during the first run of your app, and then modify the stored version.

PrashantHadole

ok...............

piyush_kasliwal

is there a local db available and accessing structure in ENYO.

piyush_kasliwal

I would like to know what are the different ways to have offline data being managed using ENYO framework like local database.

quindo

Look at the gallery.

There is a enyo wrapper around localdb:
http://enyojs.com/gallery/#omastudios.Storage

Or a class to ease working with HTML5 SQLite databases in Enyo and beyond:
http://enyojs.com/gallery/#onecrayon.Database


Remember however that localstorage is still not fully developed. WebSQL is not a shared standard (just webkit basedbrowsers). Localstorage is available among the recent browsers (IE,FF,Safari,Chrome,Opera).
Maybe this could be of interest to you, a talk (from 2010 jsconf berlin) about localstorage:

http://blip.tv/jsconfeu/jens-arps-the-hitchhiker-s-guide-to-client-side-persistent-data-storage-4343046