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.

-1
Santosh 16 avril 2018 à 21:52

3 réponses

Meilleure réponse

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

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

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