I have to read a JSON file from folder that is located in a project.
I am using the following code:
var obj = "www/places.json";
How can I read a JSON file located in project folder www in iPhone PhoneGap using Javascript?
I have to read a JSON file from folder that is located in a project.
I am using the following code:
var obj = "www/places.json";
How can I read a JSON file located in project folder www in iPhone PhoneGap using Javascript?
- Have look at stackoverflow./questions/14908717/… it has an example how to read a file and parse it as JSON. – Mattias Wadman Commented May 4, 2013 at 21:45
2 Answers
Reset to default 15You would read it just like it is on your server.
Solution 1 - jQuery
If jQuery usage is not a problem then use it like this:
//Load categories object JSON
jQuery.getJSON("categories.json", function(data){
// data is yours parsed object
});
Example :
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<script src="http://www.fajrunt/js/jquery-1.9.1.min.js"></script>
<title>Read JSON Demo</title>
<script>
jQuery.getJSON("categories.json", function(data){
alert(data.balance);
});
</script>
</head>
<body>
Read JSON Demo
</body>
</html>
JSON file :
{"balance":1000.21,"num":100,"nickname":null,"is_vip":true,"name":"foo"}
Solution 2 - Pure javascript
If you want to use only vanilla javascript then this is a solution for you
var xmlhttp;
var jsonObject;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
jsonObject = JSON.parse(xmlhttp.responseText);
alert(jsonObject.balance);
}
}
xmlhttp.open("GET","categories.json",true);
xmlhttp.send();
Example :
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>Read JSON Demo</title>
<script>
var xmlhttp;
var jsonObject;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
jsonObject = JSON.parse(xmlhttp.responseText);
alert(jsonObject.balance);
}
}
xmlhttp.open("GET","categories.json",true);
xmlhttp.send();
</script>
</head>
<body>
Read JSON Demo
</body>
</html>
JSON file :
{"balance":1000.21,"num":100,"nickname":null,"is_vip":true,"name":"foo"}
I had same problem and got through with following snippet:
dojo.ready(function(){
var xhrArgs = { url: "file:///Users/Desktop/configJSON.txt", handleAs: "json", load: function(data){ targetNode.innerHTML = data; // Your data from JSON alert("Name : "+data.fields[0].name+" Type : "+data.fields[0].type+" Alias : "+data.fields[0].alias +" Editable : "+data.fields[0].editable); }, error: function(error){ // targetNode.innerHTML = "An unexpected error occurred: " + error; alert("An unexpected error occurred: " + error); } } // Call the asynchronous xhrGet var deferred = dojo.xhrGet(xhrArgs); }); </script>
</head>
<body>
<div id="licenseContainer"></div>
<body>