JSON Arrays and Examples

JSON arrays and examples. Learn about arrays as JSON objects, access JSON arrays, modify or delete JSON items or values, etc.


Arrays as JSON Objects

For example

[ “Ford”, “BMW”, “Fiat” ]

Arrays in JSON are nearly the same as in JavaScript.

Array values in JSON:  string, number, object, array, boolean or null.

Array values in Javascript: all of the above and other valid JavaScript expression, functions, dates, and undefined.


Arrays in JSON Objects

Arrays can be values of an object property:

For example:

{
“name”:”John”,
“age”:30,
“cars”:[ “Ford”, “BMW”, “Fiat” ]
}


Access Array Values

Use the index number.

See JSON formatter to learn more.


Loop Through an Array

Use a for-in loop to access array values

For Example:

for (i in myObj.cars) {
x += myObj.cars[i];
}

Or use a for loop:

For example:

for (i = 0; i < myObj.cars.length; i++) {
x += myObj.cars[i];
}

 Nested Arrays in JSON Objects

Values in an array can also be another array, or even another JSON object:

For example:

myObj = {
“name”:”John”,
“age”:30,
“cars”: [
{ “name”:”Ford”, “models”:[ “Fiesta”, “Focus”, “Mustang” ] },
{ “name”:”BMW”, “models”:[ “320”, “X3”, “X5” ] },
{ “name”:”Fiat”, “models”:[ “500”, “Panda” ] }
]
}

To access arrays inside arrays, use a for-in loop for each array:

For example:

for (i in myObj.cars) {
x += “<h1>” + myObj.cars[i].name + “</h1>”;
for (j in myObj.cars[i].models) {
x += myObj.cars[i].models[j];
}
}

Modify Array Values

Use the index number to modify an array:


Delete Array Items

Use the delete keyword to delete items from an array

Advertisements

JSON JSONP

Introduction to JSONP, JSON formatter, the server file, the JavaScript function, and creating a dynamic script tag

JSONP


JSONP: a method for sending JSON data without worrying about cross-domain issues.

JSONP doesn’t use the XMLHttpRequest object but the <script> tag instead.


JSONP Intro

JSONP (JSON with Padding).

Requesting a file from another domain can cause problems, due to cross-domain policy.

Requesting an external script from another domain doesn’t have this problem.

JSONP uses this advantage, and request files using the the script tag instead of the XMLHttpRequest object.

<script src=”demo_jsonp.php”>

The Server File

The file on the server wraps the result inside a function call:

Example

<?php
$myJSON = ‘{ “name”:”John”, “age”:30, “city”:”New York” }’;

echo “myFunc(“.$myJSON.”);”;
?>

The result returns a call to a function named “myFunc” with the JSON data as a parameter.

Make sure that the function exists on the client.

The JavaScript function

The function named “myFunc” is located on the client, and ready to handle JSON data:

Example

function myFunc(myObj) {
document.getElementById(“demo”).innerHTML = myObj.name;
}


Create a Dynamic Script Tag

The example above will execute the “myFunc” function when the page is loading, based on where you put the script tag, which is not very satisfying.

The script tag should only be created when needed:

Example

Create and insert the <script> tag when a button is clicked:

function clickButton() {
var s = document.createElement(“script”);
s.src = “demo_jsonp.php”;
document.body.appendChild(s);
}

Dynamic JSONP Result

The examples above are still very static.

Make the example dynamic by sending JSON to the php file, and let the php file return a JSON object based on the information it gets.

PHP file

<?php
header(“Content-Type: application/json; charset=UTF-8”);
$obj = json_decode($_GET[“x”], false);

$conn = new mysqli(“myServer”, “myUser”, “myPassword”, “Northwind”);
$result = $conn->query(“SELECT name FROM “.$obj->$table.” LIMIT “.$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo “myFunc(“.json_encode($outp).”)”;
?>

PHP File explained:

  • Convert the request into an object, using the PHP function json_decode().
  • Access the database, and fill an array with the requested data.
  • Add the array to an object.
  • Convert the array into JSON using the json_encode() function.
  • Wrap “myFunc()” around the return object.

JavaScript Example

The “myFunc” function will be called from the php file:

function clickButton() {
var obj, s
obj = { “table”:”products”, “limit”:10 };
s = document.createElement(“script”);
s.src = “jsonp_demo_db.php?x=” + JSON.stringify(obj);
document.body.appendChild(s);
}
function myFunc(myObj) {
var x, txt = “”;
for (x in myObj) {
txt += myObj[x].name + “<br>”;
}
document.getElementById(“demo”).innerHTML = txt;
}

Access JSON object in Javascript

How to access JSON object in Javascript

JSON String:
{
    "name": "mkyong",
    "age": 30,
    "address": {
        "streetAddress": "88 8nd Street",
        "city": "New York"
    },
    "phoneNumber": [
        {
            "type": "home",
            "number": "111 111-1111"
        },
        {
            "type": "fax",
            "number": "222 222-2222"
        }
    ]
}

To access the JSON object in JavaScript, parse it with JSON.parse(), and access it via “.” or “[]”.

JavaScript:
<script>
       var data = '{"name": "mkyong","age": 30,"address": {"streetAddress": "88 8nd Street","city": "New York"},"phoneNumber": [{"type": "home","number": "111 111-1111"},{"type": "fax","number": "222 222-2222"}]}';

	var json = JSON.parse(data);

	alert(json["name"]); //mkyong
	alert(json.name); //mkyong

	alert(json.address.streetAddress); //88 8nd Street
	alert(json["address"].city); //New York

	alert(json.phoneNumber[0].number); //111 111-1111
	alert(json.phoneNumber[1].type); //fax

	alert(json.phoneNumber.number); //undefined
</script>