Fetching data from external JSON file on after the another using Jquery with dynamic backgorund color generator

Fetching data from external JSON file on after the another using Jquery with dynamic background color generator

For checking the out of the code : Output Link

Jquery Explanation

$.getJSON( "https://api.myjson.com/bins/14pvyv", function(obj) {

      $.each(obj, function(key, value, i) {

             $("ul").append("<li><span class='title'>"  +value.empName + "</span> " + "<span>"               +value.designation+ "</span>" + "<span>" + value.joiningdate  +"</span>"  + "                    <span class='age'>"+ value.age + "</span></li>");

});

Once document is loaded on the browser, I invoked "$.getJSON" method. after invoking method, the first parameter are passing is the URL of the json file and then callback function.

  

The Callback function receives the json data from the "Obj"  as we can seen in the above code.

I used "$.each" method which iterate through the all the object present in the json file and then splitting them into "key=> value" pair.

Now fetching data using "value" for

empName

designation

joiningdate

age

present inside the json file, then appending it into  the list container.

Now all the data which are present inside the json file are now loaded on the browser, let start some animation using jquery on json data .

//for appending list one after another

$("ul li").hide().each(function(i) {

    //appending each li after a delay of time

    $(this).delay(i*1500).fadeIn(1500);

});

Here I used delay() method for loading list box one after the another after a delay of time.

delay() method allow us to delay the execution of function that follow it in the queue.

setInterval(function (i) {

   //for caculating number of the items loaded

   var numbers = $("ul li:visible").delay(i*1500).fadeIn(1500).length;

   //for printing caculated number of the items loaded

   $('.itemcount').html('Number of Boxes:' + numbers);

    //limiting item to be load less than or equal to 8 rest is remove

    if(numbers > 8) {

          $('ul li:gt(7)').remove();

    }

 }, 1600);

Now after that I used "setInterval"  method, it will call a function at a specific interval of time.  

$("ul li:visible").delay(i*1500).fadeIn(1500).length 

for calculating the length of the list boxes are loaded on browser.

after calculating the length of the visible list box on browser updating it in to  the div to show the number of the box load $('.itemcount').html('Number of Boxes:' + numbers) 

if(numbers > 8) {

      $('ul li:gt(7)').remove();

}

using if condition I am limiting the number of the boxes to be loaded on the browser.

The last functionality for background color css to boxes using jquery   

function color() {

 function colors() {

  var rgba = (Math.floor(Math.random()* 56) + 200).toString(16);

  return ("0" + String(rgba)).substr(-2);

 }

 return "#" + colors() + colors() + colors();

}

Here I have created on function called "color()" inside the function created another function "colors()" for mathematical functionality for generating RGB color code, for which I used 

Math.floor(Math.random())

Math.floor method round the number downwords to its nearest integer.

Math.random() method will give you a floating point number between 0(inclusive) and 1 (exclusive) 

and multiplying that by 56 will give you a number into the range of 0

(inclusive)

 to 56

(exclusive)

, but still floating point.

and then returning it with "#"

the Complete code is a below:

HTML

<div class="container">

    <!---- Container for appending list of data from JSON file ---->

    <ul class="list-wrapper">

    </ul>

    <!---- Container for showing number of the box appended on browser ----> 

    <div class="itemcount"></div>

</div>

CSS

.container ul {

    padding-left:0;

   display:block;

   clear: both;

   margin:0 -10px;

}

.container ul li {

   float: left;

   width: 25%;

   list-style:none;

   border: 1px solid #dedede;

   min-height: 150px;

   box-shadow: 0px 0px 18px -6px #332f2f;

   -webkit-box-shadow: 0px 0px 18px -6px #332f2f;

   -moz-box-shadow: 0px 0px 18px -6px #332f2f;

   -ms-box-shadow: 0px 0px 18px -6px #332f2f; 

   transition: box-shadow 0.3s ease-in-out;

   margin:10px;

   padding: 10px;

   background: #FFF;

}

.container ul li:hover {

   box-shadow: 0 5px 15px #332f2f;

} 

.container 

ul li span {

  display: block;

  margin:8px 0;

}

Jquery

//function for random color each time on page refresh

function color() {

 function colors() {

  var rgba = (Math.floor(Math.random()* 56) + 200).toString(16);

  return ("0" + String(rgba)).substr(-2);

 }

 return "#" + colors() + colors() + colors();

}

$(document).ready(function() {

   $.getJSON( "https://api.myjson.com/bins/14pvyv", function(obj) {

      $.each(obj, function(key, value, i) {

             $("ul").append("<li><span class='title'>"  +value.empName + "</span> " + "<span>" +value.designation+ "</span>" + "<span>" + value.joiningdate  +"</span>"  + "<span class='age'>"+ value.age + "</span></li>");

      });

      

      //for appending list one after another

      $("ul li").hide().each(function(i) {

      //appending each li after a delay of time

        $(this).delay(i*1500).fadeIn(1500);

        

        //for each li backgound color

        $(this).css("backgroundColor", color());

      });

      

      setInterval(function (i) {

        //for caculating number of the items loaded

        var numbers = $("ul li:visible").delay(i*1500).fadeIn(1500).length;

        //for printing caculated number of the items loaded

         $('.itemcount').html('Number of Boxes:' + numbers);

         //limiting item to be load less than or equal to 8 rest is remove

         if(numbers > 8) {

          $('ul li:gt(7)').remove();

        }

        

      }, 1600);

   

   });

});