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}">