javascript - 使用 JavaScript 从 JSON 获取图像并放入 html div 中

Question

我有一些 JSON 数据，我想从中获取图像并以某种方式将其放入 div 中，我尝试了以下代码，但它不起作用。

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(图像进入单独的 div id，如下所示:

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

图像需要放在单独的 div 中。我不知道我做错了什么？

Answer 1

我建议采用以下方法:

// 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>