Append data in JSON format

Question

I have some data in JSON format. I want to display it on a div. Following doesn't work. Any idea where i should change.

<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>'

                ); 
            });

            }       
        });

Answer 1

If the json data you have isn't being fetched externally (i.e. you have the json object definition & value already), there's no need to do the ajax method call. Ajax is used for making external requests.

Alternatively, you could store your json object as a generic variable and parse through it (assuming you are using jQuery) like the following.

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>');
});

You can see the sample here: http://codepen.io/team/anthro-web/pen/yeYobN

Answer 2

assigns property on your json object is an array. you need to loop through the items in that and build your div and append that.

$.each(data.assigns, function(i,value) {
  var item='<div>'+'<p>'+ value.assignee_id + '</p></div>';
  $('.risktable').append(item);
});

Here is a working sample.