ループのためのjsonファイルにマップを接続

これはおそらく本当に簡単な質問ですが、私はどこでも答えや説明を見つけることができないようです。ループのためのjsonファイルにマップを接続

私の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>

出典

2016-03-24 A.Jaasma

toにはを追加しますimagesJの各画像の48367。ループの構造はそれに適しており、画像タグjQuery to append()をdiv id="images"に使用できます。 forループは、このようなものになります。altoughはありません、

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

出典

2016-03-24 12:49:24 senschen

ありがとう、あなたは理解してもらえました。 –

私は間違っていない場合は、単に「IMG」要素を作成する必要があり、その「SRC」属性を設定し、「画像」ノードに追加。あなたの具体的な例について

：https://jsfiddle.net/vbesoc75/

EDITED：ここ

は、あなたがこの

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); 
});

例を行うことができます方法です

あなたが望むように聞こえる何

$.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); 
     } 
    },

出典

2016-03-24 12:48:11

は、それが途中で非常によく私を助けないとそのするvarタイトル= [「言葉」、「ない」、「必要」、「まだ」 ]; さんがそこにいる必要がありますか？私はすでにjasonで配列を持っているので、それらをJSONでもJSでも保持できないのでしょうか？私はそれをどのように入れているかのように試してみましたが、うまくいきません。 –

新しい画像を生成して指定したノードに追加する方法を示したかっただけです。あなたの例では、 "for"ループの内部でそれを行うことができます。私があなたのお手伝いをするために私の答えを編集させてください –

ありがとう、私は今私が何をする必要があるのか理解しています！ –

ループのためのjsonファイルにマップを接続

答えて

関連する問題