Json файл борется с длиной

Question

Итак, у меня все почти работает так, как я хочу, просто ошибка, с которой я борюсь. Каждый раз, когда я ищу элемент, когда результат для этого элемента показывает, что длина повторяется.

Когда я ищу ox, есть 2 результата, и это правильно, но длина (2) отображается в оба из них, я отображаю только один

[Код]

const resultHtml = (itemsMatch) => {
  if (itemsMatch.length > 0) {
    const html = itemsMatch
      .map(
        (item) => ` 
        <span>${itemsMatch.length}</span>
      <div class="card">
        <div class="items-img">
        
        </div>
        <div class="items-info">
          <h4>${item.title}</h4>
          <small>${item.path}</small>
        </div>
      </div>
    `
      )
      .join('');

    //console.log(html);

    itemList.innerHTML = html;
  }
};

////

Вопрос 2

У меня есть еще один вопрос, я пытался получить изображение из Json, и я получил путь, ха-ха

почему apth, а не img

const resultHtml = (itemsMatch) => {
  if (itemsMatch.length > 0) {
    const html =
      `<span class="items-results">${itemsMatch.length} Resultados</span>` +
      itemsMatch
      .map(
        (item) => ` 
      <div class="card">
        <div class="items-img">
          ${item.image}
        </div>
        <div class="items-info">
          <h4>${item.title}</h4>
          <small>${item.path}</small>
        </div>
      </div>
    `
      )
      .join('');

    console.log(html);

    itemList.innerHTML = html;
  }
};

Answer 1

Если вы переместите <span>${itemsMatch.length}</span> из обратного вызова map, он не будет повторяться для каждого элемента. Подробнее о map () здесь .

Замените:

 const html = itemsMatch
  .map(
    (item) => ` 
    <span>${itemsMatch.length}</span>
    ... more HTML here
    `
  )
  .join('');

На это:

const html = `<span>${itemsMatch.length}</span>` + (
  itemsMatch
  .map(
    (item) => `
  <div class="card">
    <div class="items-img">
    
    </div>
    <div class="items-info">
      <h4>${item.title}</h4>
      <small>${item.path}</small>
    </div>
  </div>
`
  )
  .join('')
);

Что касается проблемы с изображением :

Вы просто выводите путь, и поэтому он выводит только путь. Если вы пытаетесь отобразить изображение, укажите путь как источник тега <img>.

Итак, вместо просто:

${item.image}

Используйте:

<img src="${item.image}">