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 Embed font-awesome CSS into DOM Scripting (javascript)?

    How can I pipe the output from gulp-w3c-css to the console

    Should I turn these images into a sprite, and if so, how would I do so? (picture included)

    How exacty works the display: flex property on a container div and the flex property on its inner div?

    How to nest multiple css attributes inside another attribute

    How bad is to store all background images in CSS?

    How to add strped tabs on Ionic css

    How to create a table using multiple span in one div using CSS

    How to Change blue background selection color from image using css

    How do I break the border around text in css?

    How use Append Jquery

    How do I center elements on a page using percentage widths?

    How to make the menu contents center aligned?

    CSS - how to set a position of UL in LI

    How to make images to go out of the div when width is over the max-width?

    How do I get user-inputted information from the website directly to my e-mail?

    How can I escape string css in sass/scss?

    css how to make the background image padding to right

    How to do Vertical+Horizontal centering in CSS

    How can I turn a bullet image into a link?

    How to remove captcha image and it's textbox using css?

    How to adjust the width of a DIV per height using CSS

    How can I bold specific HTML rows and columns with CSS or HTML?

    How to fix the my Anchor link issue [duplicate]

    CSS3 Challenge - How to get this gradient background pattern without using all the divs?

    Can't make any different fonts show up on website with @font-face or google fonts

    How to use float and margin together?

    Shows a dropdown element with jQuery

    Images not showing in PhoneGap Build application

    What's the difference between “.” and “#” in CSS and how to choose to use?