如何使用 json 脚本显示国家标志？

Question

我有一个标志文件夹（例如）：

gb.png

us.png

我有一个 JSON 文件 (countries.json)：

{
  "GB": "United Kingdom",
  "US": "United States"
}

我有一张桌子：

<table>
           <tr>
              <td style="font-family: robotobold; color: white"><b>United Kingdom</b></td>
              <td style="font-family: robotoblack;text-align:right; font-size:10px; color: #aeafaf;">{data1}</td>
              <td  style="font-family: robotoregular;text-align:left; color: #46e08b;"><b>{data2}</b></td>
              <td style="font-family: robotoblack;text-align:right; font-size:10px; color: #aeafaf;">{data3}</td>
              <td style="font-family: robotoregular;text-align:left; color: #F65164"><b>{data4}</b></td>
            </tr>

我想在单词前的第 1 列中添加任何国家/地区的图标。

我不知道从哪里开始或在这里做什么 - 有人有什么想法吗？

编辑：我试过这样做：

window.onload = function(){
    var table = document.getElementById("datatable");
    for (var i = 0, row; row = table.rows[i]; i++) {
        for (var j = 0, col; col = row.cells[j]; j += 4) {
            document.getElementsByTagName("img").src = "us.png"
        }  
    }
}

这是试图将所有元素都设置为美国国旗。

我还在每个<tr> 的第一个<td> 上添加了<img src="">。

但是，什么都没有发生 - us 标志没有出现。

Answer 1

您可以尝试以下方法： 在包含标志但不包含扩展名.png 的文件夹中创建一个文件数组，例如：

var files = ["GB", "US"];

请注意，它们是大写的，因此您应该将文件名更改为大写。 然后你的对象：

var obj = {
GB: "United Kingdom",
US: "United States"
}

无论有没有引号，它的工作方式都是一样的。 循环遍历 Javascript 对象的最佳方法是首先将它们转换为数组，使用以下方法：

var obj_assoc = Object.entries(obj);

这将创建一个数组的数组，其键和值均为obj 您现在可以创建一个函数来将数据附加到表中： 这假设您的所有文件都是大写的，并且它们具有 .png 扩展名。 注意：我正在使用 jquery

$(document).ready(function(){
for(const [key, value] of obj_assoc){
$('#mytable tbody').append('<tr><td><img src="path/to/folder/' + key + '.png"/></td><td>' + value + '</td></tr>');
}
}

Answer 2

是的，您可以使用 Javascript 来获取 html 元素的文本内容： 例如使用 jQuery

var content = $('.myvalue').text();

或者如果您使用循环，则为多个值：

var i = 0;
while(i < $('.myvalues').length){
    var current_val = $('.myvalues').eq(i);
    //Do something with current_val
    i++;
}

然后与Json文件比较，最好再次转换为数组，以便您轻松循环。 因此，如果您使用与我之前的答案中所述相同的obj_assoc，您可以进行比较，因为它是一个值数组

Answer 3

您可以直接使用 while 循环中的文本项，或者只是将它们与您的其他外部数组进行比较

var i = 0;
while(i < $('.myvalues').length){
    var current_val = $('.myvalues').eq(i).text();
   //Use current_val here
    i++;
}

方法一：

var my_array = [];
var i = 0;
while(i < $('.myvalues').length){
    var current_val = $('.myvalues').eq(i).text();
    my_array.push(current_val);
    i++;
}

my_array 现在将包含来自<td> 元素的值

方法二：

var my_other_array = ["val1", "val2", "val3", "val4", "val5"];
var i = 0;
while(i < $('.myvalues').length){
    var current_val = $('.myvalues').eq(i).text();
    for(var j = 0; j < my_other_array.length; j++){
        if(current_val == my_other_array[j]){
            console.log("Match found");
        }
        else {
            console.log("Match not found");
        }
    }
    i++;
}

感谢指正，应该是这样的：

var current_val = $('.myvalues').eq(i).text();

我忘记了检索文本内容的text() 函数