使用链接单击链接时使用异步调用关联的json文件

Question

我有一个项目，在该项目中，我必须使用json文件创建朋友列表，然后将其名称链接到个人资料。我已经知道点击朋友的选项卡会弹出friends.json文件，但是我不知道如何使用异步调用配置文件。配置文件是每个朋友（例如1.json，2.json等）附带的单独的json文件。

我有一个点击链接的事件，这就是我一直坚持的地方。我对javascript真的很陌生，我了解使用PHP而不是javascript。我也无法更改html或json文件，只能更改javascript。

[{
    "id": 1,
    "firstName": "Jane",
    "lastName": "Doe"
}, {
    "id": 2,
    "firstName": "Tom",
    "lastName": "Jones"
}, {
    "id": 3,
    "firstName": "Clark",
    "lastName": "Kent"
}, {
    "id": 4,
    "firstName": "Sally",
    "lastName": "Anne"
}]

window.addEventListener('DOMContentLoaded', function(e) {
    const loadDataLink = document.querySelector('.friends a');
    const display = document.querySelector('.content');
    let appData=[];
    let friendList = ``;

    fetch('friends/friends.json').then
    (response => response.json()).then
    (data =>{
      appData =  [...data]
      buildMarkup() 

  }) 

  function buildMarkup(){
    let listItem = ``;
     appData.forEach(friend=>{
     listItem += `<li class="friend">${friend.firstName} ${friend.lastName}</li>`
     })
    const list = `<ul>${listItem}</ul>`
    let fragment = document.createRange().createContextualFragment(list)
    friendList = fragment.querySelector('ul');
    const links = friendList.querySelectorAll('li');
    links.forEach((link, index)=>{
        link.dataset.index = index;
        link.addEventListener('click', function(e){
            fetch('friends/.json');
          console.log(e.target.dataset.index)
          display.innerHTML = ""
        }) 
    })   
  }

  loadDataLink.addEventListener('click', function(e){
    display.innerHTML= ""
     display.appendChild(friendList);
  })   

}) 

即使您只是有异步技巧，我也非常感谢。

Answer 1

据我所知，您的问题与异步无关。您只需要对朋友的json文件执行与对朋友列表相同的操作即可。您可以：

• 将朋友的ID放入相应列表项的数据集中：

appData.forEach(friend=>{
     listItem += `<li class="friend" data-id="${friend.id}">
               ${friend.firstName} ${friend.lastName}</li>`
     })

• 然后像对朋友列表一样使用访存：

link.addEventListener('click', function(e){
    fetch(`friends/${e.target.dataset.id}.json`)
        .then(response => response.json())
        .then( (data) => {
           buildFriendMarkup(data);
        });
    display.innerHTML = ""
}) 

• 定义buildFriendMarkup来设置标记，就像使用buildMarkup作为朋友列表一样

如果不是您要查找的内容，则需要更精确地描述遇到的问题和错误。