0

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?

Improve this question
1
  • Where are you getting obj.image_url? Commented Dec 17, 2016 at 0:37

2 Answers 2

Reset to default
1

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Improve this answer

2 Comments

Hi Jordan, thanks but how would I get the image into different div ids?
@Sole: could you add the need to place the "image into different div ids" to your question, and explain what you mean by that?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.