Использование атрибутов внешнего JSON-файла

Question

Я получаю сообщение «Uncaught TypeError» в команде drawImage, потому что URL-адрес изображения не извлекается правильно, я полагаю. Пути изображений правильные (их папка находится в той же папке, что и файл JavaScript). Как относиться к отдельным атрибутам из файла JSON?

Заранее спасибо.

Вот JSON:

{ 
    "characters": [ 
     { 
      "greekName": "Zeus", 
      "romanName": "Jupiter/Jove", 
      "description": "", 
      "picUrl": "pics/zeus.jpg" 
     }, 
     { 
      "greekName": "Hera", 
      "romanName": "Juno", 
      "description": "", 
      "picUrl": "pics/hera.jpg" 
     }, 
     { 
      "greekName": "Poseidon", 
      "romanName": "Neptune", 
      "description": "", 
      "picUrl": "pics/poseidon.jpg" 
     } 
    ] 
} 

Соответствующий HTML:

<canvas id="slideshow" width="400" height="400"></canvas> 

Вот соответствующий .js код:

var aImages = []; 
canvas = document.getElementById('slideshow'); 
ctx = canvas.getContext('2d'); 

$(document).ready(function() { 
    $.getJSON("c.json?callback=?", function (data) { 
     $.each(data.characters, function (i, item) { 
      var oImg = new Image(); 
      oImg.src = item.picUrl; 
      aImages.push(oImg); 
     } 
    ); 
    }); 
}); 

ctx.drawImage(aImages[iCurSlide], 0, 0); 

Answer 1

Поместите ctx.drawImage(aImages[iCurSlide], 0, 0); внутри getJSON обратного вызова.

var aImages = []; 
canvas = document.getElementById('slideshow'); 
ctx = canvas.getContext('2d'); 

$(document).ready(function() { 
    // get json 
    $.getJSON("c.json?callback=?", function (data) { 
     $.each(data.characters, function (i, item) { 
      var oImg = new Image(); 
      oImg.src = item.picUrl; 
      aImages.push(oImg); 
     }); 
     // aImages is an array with elements 
     // go for each element from array, and draw it. 
     for (var i in aImages) { 
      ctx.drawImage(aImages[i], 0, 0); 
     } 
    }); 
});