how to loop through json object to get key and value, and display them in angular html?

I need to build an email sender by using nodemailer. I am sending the json object below and want to display the previous and current value changes with a pair of key and value in angular html.

<json input>

async function showChanges(formdata){
    let htmlFile = await fs.promises.readFile(templatePath, {
      encoding: "utf-8",
    });

    let template = handlebars.compile(htmlFile);

    let templateInput = {
      Message_Body: {
        Previous: formData.Message_Body.formChanges.Previous,
        Current: formData.Message_Body.formChanges.Current,
      }
    };
    return template(templateInput);
}

For example, imagine the formData input looks like:

    "Message_Body": {
        "formChanges": {
            "Previous": {
                "Events": "TEST",
                "AdditionalInfo": ""
            },
            "Current": {
                "Events": "TEST111",
                "AdditionalInfo": "test"
            }
        }
    }

And the html structure in angular looks like:

<div>
  <h3>Title: This following has been changed!</h3>
  
  <h3>Previous Values</h3>
  <ul>
    <li> : </li>
  </ul>

  <h3>Current Values</h3>
  <ul>
    <li> : </li>
  </ul>
</div>

How can I loop through the previous and current keys and values and display them as a list? I am assuming *ngFor should be used in <div> tag but it looks like it is applicable only in case of an array..

Can anyone give me any clue please?

I tried adding this code *ngFor="let item of templateInput | keyvalue" to the following:

<div>
  <h3>Title: This following has been changed!</h3>
  
  <h3>Previous Values</h3>
  <ul *ngFor="let item of Message_Body.Previous | keyvalue">
    <li> : </li>
  </ul>

  <h3>Current Values</h3>
  <ul *ngFor="let item of Message_Body.Current | keyvalue">
    <li> : </li>
  </ul>
</div>

And the result is nothing shown (empty).. My expected result should be:

Title: This following has been changed!

Previous Values:
* Events: TEST
* AdditionalInfo: 

Current Values:
* Events: TEST111
* AdditionalInfo: test

Via Active questions tagged javascript - Stack Overflow https://ift.tt/wbkqJ68