javascript - 加载 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);
    }
}

标签： javascripthtmljson

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>