See Running Demo Here -Demo For Parsing Json File In Jquery
Json File Data
[
{
"alignment1": "TM"
},
{
"alignment2": "TLBR"
},
{
"alignment3": "BL"
},
{
"ruleTimer": "6"
},
{
"music": "Enable"
},
{
"rule1": "Rule 1"
},
{
"rule2": "Rule 2"
},
{
"rule3": "Rule 3"
},
{
"rule4": "Rule 4"
},
{
"ID1": "p7ZsBPK656s"
},
{
"name1": "Disfigure - Blank [NCS Release]"
},
{
"ID2": "__CRWE-L45k"
},
{
"name2": "Electro-Light - Symbolism [NCS Release]"
},
{
"ID3": "J2X5mJ3HDYE"
},
{
"name3": "DEAF KEV - Invincible [NCS Release]"
},
{
"color1": ""
},
{
"color2": ""
},
{
"color3": ""
},
{
"color4": ""
},
{
"color5": ""
}
]
Index.html Code
<!doctype html>
<html>
<head>
<title>How to Parse a JSON file using jQuery</title>
<style>
body{
text-align: center;
font-family: arial;
}
.button{
margin:20px;
font-size:16px;
font-weight: bold;
padding:5px 10px;
}
</style>
</head>
<body>
<a href="data.json" target="_blank">Open JSON file</a><br />
<input type="button" value="Get and parse JSON" class="button" />
<br />
<span id="results"></span>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//When DOM loaded we attach click event to button
$(document).ready(function() {
//after button is clicked we download the data
$('.button').click(function(){
//start ajax request
$.ajax({
url: "data.json",
//force to handle it as text
dataType: "text",
success: function(data) {
//data downloaded so we call parseJSON function
//and pass downloaded data
var json = $.parseJSON(data);
//now json variable contains data in json format
//let's display a few itemscons
console.log("data is - "+json);
// $.each(json, function(idx, obj) {
//$.each(obj, function(idx, obj) {
//console.log("one-"+obj+" "+idx);
//$('#results').append("<strong>"+obj+"</strong> :- "+idx+"<br/><br/>");
//});
//});
function Iterate(data)
{
jQuery.each(data, function (index, value) {
if (typeof value == 'object') {
//alert("Object " + index);
Iterate(value);
}
else {
alert(index + " : " + value);
$('#results').append("<strong>"+index+"</strong> :- "+value+"<br/><br/>");
}
});
};
Iterate(json);
// $('#results').html('Plugin name: ' + json.alignment1);
}
});
});
});
</script>
</body>
</html>
