How can I append the images from this JSON file properly into the correct divs


Tags: javascript,jquery,html,css,json

Problem :

I am making an Instagram web page clone and I have everything built out. I can retrieve the data from the JSON file and add it to the <img> tag, but I need each image to display above its own version of the .below-image div. I know that I need to somehow append the .below-image section to each image that is placed into the #images div, and I have done that, but for whatever reason, I can't seem to figure out how to separate every image so that there is congruent spacing between each item.

I have also created a https://jsbin.com/zagejacowe/edit?output

HTML

<html>

  <head>
    <meta charset="UTF-8">
    <title>Instagram Feed</title>
    <link rel="stylesheet" href="feedstyle.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type='text/javascript' src='feed.js'></script>

  </head>

  <body>

    <header>
      <div class="top">
        <!-- <div id="home-button">
          <i class="fa fa-home fa-2x"></i>
        </div>
        <div id="logo">
          <img src="http://i.imgur.com/SmdPZ6T.png" />
        </div>
        <div id="profile-photo">
          <img src="https://scontent-sea1-1.cdninstagram.com/hphotos-xaf1/t51.2885-19/10731946_1517235648523785_1216221661_a.jpg" />
        </div> -->
        <ul>
          <li><i class="fa fa-home fa-2x"></i></li>
          <li id="logo">
            <img src="http://i.imgur.com/SmdPZ6T.png" />
          </li>
          <li id="profile-photo">
            <img src="https://scontent-sea1-1.cdninstagram.com/hphotos-xaf1/t51.2885-19/10731946_1517235648523785_1216221661_a.jpg" />
            <p class="username">username</p>
          </li>
        </ul>

      </div>
    </header>


    <div id="container">
      <main>
        <div id="feed-container">
          <div id="feed-posts">
            <div id="images">
              <!-- <ul>
                <li>
                  <img src="http://yourbizrules.com/wp-content/uploads/2014/08/Staying-Motivated.jpg" />
                </li>
                <div class="below-image">
                  <div class="like">
                    <i class="fa fa-heart fa-2x"></i>
                  </div>
                  <div class="image-info">
                    <p>User Info</p>
                  </div>
                  <div class="more">
                    <button>···</button>
                  </div>
                  <div id="clear"></div>
              </ul>
              <div id="add-a-comment">
                <div class="comment-container">
                  <form class="comment" action="index.html" method="post">
                    <input type="text" name="name" value="" placeholder="Add a comment...">
                  </form>
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </main>
  </div>
</body>
</html>

CSS

* {
  margin: 0px;
  padding: 0px;
}
body {
  font-family: "proxima-nova", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
ul {
  list-style: none;
}
li {
  list-style: none;
}
#container {
  margin: 0 auto;
  display: block;
}
header {
  margin: 0 auto;
  display: block;
  background-color: #3E6D93;
  height: 50px;
}
.top {
  background: #467ea6;
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.01, #467ea6), to(#27608c));
  background: -webkit-linear-gradient(#467ea6 1%, #27608c 100%);
  background: -moz-linear-gradient(#467ea6 1%, #27608c 100%);
  background: -o-linear-gradient(#467ea6 1%, #27608c 100%);
  background: linear-gradient(#467ea6 1%, #27608c 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#467ea6', endColorstr='#27608c', GradientType=0);
  width: 100%;
}
.top li {
  display: inline-block;
  margin: 0 auto;
}
#home-button, .fa-home {
  float: left;
  background-color: #305F87;
  color: #ccc;
  padding: 7px;
  margin-left: 200px;
  width: 35px;
}
.fa-home {
  padding-left: 12px;
}
#logo img {
  float: right;
  width: 110px;
  margin-left: 400px;
  padding: 6px;
}
#profile-photo  {
  float: right;
  margin-right: 200px;
  padding: 10px;
  border-left: 1px solid #305F87;
  border-right: 1px solid #305F87;
  width: auto;
}
#profile-photo img  {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}
#profile-photo p {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  float: right;
  margin-left: 10px;
  padding: 5px;

}
#feed-container {
  background-color: #DFDFDF;
  width: 650px;
  height: auto;
  margin: 0 auto;
  display: block;
}
#feed-posts {}
#images {
  margin: 0 auto;
  display: block;
}
#images img {
  margin: 0 auto;
  display: block;
  width: 550px;
  height: 550px;
}
.below-image {
  margin: 0 auto;
  display: block;
  width: 550px;
  height: 52px;
  background-color: #fff;
  border: 1px solid #ccc;
}
.like {
  float: left;
}
.fa-heart {
  color: #5a5a5a;
  padding: 10px;
  border-right: 1px solid #ccc;
}
.image-info {
  float: left;
  text-align: left;
  width: 437px;
  height: 52px;
  border-right: 1px solid #ccc;
}
.image-info p {
  color: #467ea6;
  font-weight: bold;
  padding-top: 15px;
  padding-left: 20px;
  float: left;
}
.more {
  float: right;
  color: #5a5a5a;
}
.more, button {
  display: inline-block;
  font-size: 45px;
  color: #5a5a5a;
  padding: 0 5px;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
}
#clear {
  clear: both;
}
.comment-container {
  width: 550px;
  height: 200px;

}

#add-a-comment {
  margin: 0 auto;
  display: block;
  background-color: #fff;
  width: 550px;
  height: auto;
  margin-bottom: 50px;
}
#add-a-comment p {
  margin: 0 auto;
  display: block;
}
#add-a-comment input[type=text] {
  width: 550px;
  border: 1px solid #ccc;
  color: #4f4f4f;
  font-size: 16px;
  border: 0;
  bottom: 40px;
  padding: 15px;
  outline: none;
}
input, select, textarea{
  color: #f00;
}

JQUERY

 var bottom =    '<div class="below-image">' +
                '<div class="like">' +
                  '<i class="fa fa-heart fa-2x"></i>' +
                '</div>' +
                '<div class="image-info">' +
                  '<p>User Info</p>' +
                '</div>' +
                '<div class="more">' +
                  '<button>···</button>' +
                '</div>' +
                '<div id="clear"></div>' +
              '</ul>' +
                '<div id="add-a-comment">' +
                  '<div class="comment-container">' +
                    '<form class="comment" action="index.html" method="post">' +
                      '<input type="text" name="name" value="" placeholder="Add a comment...">' +
                    '</form>' +
                  '</div>' +
                '</div>' +
              '</div>';



$(document).ready(function() {
  var jsonURL = "https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json";
  $.getJSON(jsonURL, function(json) {
    var imgList = "";
    //var newImage = "http://yourbizrules.com/wp-content/uploads/2014/08/Staying-Motivated.jpg";

    $.each(json, function() {
      imgList += '<li><img class="inserted" src= " ' + this + ' "></li>' + bottom; 
    });
    $('#images').append(imgList);
  });
});


Solution :

It should work if you change the foreach loop to this one:

$.each(json, function(i) {
  imgList += '<ul><li><img class="inserted" src= " ' + json[i] + ' "></li>' + bottom; 
});

Here as jsfiddle (+update): http://jsfiddle.net/bg3x0k7n/1/


    CSS Howto..

    How to add a close button to alertify log with CSS?

    how to base a css rule on inherited value of dir attribute

    CSS how to not use style

    Trying to highlight table row using JQuery but not working, can anyone tell me why and how to fix it?

    How to create a horse-shoe-like gauge using CSS

    How do I line up CSS elements? Is there a tool I can use?

    How do I add a hover to this css class for a tr?

    How can I get the dots that surround some elements to go away/become solid lines?

    Flexbox in Chrome--How to limit size of nested elements? [duplicate]

    How to display a tree in HTML/CSS? nested left-floating divs and wrapping

    How do I add a shadow to an entire table using just CSS?

    How to make responsive video container div?

    How could I center a div that is inside a div? Auto margins aren't working

    How To Set Height of Child Div According To Parent Div

    How to position this div next to others?

    How to align radio buttons with labels in one line? [duplicate]

    How to override a class using jquery

    How to spin an image horizontally with CSS

    How to use JavaScript to Alter CSS for Multiple Elements

    Show div on radio button check using JS fallback

    How to crop Google GeoChart and center its content?

    How can I :hover over different links in one line while getting the spacing correct?

    How to smooth emboss in css

    In firefox, how can I change an existing CSS rule

    CSS/XHTML: Show div after a specific count of table rows

    How to do multiple class selectors in Stylus CSS pre-processor

    How to get a 2px wide border regardless of browser zoom with CSS

    How to achieve CSS transitions with delay timers but without any easing function?

    css google font how to download and embedd in css to avoid slow load times

    How to set a default location of a scrollbar