如何使用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>

我想在第一栏中的单词之前添加任何国家的图标。

我不知道该从哪里开始，也不知道该怎么做--有人有什么想法吗？

编辑:我试过这样做：

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"
        }  
    }
}

这是一种将所有元素设置为具有美国标志的尝试。

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

但是，什么也不会发生--不会出现美国标志。

Answer 1

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

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

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

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

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

var obj_assoc = Object.entries(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++;
}

方法1：

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()函数