javascript GET Load data from json file

javascript GET Load data from json file

Today, We want to share with you javascript GET Load data from json file.
In this post we will show you how to get data from json file using javascript Example, hear for Loading external files: AJAX, XML, JSON we will give you demo and example for implement.
In this post, we will learn about Load JSON file locally using pure Javascript with an example.

A common use of JSON data is to read data all the jquery from a web server to call, and display allt the data jquery the data in a web page.This all the json chapter will teach you and display json, in 4 easy steps to learn, how to read and get JSON data, using function files.how to get data from json file using javascript Example

Also Read This πŸ‘‰   how to search and display data from database in php?

data.json

[{"Segment":"A","x":"Portfolio 1","y":"KPI 3","val":"-1000"},{"Segment":"A","x":"Portfolio 1","y":"KPI 4","val":"1500"},{"Segment":"A","x":"Portfolio 1","y":"KPI 5","val":"500"},{"Segment":"A","x":"Portfolio 1","y":"KPI 6","val":"800"},{"Segment":"B","x":"Portfolio 2","y":"KPI 1","val":"-900"},{"Segment":"B","x":"Portfolio 2","y":"KPI 2","val":"-1500"},{"Segment":"B","x":"Portfolio 2","y":"KPI 3","val":"-1600"},{"Segment":"B","x":"Portfolio 2","y":"KPI 4","val":"1700"},{"Segment":"B","x":"Portfolio 2","y":"KPI 5","val":"800"},{"Segment":"B","x":"Portfolio 2","y":"KPI 6","val":"900"},{"Segment":"C","x":"Portfolio 3","y":"KPI 1","val":"-1000"},{"Segment":"C","x":"Portfolio 3","y":"KPI 2","val":"-1100"},{"Segment":"C","x":"Portfolio 3","y":"KPI 3","val":"-1200"},{"Segment":"C","x":"Portfolio 3","y":"KPI 4","val":"800"},{"Segment":"C","x":"Portfolio 3","y":"KPI 5","val":"900"},{"Segment":"C","x":"Portfolio 3","y":"KPI 6","val":"1000"},{"Segment":"C","x":"Portfolio 4","y":"KPI 1","val":"1100"},{"Segment":"C","x":"Portfolio 4","y":"KPI 2","val":"1200"},{"Segment":"C","x":"Portfolio 4","y":"KPI 3","val":"1300"},{"Segment":"C","x":"Portfolio 4","y":"KPI 4","val":"1410"},{"Segment":"C","x":"Portfolio 4","y":"KPI 5","val":"1580"},{"Segment":"C","x":"Portfolio 4","y":"KPI 6","val":"-1806"},{"Segment":"D","x":"Portfolio 5","y":"KPI 1","val":"-1600"},{"Segment":"D","x":"Portfolio 5","y":"KPI 2","val":"-1700"},{"Segment":"D","x":"Portfolio 5","y":"KPI 3","val":"-200"},{"Segment":"D","x":"Portfolio 5","y":"KPI 4","val":"2200"},{"Segment":"D","x":"Portfolio 5","y":"KPI 5","val":"2300"},{"Segment":"D","x":"Portfolio 5","y":"KPI 6","val":"2400"},{"Segment":"D","x":"Portfolio 6","y":"KPI 1","val":"2500"},{"Segment":"D","x":"Portfolio 6","y":"KPI 2","val":"2600"},{"Segment":"D","x":"Portfolio 6","y":"KPI 3","val":"2700"},{"Segment":"D","x":"Portfolio 6","y":"KPI 4","val":"2800"},{"Segment":"D","x":"Portfolio 6","y":"KPI 5","val":"-2000"},{"Segment":"D","x":"Portfolio 6","y":"KPI 6","val":"-1900"},{"Segment":"D","x":"Portfolio 7","y":"KPI 1","val":"-1806"},{"Segment":"D","x":"Portfolio 7","y":"KPI 2","val":"-1806"},{"Segment":"D","x":"Portfolio 7","y":"KPI 3","val":"-1806"},{"Segment":"D","x":"Portfolio 7","y":"KPI 4","val":"-1806"},{"Segment":"D","x":"Portfolio 7","y":"KPI 5","val":"-1806"},{"Segment":"D","x":"Portfolio 7","y":"KPI 6","val":"-1806"},{"Segment":"A","x":"Portfolio 8","y":"KPI 1","val":"-1806"},{"Segment":"A","x":"Portfolio 8","y":"KPI 2","val":"-1806"},{"Segment":"A","x":"Portfolio 8","y":"KPI 3","val":"-1806"},{"Segment":"A","x":"Portfolio 8","y":"KPI 4","val":"-1806"},{"Segment":"A","x":"Portfolio 8","y":"KPI 5","val":"-1806"},{"Segment":"A","x":"Portfolio 8","y":"KPI 6","val":"-1806"},{"Segment":"D","x":"Portfolio 9","y":"KPI 1","val":"-1806"},{"Segment":"D","x":"Portfolio 9","y":"KPI 2","val":"-1806"},{"Segment":"D","x":"Portfolio 9","y":"KPI 3","val":"-1806"},{"Segment":"D","x":"Portfolio 9","y":"KPI 4","val":"-1806"},{"Segment":"D","x":"Portfolio 9","y":"KPI 5","val":"-1806"},{"Segment":"D","x":"Portfolio 9","y":"KPI 6","val":"-1806"},{"Segment":"A","x":"Portfolio 10","y":"KPI 1","val":"-1806"},{"Segment":"A","x":"Portfolio 10","y":"KPI 2","val":"-1806"},{"Segment":"A","x":"Portfolio 10","y":"KPI 3","val":"-1806"},{"Segment":"A","x":"Portfolio 10","y":"KPI 4","val":"-1806"},{"Segment":"A","x":"Portfolio 10","y":"KPI 5","val":"-1806"},{"Segment":"A","x":"Portfolio 10","y":"KPI 6","val":"-1806"},{"Segment":"A","x":"Portfolio 11","y":"KPI 1","val":"-1806"},{"Segment":"A","x":"Portfolio 11","y":"KPI 2","val":"-1806"},{"Segment":"A","x":"Portfolio 11","y":"KPI 3","val":"-1806"},{"Segment":"A","x":"Portfolio 11","y":"KPI 4","val":"-1806"},{"Segment":"A","x":"Portfolio 11","y":"KPI 5","val":"-1806"},{"Segment":"A","x":"Portfolio 11","y":"KPI 6","val":"-1806"},{"Segment":"B","x":"Portfolio 12","y":"KPI 1","val":"-1806"},{"Segment":"B","x":"Portfolio 12","y":"KPI 2","val":"-1806"},{"Segment":"A","x":"Portfolio 1","y":"KPI 1","val":"2100"},{"Segment":"A","x":"Portfolio 1","y":"KPI 2","val":"1500"},{"Segment":"B","x":"Portfolio 12","y":"KPI 3","val":"-1806"},{"Segment":"B","x":"Portfolio 12","y":"KPI 4","val":"-1806"},{"Segment":"B","x":"Portfolio 12","y":"KPI 5","val":"-1806"},{"Segment":"B","x":"Portfolio 12","y":"KPI 6","val":"-1806"},{"Segment":"C","x":"Portfolio 13","y":"KPI 1","val":"-1806"},{"Segment":"C","x":"Portfolio 13","y":"KPI 2","val":"-1806"},{"Segment":"C","x":"Portfolio 13","y":"KPI 3","val":"-1806"},{"Segment":"C","x":"Portfolio 13","y":"KPI 4","val":"-1806"},{"Segment":"C","x":"Portfolio 13","y":"KPI 5","val":"-1806"},{"Segment":"C","x":"Portfolio 13","y":"KPI 6","val":"-1806"},{"Segment":"C","x":"Portfolio 14","y":"KPI 1","val":"-1806"},{"Segment":"C","x":"Portfolio 14","y":"KPI 2","val":"-457"},{"Segment":"C","x":"Portfolio 14","y":"KPI 3","val":"-1806"},{"Segment":"C","x":"Portfolio 14","y":"KPI 4","val":"-1806"},{"Segment":"C","x":"Portfolio 14","y":"KPI 5","val":"-1806"},{"Segment":"C","x":"Portfolio 14","y":"KPI 6","val":"-1806"},{"Segment":"B","x":"Portfolio 15","y":"KPI 1","val":"-1806"},{"Segment":"B","x":"Portfolio 15","y":"KPI 2","val":"-1806"},{"Segment":"B","x":"Portfolio 15","y":"KPI 3","val":"-1806"},{"Segment":"B","x":"Portfolio 15","y":"KPI 4","val":"-1806"},{"Segment":"B","x":"Portfolio 15","y":"KPI 5","val":"-1806"},{"Segment":"B","x":"Portfolio 15","y":"KPI 6","val":"-547"}]

Example 1 : How to get from json file using javascript

index.html

Also Read This πŸ‘‰   how to add edit and delete rows of a html table with jquery ?


<title>load external json file in javascript</title>
  


	Load JSON file locally using pure Javascript
	<div id="demo"></div>

<hr />
	<h1>Solution of AngularJs All Problems For Pakainfo.com</h1>
	<h3>
	<a href="https://www.pakainfo.com/">My First Web-Application in angularjs, So I am very happy and 1000+  more then people are used of Pakainfo.com </a>
</h3>



$.getJSON( "data.json", function( json ) {
	document.getElementById("demo").innerHTML=JSON.stringify(json);
 });


Example 2 : javascript read json file from url


<title>load external json file in javascript</title>
  


	Load JSON file locally using pure Javascript
	<table id="demo" border="1"></table>

<hr />
	<h1>Solution of AngularJs All Problems For Pakainfo.com</h1>
	<h3>
	<a href="https://www.pakainfo.com/">My First Web-Application in angularjs, So I am very happy and 1000+  more then people are used of Pakainfo.com </a>
</h3>



var obj_data = new Object();
$.getJSON( "data.json", function( json ) {
	obj_data=json;
	for(var i=0;i < obj_data.length;i++)
	{
			document.getElementById("demo").innerHTML += "<tr><td>Segment="+obj_data[i].Segment + " </td><td>X="+obj_data[i].x+ "</td><td>Y="+obj_data[i].y+ "</td><td>Value="+obj_data[i].val+"<td></tr>";
	}
 });


We hope you get an idea about javascript GET Load data from json file
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

Also Read This πŸ‘‰   Javascript Check if Object is empty

We hope This Post can help you…….Good Luck!.