Displaying an image in a table from Javascript

Question

I'm a student and what I'm trying to do here is to build a table from Javascript using arrays stored in the Javascript. The table works well enough but I can't seem to integrate the Images into the table. No matter what I try the ImgArray remains undefined. Could any of you point me in the right direction of getting this to work?

var pet = [{
  species: 'fruit bat',
  name: 'bats',
  colour: 'grey',
  size: 'small',
  food: 'apples',
  limb: "wings",
  img: "0"
}, {
  species: 'goat',
  name: 'bastard',
  colour: 'off white',
  size: 'goat-sized',
  food: 'clothing',
  limb: "hooves",
  img: "1"
}, {
  species: 'butterfly',
  name: 'flutterby',
  colour: 'rainbow',
  size: 'petite',
  food: 'nectar',
  limb: "wings",
  img: "2"
}, {
  species: 'buzzard',
  name: 'Buzz',
  colour: 'molted black and white',
  size: 'bigish',
  food: 'carrion',
  limb: "wings",
  img: "3"
}, {
  species: 'pixie',
  name: 'petty',
  colour: 'blue',
  size: 'tiny',
  food: 'souls',
  limb: "wings",
  img: "4"
}, {
  species: 'tortoise',
  name: 'Tank',
  colour: 'Green',
  size: 'smoothbacked',
  food: 'lettuce',
  limb: "legs",
  img: "5"
}];

//array for holding images for the pet array
imgArray = [];

imgArray[1] = new Image();
imgArray[1].src = "resources/bat.gif"; //source of the image

imgArray[2] = new Image();
imgArray[2].src = "resources/goatVec01.png";


imgArray[3] = new Image();
imgArray[3].src = "resources/butterfly.gif";

imgArray[4] = new Image();
imgArray[4].src = "resources/buzzard01.png";

imgArray[5] = new Image();
imgArray[5].src = "resources/breezie01.png";

imgArray[6] = new Image();
imgArray[6].src = "resources/turtle.gif";

var len = imgArray.length;

function display() {  //added a for loop
  var i;
  for (i = 0; i < len; ++i) {
    var pic = document.write(imgArray[i].outerHTML);
  }
}


function makeTr(pet, attrName) {
  var html = '',
    i;

  html += "<tr>";

  for (i = 0; i < pet.length; ++i) {
    if (attrName = "img") {
      document.getElementById("pic".outerHTML)
      html += "<td>" + display() + "</td>";

    } else {

      html += "<td>" + pet[i][attrName] + "</td>";
    }
    html += "</tr>";
    return html;

  }
}

function buildTable(pet) {
  var html = '';

  html += "<table border='4px'>";
  html += "<caption>Pets Avaliable</caption>";


  html += makeTr(pet, "species");
  html += makeTr(pet, "name");
  html += makeTr(pet, "colour");
  html += makeTr(pet, "size");
  html += "</table>";

  document.getElementById("work").innerHTML = html;
}

<!DOCTYPE html>
<html>

<head>
  <!-- Used to declare the character for use in Firefox. http://stackoverflow.com/questions/11996257/the-character-encoding-of-the-html-document-was-not-declared-->
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type"></meta>
  <meta content="utf-8" http-equiv="encoding"></meta>
  <title>Pets</title>

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


  <body>
    <button id="please" onclick="buildTable(pet)">Work</button>
    <p id="work"></p>


  </body>

</html>

atomCode · Answer 1 · 2015-03-26T18:29:50.543

0

You are trying to access an undefined array location. You should access your image array using the indexes that you defined:

var pic = document.write(imgArray[1].outerHTML);

I recommend passing the index that you need to as a parameter to the display function as you run your for loop. You can pass the for loop counter i but you will need to re-index your image array since i=0.

function display(imgIdx) {
  var pic = document.write(imgArray[imgIdx].outerHTML);
}

I took a closer look at your code and i found a whole bunch of problems which I went ahead and fixed and everything worked fine. I will not give you the full answer otherwise you won't learn much. I will simply advise you as to where you have mistakes.

First this if statement is wrong:

 if (attrName = "img")

Second your pets variable is a global variable so you do not need to pass it as a parameter to every single function.Avoid global variables since you can very easily overwrite them accidentally.

 `function buildTable(pet) //remove parameter
 function makeTr(pet, attrName) //remove pet parameter`

Instead of a global make a function called getPets() that returns pet and call it from inside your makeTr() function since it is the only function that uses it.

Third Do not use document.write because it will overwrite the entire page not assign html to a variable or whatever the heck you though you were doing.

nth There are a several other problems and improvements you must make, too many to put here. Just follow my original advice and all this new ones and do some more debugging and more hard work and you'll get it. One last thing in your buildTable function you never make a call to makeTr("img"); so no images wil ever show. The only reason they did show before is because of what is said on my First comment which is a learners mistake so I understand.

edited Mar 26 '15 at 18:29

answered Mar 25 '15 at 04:55

atomCode

842
7
17

It's still undefined I'm afraid. I just tried running it through a for loop as well but it made no difference. Unfortunately I need to run more than one image through, that's why I made it imgArray[i]. – Hugo van Dyk Mar 25 '15 at 05:06
The imgArray index does not start at zero you defined the first image at index 1. You are trying to access the array with your loop count set at zero but there is nothing defined at zero. Either start your loop at i = 1 or re-index your image array starting from zero instead of 1. `imgArray = []; imgArray[0] = new Image(); imgArray[0].src = "resources/bat.gif"; //source of the image ....` – atomCode Mar 25 '15 at 05:29
I can see that works but there's more than one image in my array. How else but with a variable will I be able to access them one at a time? – Hugo van Dyk Mar 25 '15 at 05:32
Ah thank you. I've managed to let it at least return some text now. – Hugo van Dyk Mar 25 '15 at 05:37
I've updated my jsfiddle with multiple images and a zero-based array of images so you can see what i mean http://jsfiddle.net/ofekdkqp/1/ – atomCode Mar 25 '15 at 05:39
Don't forget to check my answer if it works for you :) – atomCode Mar 25 '15 at 05:42
While your answer doe work it's unsuitable for the task at hand. `document.write` overwrites the table as well as makes `document.getElementById("work").innerHTML = html;` null Another small problem is that `if (attrName = "img") { document.getElementById("pic".outerHTML) html += "" + display() + ""; } else { html += "" + pet[i][attrName] + ""; }` isn't calling the pictures as intended. – Hugo van Dyk Mar 26 '15 at 12:41
To clarify the last bit. The if function isn't adding the img tags then moving on, It's just continuously repeating itself. – Hugo van Dyk Mar 26 '15 at 12:46

Displaying an image in a table from Javascript

1 Answers1