JSON data to HTML Table using Ajax Jquery getJSON method

hello friends today we have learned simple topic like how can we display JSON file data on web page under HTML table by using get JSON Ajax query method we all know Jason is a very lightweight data exchange on the web if you have very large number of data and you want to display on web page then suppose you have data and JSON format then you can easily display that data on the web page by using get JSON method this method will fetch data from JSON file and return array of data and after the by using loop we can access that array by using key of array so this thing's we will learn to under this video tutorial we will display employee data which are store under one JSON file so we will display data from that on to web page by using get JSON method this is simple JSON file which we have stored into our working folder under this file you can see employee data with a rank heat like head name address gender designation and age so in this file we have store employee data and JSON string format now we want to display this data on web page this is our index page and here you can see that we have include JavaScript query file on this page and we have also include bootstrap stylesheet and JavaScript file link also we will use both the library features on this page first we have defined one table with attributes it is equal to employee table with five table heading like game address gender designation and age we will load jason data under this table so for this we have Golden's query code and here we have write dollar dot get JSON method with two argument in first argument we have write JSON file named employee jason and in second argument we have write function which returned data this kept jason method will load JSON encoded data from server where we have storage ace and file and second argument function will return JSON data after this we have right variable employee data is equal to blank under this variable we will store employee data in HTML table format now we have right dollar dot each method with two argument in first argument we have right data which we have get from function and in second argument we have right function with two arguments like key and value by using this each method we can access each JSON data one-by-one so first we have write employee data variable and under this variable we have app and HTML code like open table grow after this we want to append employee name so we have write employee data variable and under this variable we have app and HTML code like open and close table data tag in between this tag we have write value dot name which return employee name from jason filed same way we want to append employee address so we have write employee data variable and under this variable we have app and HTML code like open and close table data tag in between this tag we have write value dot address key which return employee address from JSON file now we want to append employee gender data so we have write employee data variable and under this variable we have app and HTML code like open and close table data tag in between this tag we have write value dot gender key which will return employee gender from JSON file after this we want to append employee designation data so we have rightt employee data variable and under this variable we have app and HTML code like open and close table data tag in between this tag we have write value dot designation key which will return employee designation data from JSON file lastly we want to append employee name so we have write employee data variable and under this variable we have app and HTML code like open and close table data tag in between this tag we have write value dot age which return employee age data from Jason filed after appending all employee table column data now we want to clothes table row tag so we have write employee data variable and under this variable we have app and HTML code like clothes table row tag so this way we have store all employee column data under this employee data variable so now we want to append this code into table with his employee table so we have write dollar with table lid employee table would append method and under this method we have write employee data variable this method will append a HTML code which we have store under employee data variable will be appended into table but it employee data so we have saved this code unchecked output in browser friends you can see when page has been loaded then Jason employee data has been displayed on webpage here it has been fetched data from employee Jason Fogg which we have store under working folder by using Jason method with Ajax query nowadays most of the website use JSON data type over XML for their website because it is much simpler than XML and we can also use with client side by using Ajax query and JSON has a much smaller grammar and it will Maps more directly on to the different data type which are used in our modern programming languages if you have any query regarding this video tutorial please comment your query if you like this video please share this with your friends or even you can also share on social media also if you want to get more update regarding our video tutorial please subscribe our YouTube channel thank you for watching this video

Channel: Webslesson

Views: 187,574

Keywords: json data to table, getJSON method, ajax tutorial, json tutorial, fetch data from json file, display json data under html table, json data to table using getJSON()

Id: AOfSuajwY-I

Length: 6min 46sec (406 seconds)

Published: Thu Apr 13 2017