Question

我需要一个应用程序

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

单击每行/每个项目都会显示一个模块/弹出窗口，其中包含各个详细信息
POST以编辑/删除条目

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

package.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);
    }
}

Answer 1

在这里，我所做的是考虑将数据视为变量。您可以使用 $.getJSON()来从JSON文件中获取数据。

var packageJson;
$(document).ready(function(){

// JSON File Data
packageJson = [
  {
    "id": "1",
    "firstName": "John",
    "lastName": "Doe"
  },
  {
    "id": "2",
    "firstName": "Mary",
    "lastName": "Peterson"
  },
  {
    "id": "3",
    "firstName": "George",
    "lastName": "Hansen"
  }
];

// Insert JSON data to html
$.each(packageJson,function(key,value){
  $('#nameList').append('<li data-id="'+value.id+'">'+value.firstName+' '+value.lastName+ '</li>');
});
});

$(document).on('click','#nameList li',function(){
  $userId = $(this).attr('data-id');
  $user = {};
  
  // loop through the json data and fetch the data to the popup
  $.each(packageJson,function(key,value){
    if(value.id === $userId)
      {
        $('#userId p').html(value.id);
        $('#userFirstName p').html(value.firstName);
        $('#userLastName p').html(value.lastName);
        
        $('#myModal').modal('show'); // Show popup
      }
  });
  

});

.mainContent{
margin-left:10px;
padding:10px;
}

#myModal .modal-body p{
display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class='mainContent'> 
  <h3> User List</h3>
  <ul id="nameList">
  </ul>
</div>


<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">User Details</h4>
      </div>
      <div class="modal-body">
        <div id="userId">
          <label>User Id : </label>
          <p></p>
        </div>
        <div id="userFirstName">
          <label>First Name : </label>
          <p>Some text in the modal.</p>
        </div>
        <div id="userLastName">
          <label>First Name : </label>
          <p>Some text in the modal.</p>
        </div>
      </div>
    </div>

  </div>
</div>

Answer 2

添加div.setAttribute("data-id",data[i].id)

然后使用类似的内容

const resWin = document.getElementById("resWindow");

mainContainer.addEventListener("click", function(e) {
  resWin.classList.toggle("show",0);

  const tgt = e.target;
  if (tgt.tagName.toUpperCase() === "DIV") {
    fetch("/details", {
        method: "POST",
        body: '{ "id": "' + tgt.getAttribute("data-id") + '"}'
      })
      .then(function(res) {
        return res.json();
      })
      .then(function(data) {
        resWin.innerHTML = formatNicely(data);
        resWin.classList.toggle("show",1);
      })
  }
})

加载json列表并处理它

2 个答案: