CODEWITHSUNDEEP
jqueryhtmljson
Алина Заморская
Алина Заморская

Reputation: 70

Parsing JSON into an HTML page

I have a programming question that I am stuck on. I am not really sure where to even start with this one. Any help or direction would be appreciated.

Build a HTML page that animates numerous circles across the browser window. When a user clicks or taps on a circle, it should change color. The number of circles can be found by parsing a JSON file.

The JSON file contain the following:

{"numOfCircles":33}

I have a URL to the JSON that I can use, instead of using the file.

From my understanding I can use AJAX and jQuery to parse the JSON by using something like this:

$.ajax({ 
type: 'GET', 
url: 'JSON URL here', 
data: { get_param: 'numOfCircles' }, 
dataType: 'json',
success: function (data) { 
    $.each(data, function(index, element) {
        $('body').append($('<div>', {
            text: element.name
        }));

Thank you!

Upvotes: 1

Views: 166

Answers (2)

Andre.IDK
Andre.IDK

Reputation: 2037

To do what you have been asked follow these steps:

Add a <div> with class="container" into your <body> in your HTML file like this one

<div class="container">
    <!-- circles will be appended here -->
</div>

Then add these rules to your CSS 

.circle{
    width:30px;
    height:30px;
    background: red;
    display: inline-block;
    margin-right:3px;
    border-radius:30px
}

.circle.blue{
    background: blue;
}

The first rule sets all the elements belonging to the class circle as red little circles displayed on a line while the second one makes them blue when the blue class is added.

Finally use this javascript code and be sure that jquery is linked to your document

$.getJSON('path/to/file.json', function(data) {         
    for(i=0; i<= data.numOfCircles; i++){
        $('.container').append('<div class="circle"></div>');
    }
});

$('body').on('click', '.circle', function(){
    $(this).toggleClass('blue');
});

The first bit of code is the one that requests your son file and creates a for loop that loops exactly as many times as the integer value written in the json file. For each iteration it appends a <div> element with class="circle" into the parent <div class="content">.

The second half instead toggles (adds/removes) the class blue to the clicked element.

Upvotes: 1

jFRAF
jFRAF

Reputation: 31

Let me give you a little walkthrough on the code yourself have provided:

$.ajax({
     type: 'GET',        //AJAX is creating a new HTTP GET 
                                // connection
     url: 'JSON URL here',        //That should be placed to
                              // this web address
     data: { get_param: 'numOfCircles' },        //Fill the variable
                             // named "data" with the field numOfCircles
                             // From the data recovered on the address provided
     dataType: 'json',        // The data recovered on the address
                             // provided is of the type JSON
     success: function (data) {        //if the data from the address
                             // provided was successfully parsed, execute
                             // this function to the parameter data
         $.each(data, function(index, element) {         //for each item
                             // in the (possibly array object) variable "data",
                             // execute this function, that has as parameters
                             // the index and value of the (possibly an array)
                             // variable data. in other words, iterate the "data"
                             // array with this function
             $('body').append(        //JQUERY to append new objects to
                             // the body of the mother page
                 $('<div>', { text: element.name })        //content being
                             // appended, in this case, the name of the element
                             // currently being processed from the data array,
                             // the name of the first element of the JSON array recovered!
              );
         });
     }
 })

JSON are web-objects, that computers can share to each other the same way they share webpages. The JSON arrays are collections of data that can be recovered through URLs! The function above gets an JSON from a URL and does something with its contents, in your case printing "num of circles" or "integer" or "33" on the page. You need to create a for loop that adds a new div containing a circle to the page, 33 times, being 33 the number provided by the JSON. this number should be in element.value where element.name is in the code.

Upvotes: 0

Related Questions