Why does some of my columns in my HTML table display cells as undefined while other columns display correctly?

Question

See screenshot:

I couldn't figure out why some of the cells are undefined even though they have similar data types to some of the cells that are displaying values correctly? What can I try to make them display properly?
The code should take the list of dictionaries and populate the tables with them. I am fairly new to javascript and web development. I usually work in backend with SQL and python.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
    th{ 
        cursor: pointer;
        color:#fff;
    }
</style>


<table class="table table-striped">
    <tr  class="bg-info">
        <th  data-colname="date" data-order="desc">date &#9650</th>
        <th  data-colname="exposed" data-order="desc">exposed (mn) &#9650</th>
        <th  data-colname="displaced (k)" data-order="desc">displaced (k) &#9650</th>
        <th  data-colname="killed" data-order="desc">killed &#9650</th>
        <th  data-colname="duration(days)" data-order="desc">duration(days) &#9650</th>
        <th  data-colname="cause" data-order="desc">cause &#9650</th>
        <th  data-colname="Country Name" data-order="desc">Country Name &#9650</th>
        <th  data-colname="ISO code" data-order="desc">ISO code &#9650</th>
    </tr>
    <tbody id="myTable">
        
    </tbody>
</table>


<script>
var myArray =[{'date': '7/21/2007', 'exposed': 27712991, 'displaced (k)': 5000000, 'killed': 1071, 'duration(days)': 86, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '9/9/2010', 'exposed': 23137894, 'displaced (k)': 140000, 'killed': 0, 'duration(days)': 21, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '8/30/2008', 'exposed': 21631628, 'displaced (k)': 600000, 'killed': 0, 'duration(days)': 9, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '8/18/2008', 'exposed': 21529060, 'displaced (k)': 10000000, 'killed': 400, 'duration(days)': 37, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '7/12/2007', 'exposed': 21488636, 'displaced (k)': 11100000, 'killed': 96, 'duration(days)': 90, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '6/20/2004', 'exposed': 19855086, 'displaced (k)': 40000000, 'killed': 3000, 'duration(days)': 109, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '10/1/2010', 'exposed': 19362985, 'displaced (k)': 500000, 'killed': 15, 'duration(days)': 11, 'cause': 'Tropical StormSurge', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '7/25/2016', 'exposed': 18456496, 'displaced (k)': 25000, 'killed': 42, 'duration(days)': 32, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '9/1/2018', 'exposed': 17213562, 'displaced (k)': 1000, 'killed': 20, 'duration(days)': 6, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '6/11/2003', 'exposed': 16822143, 'displaced (k)': 9500000, 'killed': 600, 'duration(days)': 121, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '7/21/2002', 'exposed': 16541422, 'displaced (k)': 250000, 'killed': 380, 'duration(days)': 25, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '7/3/2007', 'exposed': 16486188, 'displaced (k)': 3000000, 'killed': 958, 'duration(days)': 81, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '9/16/2012', 'exposed': 15526445, 'displaced (k)': 200, 'killed': 45, 'duration(days)': 2, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '8/15/2011', 'exposed': 14830495, 'displaced (k)': 70000, 'killed': 158, 'duration(days)': 48, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '8/10/2017', 'exposed': 13271467, 'displaced (k)': 300000, 'killed': 117, 'duration(days)': 16, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '9/18/2010', 'exposed': 12414310, 'displaced (k)': 15000, 'killed': 88, 'duration(days)': 12, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '9/22/2008', 'exposed': 12372235, 'displaced (k)': 0, 'killed': 2400, 'duration(days)': 7, 'cause': 'Dam', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '10/7/2004', 'exposed': 11965543, 'displaced (k)': 100000, 'killed': 210, 'duration(days)': 11, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '8/20/2014', 'exposed': 11058729, 'displaced (k)': 500000, 'killed': 17, 'duration(days)': 19, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}, {'date': '9/22/2008', 'exposed': 8627859, 'displaced (k)': 13000, 'killed': 49, 'duration(days)': 7, 'cause': 'Heavy rain', 'Country Name': 'Nepal', 'ISO code': 'NPL'}]

buildTable(myArray)



 $('th').on('click', function(){
     var column = $(this).data('colname')
     var order = $(this).data('order')
     var text = $(this).html()
     text = text.substring(0, text.length - 1);
     
     
     
     if (order == 'desc'){
        myArray = myArray.sort((a, b) => a[column] > b[column] ? 1 : -1)
        $(this).data("order","asc");
        text += '&#9660'
     }else{
        myArray = myArray.sort((a, b) => a[column] < b[column] ? 1 : -1)
        $(this).data("order","desc");
        text += '&#9650'
     }

    $(this).html(text)
    buildTable(myArray)
    })


   
 
    
function buildTable(data){
    var table = document.getElementById('myTable')
    table.innerHTML = ''
    for (var i = 0; i < data.length; i++){
        var colname = `date-${i}`
        var colname = `exposed-${i}`
        var colname = `displaced (k)-${i}`
        var colname = `killed-${i}`
        var colname = `duration(days)-${i}`
        var colname = `cause-${i}`
        var colname = `Country Name-${i}`
        var colname = `ISO code-${i}`

        var row = `<tr>
                        <td>${data[i].date}</td>
                        <td>${data[i].exposed}</td>
                        <td>${data[i].displaced}</td>
                        <td>${data[i].killed}</td>
                        <td>${data[i].duration}</td>
                        <td>${data[i].cause}</td>
                        <td>${data[i].CountryName}</td>
                        <td>${data[i].ISOcode}</td>
                   </tr>`
        table.innerHTML += row
    }
}

</script>
<div id="time-range">
    <p>Time Range: <span class="slider-time"></span> - <span class="slider-time2"></span>
    </p> 
    
    <div class="sliders_step1">
        <div id="slider-range"></div>
    </div>
</div>

Answer 1

Change object key names or how you access them

Let us take one of the objects from your array, let's say index 9. It looks like this:

[9] = {
  'Country Name': "Nepal",
  'ISO code': "NPL",
  'cause': "Heavy rain",
  'date': "6/11/2003",
  'displaced (k)': 9500000,
  'duration(days)': 121,
  'exposed': 16822143,
  'killed': 600
};

Do you see some of those columns have spaces and/or brackets? (k) or (days) is part of the key name.
You have two options here:

1. You must use exactly those key names. So <td>${data[i]['duration(days)']}</td> and <td>${data[i]['displaced (k)']}</td> with all spaces and case sensitive name, for example
2. You could replace (k) and (days) and names with spaces to key names, which are easier to access

Any solution is valid here. I prefer when I can type the key name with just letters, but that is up to you.