How to read JSON data from External File

In this article we will understand how we can read JSON data from a external file.JSON is short for JavaScript Object Notation, and is a way to store information in an organized, easy-to-access manner .One of the easiest ways to load JSON data into our web applications is to use jQuery.getJSON().For this we have to understand the term “jQuery.getJSON()” .

So what is significance of jquery.getJSON?????….

jQuery.getJSON()

It loads JSON data from the  server using GET HTTP request .

Picture1

Continue reading “How to read JSON data from External File”

JSON with Javascript and Jquery

JSJavascript has grown  from a way to add interactivity on your page , to a language that lets you perform tasks that once belonged to servers.JSON provides for an easy way to create and store data structures within JavaScript. JSON stands for JavaScript Object Notation…it’s called that because storing data with JSON creates a JavaScript object. The JavaScript object can be easily parsed and manipulated with JavaScript.

First, we create a variable to hold our data, and then we use JSON to define our object. Our sample object above is a simple as it gets. Just an item called firstName and it’s value Sam. When using strings with JSON, you should use them with quotations as above. If you use numbers, then you don’t have to use quotations.

<script> var data = { “Firstname”: “Sam” }; alert(data.Firstname); </script>

Let’s put data inside an HTML element.

<script>
var data = {
"Firstname": "Sam",
"Lastname": "Legend",
"Age": "34"
};

 document.getElementById("placeholder").innerHTML = data.Firstname + " " + data.Lastname + " " + data.Age;
</script>
  • Every object in json is stored with curly braces {}, an array is stored with brackets[].

  • So in order to organize our data, we created an object called users, which held an array (using brackets).

  • That object had a couple of other objects…each stored like before with curly braces {}.

  • Each element in that object was separated by commas.

<html>
<head>
<meta charset="utf-8" />
<title>JSON Data</title>
</head>
<body>
 <div id="placeholder"> </div>
</body>
</html>
<script>
var data = {
"users": [
{
"Firstname": "Sam",
"Lastname": "Legend",
"Age": "34"
},
{
"Firstname": "John",
"Lastname": "Watson",
"Age": "22"
}
]
};
 document.getElementById("placeholder").innerHTML = data.users[0].Firstname + " " + data.users[0].Lastname + " " + data.users[0].Age;
</script>


Autocomplete Textbox Using Jquery/JSON from Database

JSONIn web page designing  autocomplete property of textbox is widely used for making the site user friendly and interactive , so in this article we will understand the simple method for autocompletion of textbox using Jquery.

First we will see a simple example for this then in next step I will show you how you can fetch the data from the database using JSON

HTML Code

<html>
<head>

<!-- Load jQuery, jQuery UI and jQuery ui styles from jQuery website -->
<<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>

var data = [
"Delhi",
"Mumbai",
"Indore",
"Dehradun",
"Assam"];
$(document).ready(
function () {
 $("#City").autocomplete({
source: data,
 autoFocus: true,
});
}
);
</script>
</head>

<body>

<label for="City">City <input type="text" name="CityNames" id="City" /></label>
</body>

</html>

Continue reading “Autocomplete Textbox Using Jquery/JSON from Database”

JSON Basics for Beginners

JSONJSON Basics

In this article we will learn: 

  • What is JSON?
  • Benefits of using JSON
  • A simple demo for using JSON.

So lets start with  WHAT IS JSON?

JSON stands for Java Script Object Notation…It is called that because storing data with JSON creates Java Script object . This Java script object can easily be parsed with JavaScript .JSON is a data  interchange format. Data is represented in form of key/value pair . Continue reading “JSON Basics for Beginners”