CODEWITHSUNDEEP
javascriptjqueryarraysjsonloops
A.Jaasma
A.Jaasma

Reputation: 93

connecting map to json files for loop

this is possibly a really simple question, but i can't seem to find the answer or explanation anywhere.

How and where do I connect a map (where the image files come from) for the images and names I placed in my JSON, for the images need to apear in my browser window. im quite new to JSON and Looping and JS.

Here's my code if you need to look into it, to understand how I'm making it.

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>

Upvotes: 0

Views: 45

Answers (2)

Evgeny Sorokin
Evgeny Sorokin

Reputation: 730

If I'm not mistaken, you simply need to create an "img" element, set its "src" attribute and append to "images" node;

Here's how you can do this

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

Example: https://jsfiddle.net/vbesoc75/

EDITED:

For your concrete example:

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

Upvotes: 1

senschen
senschen

Reputation: 804

What it sounds like you want to to is add an image tag for each image in imagesJ. The structure of your loop is good for that, and you can use jQuery to append() the image tag to div id="images". The for-loop would look something like this:

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

Upvotes: 1

Related Questions