Json table Example


json table


Json is an JavaScript Object Notation is a lightweight and easy to use as text based open standard designed for readable data Interchange 

This Json filename extension is .json and internet media type is application/json.

Json is the help beginners understands for basic  understanding of the web applications on Http and basic knowledge in JavaScript.


Json syntax:-

{"object Name": [

{

"string": "name/value",

"string": "name/value"

}

]

}

  • JSON are easy to Handle  programmers, which include PHP, Java, Python, Perl, etc.
  • The format was specified by Douglas Crockford.
  • It has been extended from the JavaScript scripting language.
  • JavaScript based on applications that includes browser extensions and websites.
  • JSON format is used for serialize and transmitting structured data over network connection.
  • It is  used to transmit data between a server and web Api.
  • It can be used with modern programming languages.



Simple Example in JSON Object:-

{

   "Cars": [

      { "Name"  : "Renault Kwid", "price" : 4.25 },

            { "Name"  : "Renault Duster", "price" : 5.24 },

            { "Name"  : "Renault Xuv", "price" : 8.26 }

         ],  

     "Maurthi"  : [

               { "Name"  : "Maurthi suz Xuv", "price" : 8.25 }, 

               { "Name"  : "Maurthi suz Dzire", "price" : 12},

               { "Name"  : "Maurthi suz Swift", "price" : 13 }

            ]    

  

}



Program:-

<html>

<title>DailyAspirants JSON tutorial </title>

    

 <script language = "javascript" >

document.writeln("<h2 style='margin-left:500px; padding:40px;'>JSON Array Object Examples</h2>");


         var Cars = { "renault" : [ 

            { "Name"  : "Renault Kwid", "price" : 4.25 },

            { "Name"  : "Renault Duster", "price" : 5.24 },

            { "Name"  : "Renault Xuv", "price" : 8.26 }

         ],  

            "Maurthi"  : [

               { "Name"  : "Maurthi suz Xuv", "price" : 8.25 }, 

               { "Name"  : "Maurthi suz Dzire", "price" : 12},

               { "Name"  : "Maurthi suz Swift", "price" : 13 }

            ]    

         }    


         var i = 0

         document.writeln("<table style='border:2px solid #333; padding:3px;' border = '1'><tr>");

         for(i = 0;i<Cars.renault.length;i++){

            document.writeln("<td style='border:2px solid red;padding:15px;'>");

            document.writeln("<table  width = 200 >");

            document.writeln("<tr><td><b>Name</b></td><td width = 250>" + Cars.renault[i].Name+"</td></tr>");

            document.writeln("<tr><td><b>Price</b></td><td width = 250>" + Cars.renault[i].price +"</td></tr>");

            document.writeln("</table>");

            document.writeln("</td>");

         }

     for(i = 0;i<Cars.Maurthi.length;i++){

            document.writeln("<td style='border:2px solid blue' border = '1'>");

            document.writeln("<table  width = 200 >");

            document.writeln("<tr><td><b>Name</b></td><td width = 250>" + Cars.Maurthi[i].Name+"</td></tr>");

            document.writeln("<tr><td><b>Price</b></td><td width = 250>" + Cars.Maurthi[i].price+"</td></tr>");

            document.writeln("</table>");

            document.writeln("</td>");

         }

    document.writeln("</tr></table>");

 </script>

</html>


Output:-

json table Example
Related Links:-

<<Hello world in c# and Intresting Facts

<<How to create multiple table in one page in HTML

<<How to create multiple table in one page in HTML


1 Comments

Post a Comment

Previous Post Next Post