X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

JSON Files


A common use of JSON is to read data from a web server, and display the data in a web page.

This page will teach you how in 4, very easy to follow, steps.


JSON Example

This example reads a menu from W3Schools, and displays the menu in a web page:

<div id="w3schools"></div>

<script>
function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i<arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
    }
    document.getElementById("w3schools").innerHTML = out;
}
</script>

<script src="w3schools.com"></script>

Try it yourself »


Example Explained

1: Create an array of objects.

This is an array of objects. Each object has two properties: "display" and "url".

var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
]

2: Create a JavaScript function to display the array. 

This function loops the objects of the array, and display the content as HTML links:

<div id="w3schools"></div>

<script>
function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i<arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
    }
    document.getElementById("w3schools").innerHTML = out;
}
</script>

This statement calls myFunction with myArray as argument:

myFunction(myArray);

Try it yourself »

3: Use an array literal as the argument (instead of an array variable):

This statement calls myFunction with an array literal as argument:

myFunction([
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp""
}
]);

Try it yourself »

4: Put the function call in an external js file

Put this in an external js file. Name the file "w3schools.js"

myFunction([
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp""
}
]);

Add the external script to your page (instead of the function call):

<div id="w3schools"></div>

<script>
function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i<arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
    }
    document.getElementById("w3schools").innerHTML = out;
}
</script>

<script src="w3schools.js"></script>

Try it yourself »



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates FREE Website Templates Free HTML Templates

SHARE THIS PAGE

facebook