I want to parse json array with jquery and success ajax response. the json look like this :
{
"data": {
    "list_app_banner_and_schedule": [
        {
            "due_date": "2022-02-19T00:00:00",
            "start_showing_on": "2022-02-18",
            "removed_on": "2022-02-22T00:00:00"
        },
        {
            "due_date": "2022-02-20T00:00:00",
            "start_showing_on": "2022-02-18",
            "removed_on": "2022-02-23T00:00:00"
        }
    ],
    "list_email_banner_schedule": [
        {
            "due_date": "2022-02-19T00:00:00",
            "sent_on": "2022-02-22T00:00:00"
        },
        {
            "due_date": "2022-02-20T00:00:00",
            "sent_on": "2022-02-23T00:00:00"
        }
    ],
    "list_pn_banner_schedule": [
        {
            "due_date": "2022-02-19T00:00:00",
            "sent_on": "2022-02-22T00:00:00"
        },
        {
            "due_date": "2022-02-20T00:00:00",
            "sent_on": "2022-02-23T00:00:00"
        }
    ]
  } 
}
and i want to create something like this :

Here's my code :
$.ajax({
url: "{%url 'url' %}",
type: "POST",
dataType: "json",
headers: {
    "X-CSRFToken": token
},
contentType: "application/json",
data: JSON.stringify(obj, null, 2),
success: function(data, status, xhr) {
    var table = $("<table><tr><th>Schedule Banner</th></tr>");
    table.append("<tr><td>Start Showing On:</td><td>" + data["list_app_banner_and_schedule"]["start_showing_on"] + "</td></tr>");
    table.append("<tr><td>Removed On:</td><td>" + data["list_app_banner_and_schedule"]["removed_on"] + "</td></tr>");
    $("#message").html(table);
},
error: function(xhr, status, error) {
    alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
}
})
but I got error "Cannot read properties of undefined (reading 'start_showing_on')". What I did wrong?
