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 make a button go down when scrolling? (CSS)

    How to change element properties on hover with CSS in following case

    How to organize CSS Sheets [closed]

    How to add TITLE and ALT to an background image (CSS Sprites)?

    How do I displaying a list of multiple objects, one below the other, in HTML using Django?

    How to make corners of progress bar round in css

    How to enforce image max-width when using bootstrap 3?

    How to use 100% CSS background-image with scrolling content?

    How to use the Xpath and CSS selector in for function

    How can I build a flexible ratings widget in LESS instead of straight CSS?

    CSS How to keep page centered, but still put stuff where I want

    How do I mask a region of the page in a responsive design using CSS?

    In firefox, how can I change an existing CSS rule

    How to achieve this formatting

    how to force page break between absolutely positioned elements in css

    How to define separate fonts for each font-style - CSS

    Ambiguous match, found 2 elements matching css, how to get to the second one?

    How to import css dynamically with js?

    How to make a div next to each other in CSS

    How to fix image to bottom right in gallery

    How to use absolute path of an image in css using jquery?

    How to reference all the rows except the first one using css

    How to restrict the contents in a table data() of a table to a certain limit?

    How do I get my divs to ease in right after eachother on page load?

    How can i setup multiple sites within a single ASP.Net project?

    How can we prevent that when I resize my window, my images move using HTML-CSS?

    How to edit mobile CSS in SocialEngine?

    how do i align contact form 7 next to text

    How can I change css stylesheet with dart?

    How can I specify a *.css file in an ASP.NET UserControl?