Here is the code in which else does not work, it stands by the standard, that is, when the product is even found, it still executes what is written in the else , what is wrong?

  products.forEach(function(e) { if(e.id == id) { document.getElementById('product-name').innerHTML = e.name; document.getElementById('product-miniAbout').innerHTML = e.miniAbout; document.getElementById('product-about').innerHTML = e.about; document.getElementById('product-category').innerHTML = e.category; document.getElementById('product-id').innerHTML = e.id; document.getElementById('product-bigPicture').innerHTML = '<img src="'+ e.img +'" style="max-height: 450px;" alt="'+ e.miniAbout +'">'; document.getElementById('product-picture').innerHTML = '<img src="'+ e.img +'" alt="'+ e.miniAbout +'">'; document.getElementById('product-price').innerHTML = e.price + ' Грн.'; } else { document.getElementById('product-bigPicture').innerHTML = '<img src="https://images.unsplash.com/38/awhCbhLqRceCdjcPQUnn_IMG_0249.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=9c2c8df6c036962d2ba24fd6af421a40" style="max-height: 450px;">'; document.getElementById('product-about').innerHTML = 'Товар не найден!'; document.getElementById('product-product').innerHTML = '<b>Cheap Shopping</b>'; document.getElementById('delivery').innerHTML = '<b>Cheap Shopping</b>'; } return; });
  • If you remove the else condition, then everything works, and when I add an else that does not show empty goods, goods that do not empty stop showing and write that the goods are not found - arthru
  • Can you provide html and moms with an array of data? - Alexey Shimansky
  • talking about the goods in the plural, and in the code tied to getElementById . ID must be unique. - Invision
  • In this case, it is the page on which the specific 1 product is displayed by id - arthru
  • one
    var found=false; if(e.id==id) { ваши действия когда найдено; found=true; } ПОСЛЕ ЦИКЛА: if(!found) { действия которые когда не найдено } var found=false; if(e.id==id) { ваши действия когда найдено; found=true; } ПОСЛЕ ЦИКЛА: if(!found) { действия которые когда не найдено } - Mike

3 answers 3

Naturally, for all array elements with id not equal to id , the code will execute else . 'Product not found!' need to withdraw after the cycle - if the product is not found.

  • so it is tied up in an iteration on e.id , what should it do after the loop? - Invision
  • @Invision - the e.id not used in e.id - Igor
  • the principle is that we have a specific product id and we output this specific product, but when we have some kind of random id (we don’t have it in our database), then just nothing happens, so I decided to write else but then it constantly writes else if goods with such id are found - arthru
  • @Igor, so the same identifier refers to, that is, the result of the execution will be the last element in the array - Invision
  • our base from where we pick out the product we need by id looks like this: products = [{name: blah blah, id: 1} {name: blah blah, id: 2}] - arthru

Try this:

 var foundProduct = null; products.forEach(function(e) { if(e.id == id) { foundProduct = e; } }); if (foundProduct) { document.getElementById('product-name').innerHTML = foundProduct.name; document.getElementById('product-miniAbout').innerHTML = foundProduct.miniAbout; document.getElementById('product-about').innerHTML = foundProduct.about; document.getElementById('product-category').innerHTML = foundProduct.category; document.getElementById('product-id').innerHTML = foundProduct.id; document.getElementById('product-bigPicture').innerHTML = '<img src="'+ foundProduct.img +'" style="max-height: 450px;" alt="'+ foundProduct.miniAbout +'">'; document.getElementById('product-picture').innerHTML = '<img src="'+ foundProduct.img +'" alt="'+ foundProduct.miniAbout +'">'; document.getElementById('product-price').innerHTML = foundProduct.price + ' Грн.'; } else { document.getElementById('product-bigPicture').innerHTML = '<img src="https://images.unsplash.com/38/awhCbhLqRceCdjcPQUnn_IMG_0249.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=9c2c8df6c036962d2ba24fd6af421a40" style="max-height: 450px;">'; document.getElementById('product-about').innerHTML = 'Товар не найден!'; document.getElementById('product-product').innerHTML = '<b>Cheap Shopping</b>'; document.getElementById('delivery').innerHTML = '<b>Cheap Shopping</b>'; }

The essence

  1. output the result of the action you are in the same elements
  2. as a result, if there are three elements in the array with id = 1,2,3, and you are looking for the second, then after passing the second and successful if e.id == id there will be the next iteration, which is not canceled by the word return

An example of cancellation found in the internet:

 var BreakException= {}; try { [1,2,3].forEach(function(el) { if(el === 1) throw BreakException; }); } catch(e) { if (e!==BreakException) throw e; }
  • e -> foundProduct - Igor
  • @Igor, thank you, I rule - SanŚ́́́́́́́́́-

In ES2015, the array has a find method, with it the code will look easier

 var product = products.find(function(el){return e.id == id; }); if(product) { document.getElementById('product-name').innerHTML = product.name; ... } else { ... }

And also for the search you can always use the usual for

 var product; for(var i=0;i<products.length;i++){ if(products[i].id == id){ product = products[i]; break; } } if(product) { document.getElementById('product-name').innerHTML = product.name; ... } else { ... }