加载json列表并处理它

Question

我需要一个应用程序

• 从示例 JSON 对象加载项目列表（即客户详细信息），将它们显示在列表中

单击每一行/项目会显示一个带有单独详细信息的模块/弹出窗口

POST 编辑/删除条目

我试图在 div 中显示数据，但它不在列表中，除此之外，我需要为包含客户姓名的每一行添加一个 onclick 并在弹出窗口中显示其他数据有人可以帮助我吗，请？我是编程新手。

包.json

[

  {

    "id": "1",

    "firstName": "John",

    "lastName": "Doe"

  },

  {

    "id": "2",

    "firstName": "Mary",

    "lastName": "Peterson"

  },

  {

    "id": "3",

    "firstName": "George",

    "lastName": "Hansen"

  }

]

代码

fetch('package.json')

    .then(function (response) {

        return response.json();

    })

    .then(function (data) {

        appendData(data);

    })

    .catch(function (err) {

        console.log('error: ' + err);

    });

function appendData(data) {

    var mainContainer = document.getElementById("myData");

    for (var i = 0; i < data.length; i++) {

        var div = document.createElement("div");

        div.innerHTML = data[i].firstName + ' ' + data[i].lastName;

        mainContainer.appendChild(div);

    }

}