Ajouter du texte en faisant correspondre l'attribut du tableau d'objets et le chiffre de l'ID d'élément

Question

J'ai une liste de tableaux d'objets avec id et valeur comme propriétés. Fondamentalement, ce que je veux, c'est que le num.items[i].value devrait aller dans chaque div comme paire. One: one et ainsi de suite. Si num.items[i].id n'a pas le chiffre (comme le tableau n'inclut pas l'ID 3), alors id="digit_3" doit être laissé vide.

HTML

<ul>
  <li>One: <div id="digit_1">s</div></li>
  <li>Two: <div id="digit_2">sd</div></li>
  <li>Three: <div id="digit_3">sdf</div></li>
  <li>Four: <div id="digit_4">sdf</div></li>
</ul>

Javascript

var num = { 
    items:  [
        { id:4,  value:"four"},
        { id:1,  value:"one"},
        { id:2,  value:"two"},
    ]

};
for(var i=0; i<num.items.length; i++){
        document.getElementById("digit_"+i+1).innerHTML = i+1;
        console.log(i+1)
}

Sortie requise

One: one
Two: two
Three: 
Four: four

Je sais que nous ne pouvons pas comparer le chiffre id mais toute modification en HTML est grandement appréciée.

javascript

-1

Santosh 16 avril 2018 à 21:52

Answer 1

C'est vraiment simple - il suffit de comprendre les tableaux et les objets:

var num = {
    items: [{
            id: 4,
            value: "four"
        },
        {
            id: 1,
            value: "one"
        },
        {
            id: 2,
            value: "two"
        },
    ]

};
var cleanableElements = document.querySelectorAll("ul li div");
for (var i = 0; i < cleanableElements.length; i++) {
	cleanableElements[i].innerHTML = '';
}

var index;
for (var i = 0; i < num.items.length; i++) {
	index = num.items[i].id;
    document.getElementById("digit_" + index).innerHTML = num.items[i].value;
}

<ul>
    <li>One:
        <div id="digit_1"></div>
    </li>
    <li>Two:
        <div id="digit_2"></div>
    </li>
    <li>Three:
        <div id="digit_3"></div>
    </li>
    <li>Four:
        <div id="digit_4"></div>
    </li>
</ul>

La meilleure idée serait de sélectionner tous les éléments avec querySelectorAll et de les définir vides avant l'étape suivante. Vous ne pouvez pas vraiment détecter tous les identifiants #digit_X, vous ne pouvez donc pas simplement vérifier les DIV inchangés car vous ne pouvez pas tous les détecter de manière fiable.

1

NoOorZ24 16 avril 2018 à 19:20

Answer 2

Je sais que j'ai fait quelque chose de maladroit, mais si div a déjà une certaine valeur, l'exemple ci-dessus ne fonctionnera pas, attendez-vous à la réponse de @sphinx, je suppose

var num = {
    items: [{
            id: 4,
            value: "four"
        },
        {
            id: 1,
            value: "one"
        },
        {
            id: 2,
            value: "two"
        },
    ]

};

var idsArray = [];
var valuesArray = [];
for (var value of num.items) {
    idsArray.push(value.id);
    valuesArray.push(value.value);
}

var maxId = Math.max(...idsArray);


for (var i = 1; i <= maxId; i++) {
    if (idsArray.indexOf(i) !== -1) {

        document.getElementById("digit_" + i).innerHTML = valuesArray[idsArray.indexOf(i)];
    } else {

        document.getElementById("digit_" + i).innerHTML = "";
    }

}

div {
  display: inline
}

<ul>
  <li>One: <div id="digit_1">s</div></li>
  <li>Two: <div id="digit_2">sd</div></li>
  <li>Three: <div id="digit_3">sdf</div></li>
  <li>Four: <div id="digit_4">sdf</div></li>
</ul>

1

Nishant Dixit 16 avril 2018 à 19:18

Answer 3

Vous devez boucler ul li div, puis vérifier l'id s'il se trouve dans num.items. En supposant que votre format d'identification est digit_*.

var num = { 
    items:  [
        { id:4,  value:"four"},
        { id:1,  value:"one"},
        { id:2,  value:"two"},
    ]

}



function checkItems(num){
  items = document.querySelectorAll('#target_div li div')
  indexes = num.items.reduce( (pre, cur) => {
    pre[cur.id] = cur.value
    return pre
  }, {}) // loop num.items then create one dict with key=id.
  
  items.forEach(function(item){ //loop ul li div, then check whether id in dict=indexes.
    let ids = item.id.split('_')
    if(ids[1] in indexes){
      item.innerHTML += ' @Found:'+item.id
    } else {
      item.innerHTML = ''
    }
  })
}
checkItems(num)

<ul id="target_div">
  <li>One: <div id="digit_1">s</div></li>
  <li>Two: <div id="digit_2">sd</div></li>
  <li>Three: <div id="digit_3">sdf</div></li>
  <li>Four: <div id="digit_4">sdf</div></li>
</ul>

1

Sphinx 16 avril 2018 à 19:06

Ajouter du texte en faisant correspondre l'attribut du tableau d'objets et le chiffre de l'ID d'élément

3 réponses

Questions connexes

De nouvelles questions

javascript