How to fetch dynamic json with respond.json function using javascript [duplicate]

I want to populate these json file to html and i have tried no avail, i'm hoping someone could put me on the right track.

I tried to fetch this json using the code i tried json link json File

Added: i have tried https://developer.mozilla.org/en-US/docs/Web/API/Response/json but didn't give result as my json array went up almost 4 level

Here is the code i tried

    fetch("./data.json") 
  .then(function (result) {
    appendData(result);
  })
  .catch(error => console.log('error', error));

  function appendData(result) {
            var mainContainer = document.getElementById("myData");
            for (var i = 0; i < result.length; i++) {
               
                console.log(data.salaryPaymentDetails.result[i].amount)
            }
        }

It give me undefine, don't know what am missing