如何使用mmenu插件将JSON数据注入联系人列表？

步骤1：创建联系人JSON数据文件 #

新建contacts.json文件，按以下结构存储联系人信息：

[
  {
    "firstName": "Alan",
    "lastName": "Thompson",
    "phone": "012-345-6789",
    "email": "alan@domain.com",
    "avatar": "img/profile-1-b.png"
  },
  {
    "firstName": "Anne",
    "lastName": "Cook",
    "phone": "012-345-6789",
    "email": "anne@domain.com",
    "avatar": "img/profile-2-b.png"
  }
]

步骤2：简化原有HTML结构 #

清空ul#contacts内的硬编码内容，只保留空列表：

<div id="menu">
  <ul id="contacts"></ul>
</div>
<script src="http://localhost:8383/CCDir/mmenu.js"></script>

步骤3：编写JS加载并渲染数据 #

在页面中添加JavaScript代码，通过fetch获取JSON数据，动态生成联系人列表的HTML结构，最后初始化mmenu插件：

// 获取JSON数据并渲染联系人列表
fetch('contacts.json')
  .then(response => response.json())
  .then(contacts => {
    const contactsList = document.getElementById('contacts');
    let html = '';

    // 遍历每个联系人生成对应HTML
    contacts.forEach(contact => {
      const fullName = `${contact.firstName} ${contact.lastName}`;
      html += `
        <li>
          <span>
            <span class="preview">
              <img src="${contact.avatar}" />
              <span>${contact.firstName}<br>
                <small>${contact.lastName}</small>
              </span>
            </span>
          </span>
          <div data-mm-title="${fullName}">
            <div class="details">
              <img src="${contact.avatar}" />
              <strong>${contact.firstName}</strong>
              <dl>
                <dt>Name</dt>
                <dd>${fullName}</dd>
                <dt>Phone</dt>
                <dd>${contact.phone}</dd>
                <dt>Email</dt>
                <dd>${contact.email}</dd>
              </dl>
            </div>
          </div>
        </li>
      `;
    });

    // 将生成的HTML插入列表
    contactsList.innerHTML = html;

    // 初始化mmenu插件（确保在DOM渲染完成后执行）
    new Mmenu('#menu');
  })
  .catch(error => console.error('加载联系人数据失败:', error));

注意事项 #

• 确保JSON文件路径正确，与HTML页面处于同一目录或路径配置无误。
• 若页面原本已初始化mmenu，需先销毁原有实例再重新初始化，避免冲突。
• 本地测试时需通过HTTP服务器访问（如localhost），否则会出现跨域问题。

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