# Render Images from Data Sources

**URL:** <https://forum.freecodecamp.org/t/render-images-from-data-sources/164858>\
**Category:** General\
**Created:** [December 21, 2017, 10:52pm UTC](https://forum.freecodecamp.org/t/render-images-from-data-sources/164858 "2017-12-21T22:52:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![zippy](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/zippy/32/69802_2.png) [@zippy](https://forum.freecodecamp.org/u/zippy)\
**Post date:** [December 21, 2017, 10:52pm UTC](https://forum.freecodecamp.org/t/render-images-from-data-sources/164858/1 "2017-12-21T22:52:13Z")

</div>

**Tell us what’s happening:**  
I know what to do but I don’t know why and how it should work.

**Your code so far**

```auto
<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {

        var html = "";

        json.forEach(function(val) {

          html += "<div class = 'cat'>";

          // Only change code below this line.
          
          
          
          // Only change code above this line.

          html += "</div>";

        });

        $(".message").html(html);

      });
    });
  });
</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

```

**Your browser information:**

Your Browser User Agent is: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.108 Safari/537.36`.

**Link to the challenge:**  
[https://www.freecodecamp.org/challenges/render-images-from-data-sources](https://www.freecodecamp.org/challenges/render-images-from-data-sources)

---

<div class="post-metadata">

**Author:** ![alecaceaes](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/alecaceaes/32/160822_2.png) [@alecaceaes](https://forum.freecodecamp.org/u/alecaceaes)\
**Post date:** [December 22, 2017, 9:55am UTC](https://forum.freecodecamp.org/t/render-images-from-data-sources/164858/2 "2017-12-22T09:55:10Z")

</div>

What you are going to do here is to get every object in the JSON file using loops it to render the images. The object has a property imageLink with you can use as a src of the image you are going to render.

`html += '<img src=' + object.property + '>'`

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:13pm UTC](https://forum.freecodecamp.org/t/render-images-from-data-sources/164858/3 "2021-01-16T17:13:47Z")

</div>

Closed on January 16, 2021, 5:13pm UTC