J'ai un dossier d'indicateurs (par exemple):
gb.png
us.png
Et j'ai un fichier JSON (countries.json):
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"
}
}
}
J'ai une table:
<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>
Je voudrais pour ajouter l'icône de n'importe quel pays dans la colonne 1 avant le mot.
Je ne sais pas par où commencer ni quoi faire ici - quelqu'un a-t-il des idées?
MODIFIER: J'ai essayé de faire ceci:
{
"GB": "United Kingdom",
"US": "United States"
}
C'était une tentative de définir tous les éléments pour avoir un drapeau américain.
J'ai également ajouté Cependant, rien ne se passe - les états-unis l'indicateur n'apparaît pas. sur le premier de chaque .
3 Réponses :
Voici quelque chose que vous pouvez essayer:
Créez un tableau des fichiers dans le dossier contenant les indicateurs mais n'incluant pas l'extension .png , par exemple:
$(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>');
}
}
Notez qu'ils sont en majuscules, vous devez donc changer les noms des fichiers en majuscules. Ensuite votre objet:
var obj_assoc = Object.entries(obj);
Avec ou sans guillemets cela fonctionnera de la même manière. La meilleure façon de parcourir les objets Javascript est de les convertir d'abord en tableaux, faites-le en utilisant:
var obj = {
GB: "United Kingdom",
US: "United States"
}
Cela crée un tableau de tableaux avec à la fois les clés et les valeurs de obj
Vous pouvez maintenant créer une fonction pour ajouter les données dans le tableau:
Cela suppose que tous vos fichiers sont en majuscules et qu'ils ont l'extension .png .
REMARQUE: j'utilise jquery
var files = ["GB", "US"];
Il semble que vous deviez simplement passer du temps et les écrire tous dans un tableau, car il n'y a aucun moyen pour Javascript d'accéder au contenu d'un dossier et de les parcourir en boucle. Après tout, cela en vaudra la peine puisque vous aurez un tableau correspondant aux drapeaux de votre dossier et que vous pourrez les utiliser comme vous préférez
mais y a-t-il un moyen pour Javascript d'obtenir le contenu textuel d'un élément html, puis de le faire correspondre avec quelque chose d'autre dans un fichier json?
Oui, vous pouvez utiliser Javascript pour obtenir le contenu textuel des éléments html: par exemple avec jQuery
var i = 0;
while(i < $('.myvalues').length){
var current_val = $('.myvalues').eq(i);
//Do something with current_val
i++;
}
ou si vous utilisez une boucle, pour plusieurs valeurs:
var content = $('.myvalue').text();
Puis pour comparer avec le fichier Json, il est préférable de convertir à nouveau en tableau pour que vous puissiez facilement boucler.
Donc, si vous utilisez le même obj_assoc que celui indiqué dans ma réponse précédente, vous pouvez comparer puisqu'il s'agit d'un tableau de valeurs
.myvalues est-il le nom de la table?
ive mettre cela dans mon html. Où vais-je maintenant? Dois-je ajouter chaque élément de texte à un tableau?
de plus, current_val ne fait rien. Vous pouvez utiliser les éléments de texte directement à partir de la boucle while, ou simplement les comparer avec votre autre tableau externe Méthode 1: Méthode 2:
Je dois utiliser la méthode 1 - cependant, lorsque je console.log (my_array) dans la console, il est vide
J'ai essayé le code et cela fonctionne, essayez d'inclure tout ce morceau de code dans une fonction, par exemple:
qui fonctionne, mais il met également toutes les autres données dans le tableau - actuellement, j'ai ['États-Unis', '5654', '664', 1 ',' Royaume-Uni ',' 7721 ',' 853 ',' 9 ',' 108 ']
Les seules données qui seront poussées dans le tableau sont le texte à l'intérieur de l'élément qui contient la classe .myvalues est la classe des éléments qui contiennent vos informations, par exemple: comme dans votre question ci-dessus, donc si vous avez plusieurs éléments Royaume-Uni < / b> avec la même classe, tout comme dans votre question où ils contiennent des Nations différentes, vous pouvez les parcourir en boucle et la fonction text () récupérera le texte qu'ils contiennent ... par exemple la première valeur retournera Royaume-Uni < / code>
0
votes
var current_val = $('.myvalues').eq(i).text();
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++;
}
my_array contiendra désormais les valeurs des éléments var my_array = [];
var i = 0;
while(i < $('.myvalues').length){
var current_val = $('.myvalues').eq(i).text();
my_array.push(current_val);
i++;
}
4 commentaires
function add () {...} puis utilisez $ (document) .ready ( function () {add ();}); pour s'assurer que le contenu a été chargé avant que la fonction ne soit appelée
"myvalues" par exemple: ... vous ne devez inclure que le texte dont vous avez besoin dans la classe Royaume-Uni "myvalues" , tout autre contenu qui a été inclus avec cette classe sera également inclus dans la boucle. Un échantillon du code que vous utilisez fonctionnera mieux