Question 43423 in Html Question posted in
Some basic documentation can be found here.

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>{{item.key}} : {{item.value}}</li>
  </ul>

  <h3>Current Values</h3>
  <ul>
    <li>{{item.key}} : {{item.value}}</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>{{item.key}} : {{item.value}}</li>
  </ul>

  <h3>Current Values</h3>
  <ul *ngFor="let item of Message_Body.Current | keyvalue">
    <li>{{item.key}} : {{item.value}}</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
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This issue is resolved by using #each and lookup helpers in handlebars.js. I have opened up another ticket. If anyone wonders the question, please feel free to take a look at the below URL:

    how to iterate multiple arrays by using handlebars and #each to display values in a table?


  2. 0

    Firstly, in your templateInput object, you are nesting the Message_Body object inside another object with the key Message_Body. This means that in your Angular template, you should access the Previous and Current objects using the nested Message_Body.Message_Body.Previous and Message_Body.Message_Body.Current paths. To fix this, you can simply remove the outer Message_Body key from your templateInput object:

    let templateInput = {
  Previous: formData.Message_Body.formChanges.Previous,
  Current: formData.Message_Body.formChanges.Current,
};

    Secondly, in your Angular template, you should use the templateInput object as the data source for the *ngFor directive, not the Message_Body.Previous and Message_Body.Current objects directly. Here’s how you can modify your template to loop through the key-value pairs and display them:

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

  <h3>Current Values</h3>
  <ul>
    <li *ngFor="let item of Current | keyvalue">{{item.key}}: {{item.value}}</li>
  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search