使用Fetch读取本地JSON时页面标记出现多余逗号的问题

问题描述 #

使用Fetch API读取本地Blog.json文件并展示数据时，页面标记中出现了多余的逗号，示例HTML输出如下：

<p>Rajdeep Singh
officialrajdeepsingh
Read Book, Music Lover and Web Developer</p>
<p>,
Esme Sullivan
Esme
Graet Book Reader</p>
<p>,</p>

原因分析 #

你的代码中，blogData.map()返回的是包含多个HTML片段的数组，当直接把这个数组传给insertAdjacentHTML时，JavaScript会自动将数组转换为字符串，数组元素之间默认用逗号分隔，这就是多余逗号的来源。

解决方案 #

在map()之后调用join('')方法，将数组中的HTML片段拼接成一个完整的字符串，消除元素间的逗号分隔：

document.getElementById('appData').insertAdjacentHTML('beforeend', html.join(''));

完整修改后的代码 #

fetch('./src/Blog.json')
  .then(function (response) {
    return response;
  })
  .then(function (data) {
    return data.json();
  })
  .then(function (blogData) {
    const html = blogData.map(
      (data) =>
        ` 
        <h3>${data.firstName + ' ' + data.lastName}</h3>
        <h4>${data.username}</h4>
        <p>${data.aboutAuthor}</p>
   `
    );
    // 添加join('')消除数组转字符串时的逗号分隔
    document.getElementById('appData').insertAdjacentHTML('beforeend', html.join(''));
  })
  .catch(function (err) {
    console.log('Fetch problem show: ' + err.message);
  });

另外注意到你模板字符串里存在标签不匹配的问题（比如<h3>对应</h4>），建议一并修正，避免HTML结构错误。

内容的提问来源于stack exchange，提问作者Jay