Simple JSON Example

Developer
James Barnett
Size
2,513 Kb
Views
50,600
  1. Simple JSON Example Previews
  2. Simple JSON Example HTML Codes
  3. Simple JSON Example CSS Codes
  4. Simple JSON Example JS Codes

How do I make an simple json example?

What is a simple json example? How do you make a simple json example? This script and codes were developed by James Barnett on 11 August 2022, Thursday.

Simple JSON Example Previews
IQ Test

Simple JSON Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple JSON Example</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Treehouse Badges</h1>
<!--<img class = "spinner" src = "http://jamesbarnett.me/img/ajax-loader.gif" /> -->
<div id = "badges" class = "badges"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple JSON Example - Script Codes CSS Codes

body { margin: 50px; width: 500px; }
h1, figure { text-align: center; }
.spinner { width: 50px; margin: 0 45%; }
.badges li { list-style-type: decimal; list-style-position:inside;
}
figcaption { margin: auto; }
.badges li, figcaption { font-size: 1.25em; font-weight: 600;
}
img { width: 50%; margin-top: 15px; margin-bottom: 30px;
}

Simple JSON Example - Script Codes JS Codes

$(document).ready(function() { var user = "jamesbarnett"; //treehouse username /* get treehouse profile info via JSON */ $.getJSON("https://teamtreehouse.com/" + user + ".json", function(data) { console.log(data);// intialize list $("#badges").html('<ol>'); var output = ""; /* loop through the JSON, parse out badge name & icon wrap it in some HTML. */ for (var i in data.badges) { output += "<li>"; output +="<figure>"; output +="<figcaption>" + data.badges[i].name + "</figcaption>"; output += "<img src = '" + data.badges[i].icon_url + "'/>"; output+="</figure>"; output += "</li>"; } $("#badges ol").append(output); // append li $("#badges ol").append('</ol>'); // close list /* hide spinner and then output HTML we built in the for loop */ $(".spinner").hide(); });
});
/***** But how does JSON work exactly *****
The magic here happens in the for loop over "data.badges". The "data" part, comes from the variable name we passed the function when we called the getJSON function and the "badges" part comes from the structure of the JSON data that the Treehouse API returned to us.
How do you know what the structure of that JSON is?
You look at it using a JSON viewer like the one at jsonviewer.stack.hu. To see what the JSON looks like that we are getting in this example go here: http://jsonviewer.stack.hu/#http://teamtreehouse.com/jamesbarnett.json and click on the 'viewer tab'
**********/
Simple JSON Example - Script Codes
Simple JSON Example - Script Codes
Home Page Home
Developer James Barnett
Username jamesbarnett
Uploaded August 11, 2022
Rating 3
Size 2,513 Kb
Views 50,600
Do you need developer help for Simple JSON Example?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Barnett (jamesbarnett) Script Codes
Name
Console.log output in codepen
Piet Mondrian Composition II
List.js Demo
Simple memory game in JS
Search field
Top Left Rounded Corner in CSS
Progress bar for counting checkboxes
Ready to Launch
Change font size using JQuery
Demo of the US Map jQuery plugin
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!