Add grid on a tilemap javascript/json

[emma22]

Hi,

I want to quad my board game, I don't know how to do...., after I must to add weapons and characters on it. My characters must to move 3 cells max. I need to draw gridlines  to retrieve (or display) the coordinates of each box in order to have a good base, I do not want to make a table  ..  I have worries because I do not master well json, I feel lost.  I have weapons to add to the canvas but there are outside ... I must absolutely use the file json where is the images of the weapons and insert it inside the canvas so to it with mapArray . Sorry for my english?

I need your help !! Thanks

var mapArray = [ 
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 1, 0]
];

function drawMap() {
var col = [];
var table = document.createElement("table");
for (var i = 0; i < mapArray.length; i++) {
for (var j = 0; j < mapArray[i].length; j++) {
if (parseInt(mapArray[i][j]) == 0) {
$('#canvas').append('<div class="grass"></div>');
}
if (parseInt(mapArray[i][j]) == 1) {
$('#canvas').append('<div class="wall"></div>'); 
}}}}
$('document').ready(function() {
drawMap();
}); 

 
$(document).ready(function(){
$.ajax({
	url:"item.json",
	type:"GET",
	success:function(data){
		console.log(data.myImages);	 
		$.each(data.myImages, function (i, f) {					            
$("#canvas").append("<img src=" + f.url+ " / >");
 
});
	 },
 
   	error:function(jqXHR,textStatus,errorThrown){
		alert(textStatus + errorThrown); 
	}