2

I'm creating a website and needed some help with this JSON file. I've managed to get it to display on the webpage and need to replace certain characters with images. I'm new to web programming and would appreciate a few tips.

This is my JQuery code:

$.ajax({
  url:'hall.json',dataType:'json',
  success: function(d) {
    for (var i=0;i<d.seats.length;i++){
    vr = "</br>"
        $('.layout').append(d.seats[i] + vr);}
    }
});

The code in the JSON file is as follows:

{"seats":["00000000000000000011111111111111000000000000000000","0000000000000001111111111111111aaa0000000000000000","00000000000000aa111111111111111aaaaa00000000000000","00000000000001111111111111111111111111000000000000","000000000aa00aaaaaaaaaaaaaaaaaaaaaa1100aa000000000","00000001111001111111111111111111111100111100000000","00000aaaaaa0011aaaaaaaaa11111111aaa1100aaaaaa00000","00001111111001111111111111111111111100111111100000","000aaaaaaa110011111111111111111111110011aaaaaaa000","00111111111100111111111111111111111001111111111000","00aaaaa1111110011111111111111111111001111aaaaaaa00","11111111111100111111111111111111111001111111111110","0aaaaaaaaaaaa001111111111111111111100aaaaaaaaaaaa0","01111111111110011111111111111111110011111111111100","00000000000000001111111111111111110000000000000000","01111111111111001111111111111111100111111111111100","01111111111111001111111111111111110011111111111110","01111111111111001111111111111111100111111111111100","00a11111111111100111111111111111100111111111111a00","00111111111111100111111111111111001111111111111000","00011111111111110011111111111111001111111111111000","00111111111111100111111111111111001111111111111000","00011111111111110011111111111111001111111111111000","00011111111111110011111111111110011111111111110000","0000000111a111111001111a1111a110011111111110000000","00000000111111110011111111111110011111111000000000","00000000001111111001111111111110011111110000000000","00000000000000111001111111111100111000000000000000"],"rows":["DD","CC","BB","AA","Z","Y","W","V","U","T","S","R","Q","P","N","M","L","K","J","H","G","F","E","DC","B","A"],"seatPrice":["                  00000000000000                  ","               0000000000000000000                ","              0000000000000000000000              ","             0000000000000000000000000            ","         00  000000000000000000000000  00         ","       0000  00000000000000000000000  0000        ","     000000  000000000000000000000000  000000     ","    0000000  00000000000000000000000  0000000     ","   000000000  0000000000000000000000  000000000   ","  0000000000  000000000000000000000  0000000000   ","  00000000000  00000000000000000000  00000000000  ","000000000000  000000000000000000000  000000000000 "," 000000000000  00000000000000000000  000000000000 "," 000000000000  0000000000000000000  000000000000  ","                000000000000000000                "," 0000000000000  00000000000000000  0000000000000  "," 0000000000000  000000000000000000  0000000000000 "," 0000000000000  00000000000000000  0000000000000  ","  0000000000000  0000000000000000  0000000000000  ","  0000000000000  000000000000000  0000000000000   ","   0000000000000  00000000000000  0000000000000   ","  0000000000000  000000000000000  0000000000000   ","   0000000000000  00000000000000  0000000000000   ","   0000000000000  0011111111100  0000000000000    ","       0000000000  111111111111  0000000000       ","        00000000  1111111111111  00000000         ","          0000000  111111111111  0000000          ","              000  00000000000  000               "],"priceLookup":[10,20]}

I am trying to replace "0" with a specific image and the same for "1" and "a" Also I'm not sure if I have done it correctly but to replace the commas with a new line I used the <br> tag. Is that the correct thing to do?

4

3 回答 3

2

如果您的代码正在运行，并且您唯一需要的是将文本替换为图像，您可以执行以下操作

$.ajax({
  url:'hall.json',
  dataType:'json',
  success: function(d) {
    var html = "";
    for (var i=0;i<d.seats.length;i++){
        var seat = d.seats[i];
        // Could use a single replace instead of three different calls but I
        // don't know what you need for each image, so optimization's up to you
        seat = seat.replace(/1/g, "<img src='1.png' />");
        seat = seat.replace(/a/g, "<img src='a.png' />");
        seat = seat.replace(/0/g, "<img src='0.png' />");
        html += seat + "< br />";
    }
    $('.layout').append(html);}
});
于 2013-02-12T00:21:02.493 回答
0

你可以这样做：

$.getJSON('hall.json', function(data) {
    var $layout = $('.layout');  // Cache it
    var seats = data.seats;

    for (var i = 0; i < seats.length; i++) {
        var seat = seats[i];

        for (var j = 0; j < seat.length; j++) {
            var char = seat.charAt(j);

            $('<img />', {
                src: 'images/' + char + '.png',
                alt: char
            }).appendTo($layout);
        }

        $layout.append('<br />');
    }
});

这将替换X为<img src="images/X.png" alt="X" />.

于 2013-02-12T00:20:23.397 回答
0

您应该将每个 JSON 元素视为一个数组，而不是替换,为<br>每个循环添加它

$.ajax({
 url:'hall.json',dataType:'json',
 success: function(d) {
  for (var i=0;i<d.seats.length;i++){
vr = "</br>";

var currentLength  = d.seats[i].length; 
for(var j = 0; j < currentLength; j++) 
{
       if(d.seats[i][j] == '0')
       // do something 
       else 
       // do something else
}

        $('.layout').append(d.seats[i] + vr);}
    }
});

你应该阅读更多关于 JSON 、数组和 JavaScript 的内容

我希望这可以帮助:)

于 2013-02-12T00:23:58.193 回答