Как я могу отображать флаги стран, используя скрипт json? - PullRequest
Новая
       18

Как я могу отображать флаги стран, используя скрипт json?

1 голос
/ 26 апреля 2020

У меня есть папка с флагами (например):

gb.png

us.png

И у меня есть файл JSON (страны. 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"
        }  
    }
}

Это была попытка установить все элементы с американским флагом.

Я также добавил <img src=""> к первым <td> каждого <tr>.

Однако ничего не происходит - флаг США не появляется.

Ответы [ 3 ]

0 голосов
/ 26 апреля 2020

Да, вы можете использовать Javascript для получения текстового содержимого элементов html: например, с jQuery

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

или если вы используете al oop, для нескольких значений: 

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

Затем, для сравнения с файлом Json, лучше снова легко преобразовать в массив для l oop. Так что если вы используете тот же obj_assoc, как указано в моем предыдущем ответе, вы можете сравнить, так как это массив значений

0 голосов
/ 26 апреля 2020

Вы можете использовать текстовые элементы прямо в то время как l oop, или просто сравнить их с вашим другим внешним массивом 

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> элементов

Метод 2: 

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(), которая извлекает текстовое содержимое

0 голосов
/ 26 апреля 2020

Вот что вы можете попробовать: Создайте массив файлов в папке, которые содержат флаги, но не включают расширение .png, например: 

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

Обратите внимание, что они верхний регистр, поэтому вы должны изменить имена файлов на верхний регистр. Тогда ваш объект: 

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

С кавычками или без них будет работать одинаково. Лучший способ получения объектов l oop - 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>');
}
}
...