How to use JSON with JavaScript

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="how to use json with javascript, output to html"> <meta name="Description" content="Use JavaScript to output your JSON data to a web page."> <link rel="canonical" href="https://www.quackit.com/json/tutorial/json_with_javascript.cfm"> <title>How to use JSON with JavaScript</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">How to use JSON with JavaScript</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <ul class="pager"> <li><a href="/json/tutorial/json_vs_xml.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> JSON vs XML</a></li> <li><a href="/json/tutorial/json_with_http.cfm">JSON with HTTP <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> <p class="lead">Here's an example of using JavaScript to output JSON data to a web page. </p> <p>JSON is based on a subset of <a href="/javascript/tutorial/">JavaScript</a>, and a JSON document can easily be converted into a JavaScript value.</p> <p>Here's a simple example of how you can use JavaScript to store a JSON text, then output it to a web page.</p> <h2>Basic Example</h2> <p>Here's the JSON data we'll use in this example:</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/json/json.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false">{
 "artists" : [
 { 
 "artistname" : "Leonard Cohen",
 "born" : "1934"
 },
 { 
 "artistname" : "Joe Satriani",
 "born" : "1956" 
 },
 { 
 "artistname" : "Snoop Dogg",
 "born" : "1971"
 }
 ]
}</textarea> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "application/json", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>We'll use JavaScript to take the above JSON data, format it with HTML tags, and output it to the HTML document. </p> <p>Here's the code:</p> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <script src="/common/js/codemirror/mode/xml/xml.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false"><!doctype html>
<title>Example</title>
<script>
function displayArtists() {

 // Our JSON data
 var data = 
 {
 "artists" : [
 { 
 "artistname" : "Leonard Cohen",
 "born" : "1934"
 },
 { 
 "artistname" : "Joe Satriani",
 "born" : "1956" 
 },
 { 
 "artistname" : "Snoop Dogg",
 "born" : "1971"
 }
 ]
 }
 
 // Put the data into a variable and format with HTML tags
 var output = "<h1>Artists</h1>";
 output += "<ul>"; 
 
 // Loop through the artists
 for (var i in data.artists) {
 output += "<li>" + data.artists[i].artistname + " (Born: " + data.artists[i].born + ")</li>"; 
 }
 
 output += "</ul>";

 // Output the data to the "artistList" element
 document.getElementById("artistList").innerHTML=output;
} 

// Load the above function when the window loads
window.onload = displayArtists;
</script>


<div id="artistList"></div></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/json/tutorial/json_with_javascript_example" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>In this example, we output the formatted JSON data using <a href="/javascript/tutorial/innerhtml_in_javascript.cfm"><code>innerHTML</code></a>.</p> <p>We also place the JavaScript inside a function, then call that function once the page loads (using <code>window.onload</code>. Alternatively, you could use some other <a href="/javascript/javascript_event_handlers.cfm">event</a> to call the function.</p> <h2>Nested For Loop</h2> <p>Here's another example. This time we'll use a larger JSON file with deeper nesting. </p> <p>Not only does this file have artist information, but each artist has a number of albums. So we'll need to loop through the artists, and also loop through each artists' albums.</p> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false"><!doctype html>
<title>Example</title>
<script>
function displayArtists() {

 // Our JSON data
 var data = 
 {
 "artists" : [
 {
 "artistname" : "Deep Purple",
 "formed" : "1968",
 "albums" : [
 {
 "albumname" : "Machine Head",
 "year" : "1972",
 "genre" : "Rock"
 }, 
 {
 "albumname" : "Stormbringer",
 "year" : "1974",
 "genre" : "Rock"
 }
 ]
 },
 {
 "artistname" : "Joe Satriani",
 "born" : "1956",
 "albums" : [
 {
 "albumname" : "Flying in a Blue Dream",
 "year" : "1989",
 "genre" : "Instrumental Rock"
 }, 
 {
 "albumname" : "The Extremist",
 "year" : "1992",
 "genre" : "Instrumental Rock"
 },
 {
 "albumname" : "Shockwave Supernova",
 "year" : "2015",
 "genre" : "Instrumental Rock"
 }
 ]
 },
 {
 "artistname" : "Snoop Dogg",
 "born" : "1971",
 "albums" : [
 {
 "albumname" : "Tha Doggfather",
 "year" : "1996",
 "genre" : "Gangsta Rap"
 }, 
 {
 "albumname" : "Snoopified",
 "year" : "2005",
 "genre" : "Gangsta Rap"
 }
 ]
 }
 ]
 }
 
 // Put the data into a variable and format with HTML tags
 var output = "<h1>Artists</h1>";
 
 // Loop through the artists
 for (var i in data.artists) {
 output += "<h2>" + data.artists[i].artistname + "</h2>"; 
 output += "<ul>";
 
 // Loop through the albums for the current artist
 for (var j in data.artists[i].albums) {
 output += "<li>" + data.artists[i].albums[j].albumname;
 }
 output += "</ul>";
 }

 // Output the data to the "artistlist" element
 document.getElementById("artistlist").innerHTML=output;
} 

// Load the above function when the window loads
window.onload = displayArtists;
</script>


<div id="artistlist"></div></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/json/tutorial/json_with_javascript_nested_loop_example" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>Just like in the first example, this example uses a function that is called when the page loads.</p> <p>However, the function in the second example uses two <code>for</code> loops — one nested inside the other — to retrieve the nested data. </p> <ul class="pager"> <li><a href="/json/tutorial/json_vs_xml.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> JSON vs XML</a></li> <li><a href="/json/tutorial/json_with_http.cfm">JSON with HTTP <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/json/tutorial/"><i class="fa fa-database"></i> JSON Tutorial</a></h3> <ul> <li><a href="/json/tutorial/what_is_json.cfm">What is JSON?</a></li> <li><a href="/json/tutorial/json_syntax.cfm">JSON Syntax</a></li> <li><a href="/json/tutorial/json_data_types.cfm">JSON Data Types</a></li> <li><a href="/json/tutorial/json_schemas.cfm">JSON Schemas</a></li> <li><a href="/json/tutorial/json_vs_xml.cfm">JSON vs XML</a></li> <li><a href="/json/tutorial/json_with_javascript.cfm">JSON with JavaScript</a></li> <li><a href="/json/tutorial/json_with_http.cfm">JSON with HTTP</a></li> <li><a href="/json/tutorial/json_with_http_jquery.cfm">JSON HTTP with JQuery</a></li> <li><a href="/json/tutorial/json_with_database.cfm">JSON with a Database</a></li> <li><a href="/json/tutorial/list_of_json_databases.cfm">JSON Database List</a></li> </ul> </li> </ul> <ul> <li> <h3><a href="/javascript/" title="">JavaScript</a></h3> <ul> <li><a href="/javascript/tutorial/" title="Client side scripting language">JavaScript Tutorial</a></li> <li><a href="/javascript/javascript_reserved_words.cfm" title="">JavaScript Reserved Words</a></li> <li><a href="/javascript/javascript_event_handlers.cfm" title="Introduction to the 12 JavaScript event handlers">JavaScript Event Handlers</a></li> <li><a href="/javascript/javascript_date_and_time_functions.cfm" title="Full listing of all JavaScript methods for dealing with date and time.">JavaScript Date & Time</a></li> <li><a href="/javascript/examples/" title="">JavaScript Examples</a></li> </ul> </li> <li><h3><a href="/jquery/" title="">jQuery</a></h3> <ul> <li><a href="/jquery/tutorial/" title="">jQuery Tutorial</a></li> <li><a href="/jquery/examples/" title="">jQuery Examples</a></li> </ul> <li> <li><h3><a href="/json/" title="">JSON</a></h3> <ul> <li><a href="/json/tutorial/" title="Data format for exchanging data between applications and different environments.">JSON Tutorial</a></li> </ul> <li> <h3 class="heading-only">Server Side Scripting</h3> <ul> <li><a href="/python/tutorial/" title="">Python Tutorial</a></li> <li><a href="/coldfusion/tutorial/" title="">ColdFusion Tutorial</a></li> <li><a href="/php/tutorial/" title="">PHP Tutorial</a></li> <li><a href="/vbscript/tutorial/" title="">VBScript Tutorial</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2024 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

How to use JSON with JavaScript