0

Вот код, в котором else не работает, он стоит по стандарту, то есть когда товар даже найден, то все равно выполняется то, что прописано в else, что не так?

  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;
    });
8
  • Если убрать условие else то все работает, а когда добавляю else что бы не показывать пустые товары, то товары которые не пустые перестают показываться и пишет что товар не найден
    – arthru
    14 апр 2016 в 19:22
  • А можете предоставить html и сам мам массив данных? 14 апр 2016 в 19:25
  • говорите про товары во множественном числе, а в коде завязываетесь на getElementById. ID должен быть уникален.
    – Invision
    14 апр 2016 в 19:26
  • В данном случае, именно страница на которой выводиться конкретный 1 товар по id
    – arthru
    14 апр 2016 в 19:29
  • 1
    var found=false; if(e.id==id) { ваши действия когда найдено; found=true; } ПОСЛЕ ЦИКЛА: if(!found) { действия которые когда не найдено }
    – Mike
    14 апр 2016 в 19:34

3 ответа 3

2

Естественно, для всех элементов массива с id не равными id, код выполнит else. 'Товар не найден!' надо выводить после цикла - если товар не найден.

5
  • так он завязывается в итерации на e.id, что ему выполнять после цикла?
    – Invision
    14 апр 2016 в 19:30
  • @Invision - в else e.id не используется
    – user176262
    14 апр 2016 в 19:31
  • принцип в том что у нас есть конкретный id товара и мы выводим этот кокретный товар, но когда у нас id какойто рандомный (в нашей базе его нет) то просто ничего не происходит, вот я и решил написать else но оно тогда постоянно пишет else даже если товар с таким id найден
    – arthru
    14 апр 2016 в 19:32
  • @Igor, так на один и тот-же идентификатор ссылается, т.е результатом выполнения будет последний элемент в массиве
    – Invision
    14 апр 2016 в 19:32
  • наша база от куда мы выдераем нужый нам товар по id выглядит таким образом:products = [ { name: бла бла, id: 1 } {name: бла бла, id: 2} ]
    – arthru
    14 апр 2016 в 19:33
0

Попробуйте так:

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>';
 }

Суть

  1. выводите результат действия вы в одни и те же элементы
  2. как следствие - если в массиве три элемента с id = 1,2,3, а ищите вы второй, то после прохождения второго и успешного if e.id == id будет следующая итерация, которая не отменяется словом return

Пример отмены нашёл в инете:

var BreakException= {};

try {
    [1,2,3].forEach(function(el) {
        if(el === 1) throw BreakException;
    });
} catch(e) {
    if (e!==BreakException) throw e;
}
2
0

В ES2015 у массивом есть метод find, с ним код будет выглядеть проще

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

А так же для поиска всегда можно использовать обычный 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 {
    ...
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.