CODEWITHSUNDEEP
javascripthtmljson
Sole
Sole

Reputation: 3350

Get image from JSON and put into html div using JavaScript

I have some JSON data and I would like to get the image from it and put it into a div somehow, I have tried the following code but it does not work.

JSON

var data={"articles":
    [
  {
        "id": 1,
        "title": "Lorem Ipsum is simply dummy",
        "sub": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.",
        "auth": "Latin text",
        "image": "http://placehold.it/350x150"
      },
        {
        "id": 2,
        "title": "Lorem Ipsum is simply dummy",
        "sub": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.",
        "auth": "Latin text",
        "image": "http://placehold.it/350x150"
      },
      {
        "id": 3,
        "title": "Lorem Ipsum is simply dummy",
        "sub": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.",
        "auth": "Latin text",
        "image": "http://placehold.it/350x150"
      },
      {
        "id": 4,
        "title": "Lorem Ipsum is simply dummy",
        "sub": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.",
        "auth": "Latin text",
        "image": "http://placehold.it/350x150"
  }
]}

JAVASCRIPT

data.articles.forEach( function(obj) {
  var img = new Image();
  img.src = obj.image_url;
document.getElementById("image_url_1").innerHTML=data.articles[1].image_url;
});

HTML (images go into separate div ids as follows: 

<div id="image_url_1"></div>
<div id="image_url_2"></div>

The images will need to go in separate div ids. I don't know what I am doing wrong?

Upvotes: 0

Views: 2548

Answers (2)

David Thomas
David Thomas

Reputation: 253486

I'd suggest the following approach:

// using 'let' to declare variables, rather than 'var'
// if you require compatibility with ES5 then use
// 'var' instead:
let data = {
    // content of JSON removed for brevity
    "articles": [...]
},

 // creating an <img> element:
 image = document.createElement('img'),

 // defining the id prefix (the portion that
 // appears before the index):
 idPrefix = 'image_url_',

 // declaring empty variables for later use,
 // rather than repeatedly declaring them
 // within the loop:
 receivingElement,
 imageClone;

// iterating over the data.articles Array, using
// Array.prototype.forEach():    
data.articles.forEach(function( obj, index ){
  // obj:   the first argument, a reference to the current
  //        Object of the Array of Objects over which we're
  //        iterating,
  // index: the zero-based index of the current Object within
  //        the Array over which we're iterating.

  // finding the element to which the <img> should be appended,
  // using document.getElementById(), passing it the concatenated
  // String of the prefix plus the index + 1 (your <div> element
  // ids begin at 1, whereas JavaScript indices are zero-based;
  // so we add the 1 to compensate for that difference:
  receivingElement = document.getElementById( idPrefix + (index + 1) );

  // if the element exists (and the value of the variable is
  // therefore not null):
  if (receivingElement) {

    // we clone the created <img>:
    imageClone = image.cloneNode();

    // we set the src of that cloned <img> to
    // the property-value of the obj.image
    // property-value:
    imageClone.src = obj.image;

    // appending the cloned <img> to the receivingElement:
    receivingElement.appendChild( imageClone );
  }
});


let data = {
    "articles": [{
      "id": 1,
      "title": "Lorem Ipsum is simply dummy",
      "sub": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.",
      "auth": "Latin text",
      "image": "http://placehold.it/350x150"
    }, {
      "id": 2,
      "title": "Lorem Ipsum is simply dummy",
      "sub": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.",
      "auth": "Latin text",
      "image": "http://placehold.it/350x150"
    }, {
      "id": 3,
      "title": "Lorem Ipsum is simply dummy",
      "sub": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.",
      "auth": "Latin text",
      "image": "http://placehold.it/350x150"
    }, {
      "id": 4,
      "title": "Lorem Ipsum is simply dummy",
      "sub": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.",
      "auth": "Latin text",
      "image": "http://placehold.it/350x150"
    }]
  },
  image = document.createElement('img'),
  receivingElement,
  idPrefix = 'image_url_',
  imageClone;

data.articles.forEach(function(obj, index) {
  receivingElement = document.getElementById(idPrefix + (index + 1));
  if (receivingElement) {
    imageClone = image.cloneNode();
    imageClone.src = obj.image;
    receivingElement.appendChild(imageClone);
  }
});
<div id="image_url_1"></div>
<div id="image_url_2"></div>

Upvotes: 1

Jordan Soltman
Jordan Soltman

Reputation: 3903

https://jsfiddle.net/5ba4rvmv/ - working example

data.forEach(function(obj) {
  var img = document.createElement("img");
  img.src = obj.image;
  document.getElementById("image_url_1").appendChild(img);
});

For each data object, create a new image object, set the source to the obj.source and append that to your element.

Upvotes: 0

Related Questions