killereks killereks - 1 month ago 21
Javascript Question

For loop does not check every object property

I have a problem where my code doesnt check all storage object barcodes. I want it to check all bolts, brackets, screwdriver and hammer barcodes and check it with input one, if its the same then show the corresponding object. But it only works for the last one always. I have no idea what is causing this. Row amount is how many inputs there is (you can click a button to add new input) inputs have name input1 input2 input3... so on...

var storage = {
bolts: {
barcode: 57263144,
price: 0.5,
name: '100mm Bolts',
stock: 8642,
},
brackets: {
barcode: 13245627,
price: 0.2,
name: 'Plain Brackets',
stock: 5201,
},
screwdriver: {
barcode: 52678349,
price: 15,
name: 'Screwdriver',
stock: 30,
},
hammer: {
barcode: 86583916,
price: 25,
name: 'Hammer',
stock: 5,
}
}

function check(){
Object.keys(storage).forEach(function(key) {
for (var i = 1; i <= rowAmount; i++){

var barcodeCheck = document.getElementById("input"+i).value;

var input = document.getElementById("input"+i).value;

if (input.length > 8){
document.getElementById("input"+i).style.backgroundColor = "red";
}
else {
document.getElementById("input"+i).style.backgroundColor = "white";
}


if (barcodeCheck == storage[key].barcode){
document.getElementById("name"+i).innerHTML = "Name: "+storage[key].name;
document.getElementById("price"+i).innerHTML = "Price: £"+storage[key].price+" / one";
document.getElementById("stock"+i).innerHTML = "In stock: "+storage[key].stock;
}
else {
document.getElementById("name"+i).innerHTML = "";
document.getElementById("price"+i).innerHTML = "";
document.getElementById("stock"+i).innerHTML = "";
}
}
});

setTimeout(check,1);
}
check();

Answer

I think what you're looking for is for...in.

You also have this function to run pretty much constantly. 1ms is far too tight a poll and your application's performance is going to suffer.

UPDATE: The real culprit here, as I discovered (and as the answer below pointed out) is that after you've check a key and appropriately manipulated the DOM, you then continue checking. The subsequent checks will obviously fail, because there's only one right answer, and then everything gets reset.

To clarify, looping through the keys using forEach is not an incorrect solution, though using for...in is cleaner and more appropriate to the task at hand.

var storage = {
  bolts: {
    barcode: 57263144,
    price: 0.5,
    name: '100mm Bolts',
    stock: 8642,
  },
  brackets: {
    barcode: 13245627,
    price: 0.2,
    name: 'Plain Brackets',
    stock: 5201,
  },
  screwdriver: {
    barcode: 52678349,
    price: 15,
    name: 'Screwdriver',
    stock: 30,
  },
  hammer: {
    barcode: 86583916,
    price: 25,
    name: 'Hammer',
    stock: 5,
  }
}

function check(){
  var match = false;

  for (var key in storage) {
    for (var i = 1; i <= rowAmount; i++) {
      //barcodeCheck and input had the same value
      //I also removed the .value. You'll see why in a sec
      var input = document.getElementById("input"+i);

      if (input.value.length > 8) {
        input.style.backgroundColor = "red";
      }
      else {
        input.style.backgroundColor = "white";
      }

      if (input.value == storage[key].barcode){
        document.getElementById("name"+i).innerHTML = "Name: "+storage[key].name;
        document.getElementById("price"+i).innerHTML = "Price: £"+storage[key].price+" / one";
        document.getElementById("stock"+i).innerHTML = "In stock: "+storage[key].stock;

        match = true;
      }
    }

    if (match) break;
  }

  //Only reset if you've checked them all and come up short
  if (!match)
  {
    document.getElementById("name"+i).innerHTML = "";
    document.getElementById("price"+i).innerHTML = "";
    document.getElementById("stock"+i).innerHTML = "";
  }

  //Nobody's going to notice a 250ms delay in your poll
  setTimeout(check, 250);
}
check();
Comments