Reading JSON from URL

In this example below you will see how to do a Reading JSON from URL with some HTML / CSS and Javascript

This Pen take a JSON element from a URL and use it to change HTML elements

Thumbnail
This awesome code was written by 1985michel, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1985michel ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Reading JSON from URL</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container-fluid">

  <a class="btn btn-primary btn-lg btn-block" id="magicButton">Do the Magic!</a>
  
  <div class="row">
    <div class="col-xs-12" id="images"></div>
  
  </div>
  
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1985michel/reading-json-from-url-bEJxOw */
body{
  background:#00cc00;
}

/*Downloaded from https://www.codeseek.co/1985michel/reading-json-from-url-bEJxOw */
var url="https://raw.githubusercontent.com/1985michel/json/master/android-projects.json";

$(document).ready(function(){
  $("#magicButton").on("click",function(){
    $.getJSON(url, function(json) {
      
        var html='';
        json.forEach(function(val){
          html+='<img src="'+val.imgLink+'" class=" icon center-block img-responsive"></img>';
        });
              
        $("#images").html(html);
    }); 
    
  });
});

Comments