以JSON格式附加数据

Append data in JSON format

本文关键字：数据 格式 JSON      更新时间：2023-09-26

我有一些JSON格式的数据。我想把它显示在div上。跟随不起作用。任何我应该改变的想法。

<div class="risktable"> </div>

$.ajax({
      contentType:'application/json',
      data: {"sprint_start":"2015-12-13","sprint_end":"N.A.","available":[{"id":5,"name":"Thisun H","free_time":0.0,"possible":[]}],"assigns":[{"assignee_id":6,"assigned_to":"Isuru P","status":"OnTrack","hours_per_sprint":6,"limit_per_sprint":6.0,"limit_per_day":6.0,"tasks":[{"task_id":3,"task_name":"Schedule Servlet","project_id":1,"sprint_id":"2015-12-13","parent_id":0,"status":"New","assigned_to":"Isuru P","estimated_time":6,"remaining_time":6,"completed_ratio":0,"start_date":"2015-12-10","due_date":"2015-12-13","critical_task":true,"dependents":[]}]},{"assignee_id":7,"assigned_to":"Manoj D","status":"Risk","hours_per_sprint":6,"limit_per_sprint":5.0,"limit_per_day":5.0,"tasks":[{"task_id":4,"task_name":"Resource Servlet","project_id":1,"sprint_id":"2015-12-13","parent_id":0,"status":"New","assigned_to":"Manoj D","estimated_time":6,"remaining_time":0,"completed_ratio":0,"start_date":"2015-12-10","due_date":"2015-12-13","critical_task":true,"dependents":[]}]},{"assignee_id":5,"assigned_to":"Thisun H","status":"OnTrack","hours_per_sprint":0,"limit_per_sprint":6.0,"limit_per_day":6.0,"tasks":[{"task_id":1,"task_name":"Redmine Connection","project_id":1,"sprint_id":"2015-12-13","parent_id":0,"status":"New","assigned_to":"Thisun H","estimated_time":3,"remaining_time":0,"completed_ratio":100,"start_date":"2015-12-07","due_date":"2015-12-09","critical_task":true,"dependents":[2,3,4]},{"task_id":2,"task_name":"Risk Servlet","project_id":1,"sprint_id":"2015-12-13","parent_id":0,"status":"New","assigned_to":"Thisun H","estimated_time":10,"remaining_time":0,"completed_ratio":100,"start_date":"2015-12-10","due_date":"2015-12-12","critical_task":false,"dependents":[]}]}],"suggestions":[{"dev_id":5,"dev_name":"Thisun H","task_id":4,"task_name":"Resource Servlet"}]},
          success: function(data){
        
           $.each(data.data, function(i,value) {
              $('.risktable').append(
                '<div>'+'<p>'+ value.assigns.assignee_id + '</p>'
               
               +'</div>'
                ); 
            });
            }       
        });

json对象上的assigns属性是一个数组。您需要循环遍历其中的项，构建div并附加它。 
$.each(data.assigns, function(i,value) {
  var item='<div>'+'<p>'+ value.assignee_id + '</p></div>';
  $('.risktable').append(item);
});

这是一个工作样品。

如果您拥有的json数据没有从外部获取（即您已经拥有json对象定义和值），则无需执行ajax方法调用。Ajax用于发出外部请求。

或者，您可以将json对象存储为一个通用变量，并通过它进行解析（假设您使用的是jQuery），如下所示。

var mock_data = {"sprint_start": "2015-12-13","sprint_end":"N.A.","available": [{"id":5,"name":"Thisun H","free_time":0.0,"possible":[]}],"assigns":[{"assignee_id":6,"assigned_to":"Isuru P","status":"OnTrack","hours_per_sprint":6,"limit_per_sprint":6.0,"limit_per_day":6.0,"tasks":[{"task_id":3,"task_name":"Schedule Servlet","project_id":1,"sprint_id":"2015-12-13","parent_id":0,"status":"New","assigned_to":"Isuru P","estimated_time":6,"remaining_time":6,"completed_ratio":0,"start_date":"2015-12-10","due_date":"2015-12-13","critical_task":true,"dependents":[]}]},{"assignee_id":7,"assigned_to":"Manoj D","status":"Risk","hours_per_sprint":6,"limit_per_sprint":5.0,"limit_per_day":5.0,"tasks":[{"task_id":4,"task_name":"Resource Servlet","project_id":1,"sprint_id":"2015-12-13","parent_id":0,"status":"New","assigned_to":"Manoj D","estimated_time":6,"remaining_time":0,"completed_ratio":0,"start_date":"2015-12-10","due_date":"2015-12-13","critical_task":true,"dependents":[]}]},{"assignee_id":5,"assigned_to":"Thisun H","status":"OnTrack","hours_per_sprint":0,"limit_per_sprint":6.0,"limit_per_day":6.0,"tasks":[{"task_id":1,"task_name":"Redmine Connection","project_id":1,"sprint_id":"2015-12-13","parent_id":0,"status":"New","assigned_to":"Thisun H","estimated_time":3,"remaining_time":0,"completed_ratio":100,"start_date":"2015-12-07","due_date":"2015-12-09","critical_task":true,"dependents":[2,3,4]},{"task_id":2,"task_name":"Risk Servlet","project_id":1,"sprint_id":"2015-12-13","parent_id":0,"status":"New","assigned_to":"Thisun H","estimated_time":10,"remaining_time":0,"completed_ratio":100,"start_date":"2015-12-10","due_date":"2015-12-12","critical_task":false,"dependents":[]}]}],"suggestions":[{"dev_id":5,"dev_name":"Thisun H","task_id":4,"task_name":"Resource Servlet"}]};
$(mock_data.assigns).each( function(){
    $('.risktable').append('<div><p>'+this.assignee_id+'</p></div>');
});

您可以在此处看到示例：http://codepen.io/team/anthro-web/pen/yeYobN

相关文章：