将地图连接到 json 文件以进行循环答案

【问题标题】：connecting map to json files for loop将地图连接到 json 文件以进行循环
【发布时间】：2016-03-24 12:33:27
【问题描述】：

这可能是一个非常简单的问题，但我似乎无法在任何地方找到答案或解释。

我如何以及在哪里连接地图（图像文件来自哪里）对于我放在 JSON 中的图像和名称，因为图像需要出现在我的浏览器窗口中。我对 JSON 和 Looping 和 JS 很陌生。

这是我的代码，如果您需要查看它，了解我是如何制作它的。

JSON;

{ "main_object": {

    "imagesJ": ["beak", "cat", "egg", "meel", "milk", "passport", "spoon", "thee"],
    "woorden": ["words", "not", "needed", "yet"]
 }
}

//JavaScript

var jsonData = "noJson";
var hr = new XMLHttpRequest();

$(document).ready(function() {
  var jsonData = 'empty';
  $.ajax({
    async: false,
    url: "./js/data.json",
    dataType: 'html',
    success: function(response) {
      jsonData = JSON.parse(response);

      console.log('ok');
      imagesJ = jsonData.main_object.imagesJ;
      woorden = jsonData.main_object.woorden;

      for (i = 0; i < imagesJ.length; i++) {
        imagesJ[i] + '.jpg';

        // => /img/[imagesJ[x]].jpg
      }
    },
    error: function() {
      console.log('JSON could not be loaded.');
    }
  });
  console.log(jsonData);


});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Sleepopdracht</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/css.css">
</head>

<body>
  <header>

  </header>

  <div class="container" id="container">
    <div class="images" id="images"></div>
  </div>

  <footer>
  </footer>
  <script type="text/javascript" src="js/javascript.js"></script>
</body>

</html>

【问题讨论】：

标签： javascript jquery arrays json loops

【解决方案1】：

听起来你想要为imagesJ 中的每个图像添加一个image tag。你的循环结构很好，你可以使用jQuery to append()图像标签到div id="images"。 for 循环看起来像这样：

for (i = 0; i < imagesJ.length; i++) {
    var path = imagesJ[i] + '.jpg';
    $('#images').append('<img id="image' + i + '" src="' + path + '" />');
}

【讨论】：

谢谢您，您也帮助我了解了我需要这样做的方式、内容和地点！

【解决方案2】：

如果我没记错的话，你只需要创建一个“img”元素，设置它的“src”属性并附加到“images”节点；

你可以这样做

var titles = ["words", "not", "needed", "yet"];
var imagesContainer = document.getElementById('images');

titles.forEach(function(title){
    var img = document.createElement('img');
    img.src = '/img/' + title + '.jpg';
    imagesContainer.appendChild(img);
});

示例：https://jsfiddle.net/vbesoc75/

已编辑：

对于你的具体例子：

$.ajax({
     async: false,
     url: "./js/data.json",
     dataType: 'html',
     success: function(response) {
       jsonData = JSON.parse(response);
       console.log('ok');
       imagesJ = jsonData.main_object.imagesJ;
       woorden = jsonData.main_object.woorden;

       var imagesContainer = document.getElementById('images');
       for (i = 0; i < imagesJ.length; i++) {
         var img = document.createElement('img')
         img.src = '/img/' + imagesJ[i];
         imagesContainer.appendChild(img);
       }
    },

【讨论】：

它确实对我有很大帮助，尽管 var title = ["words", "not", "needed", "yet"];必须在那里吗？因为我已经在 jason 中有数组，难道不能将它们保存在 JSON 中但也保存到 JS 中吗？我确实按照您的说法尝试过，但它不起作用..
我只是想向您展示如何生成新图像并将它们附加到指定节点；对于您的示例，您可以在“for”循环中执行此操作。让我编辑我的答案来帮助你