0

So I have my data stored in database and I'm extracting in angular and I'm getting the data the problem is when I'm trying to display the data I'm getting the following error. I just need to display the question in html using ngFor* .I'm completely new to angular any guidance will be very helpful .

enter image description here

enter image description here

  this.selfHelpService.getFgSelfHelpByName("BYOD").subscribe(data => {
    //  console.log(data);
      const BYOD = JSON.parse(data["data"]);
    //  console.log(BYOD );
    });

<div class="cards" *ngFor="let BYOD of BYOD">
 <div class="read-1">
{{BYOD.posts.question}}
</div>
</div>

enter image description here

Improve this question
3
  • I'm not seeing anything that seems to require a JSON.parse and it is unclear where, if any of the code shown, is the source for the first image's data. On top of that, it looks like you are not looking at the data correctly as far as what part of the data has how many items (i.e. posts.question would not work as posts seems to be an array) Commented May 10, 2021 at 14:13
  • Hi Crashmstr i have edited the post had a few mistakes , I'm trying to display the two post.question ,but I'm really not sure how and totally confused any guidance will be helpful on how to do that Commented May 10, 2021 at 14:20
  • There are still some significant issues here. BYOD is a local variable to that function passed into subscribe and is not accessible elsewhere. Also, if that BYOD data is an array with one element, you need to start with using that element and then iterating over the posts array. Commented May 10, 2021 at 14:23

3 Answers 3

Reset to default
1

since you are getting the data, you can do the following:


// If this is your response: 
{"BYOD":[ ` { "posts": [ {"Question":"BYOD (Android)","answer":"???"}, {"Question":"BYOD (IOS)","answer":"?????"} ] } ] };


this.selfHelpService.getFgSelfHelpByName("BYOD").subscribe(data => {
    try {
      const BYOD = JSON.parse(JSON.stringify(data["data"]));
    } catch(err) {
      console.log('Try catch error ==>', err);
    }

   // Declare a variable in the component.ts above constructor called byodPostsData

   // Assign the values to that variable
   this.byodPostsData = BYOD[0].posts;
});


// In your HTML now, simply loop through the this.byodPostsData;




<div class="cards" *ngFor="let eachPost of byodPostsData">
   <div class="read-1" *ngIf="eachPost && eachPost.question">
     {{ eachPost.question }}
   </div>
</div>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Hi Srikar thank you for the answer and sorry for the delayed response everything works well but getting this error Cannot read property '0' of undefined
After you subscribe, what exactly is the 'data' object you are getting. Can you paste that?
I think all you need to do is this: const BYOD = JSON.parse(JSON.stringify(data)); Can you try with this one and see if it works??
0

As mentioned earlier by other commentators here: Am not sure why you are using JSON.parse(). But if you should use it for sure, then try using this:

// Generally its considered good practice to use try-catch for JSON.parse() for data

try {
  const BYOD = JSON.parse(JSON.stringify(data["data"]));
} catch(err) {
  console.log('Try catch error ==>', err);
}
Improve this answer

3 Comments

Hi Srikar thank you for you response after using the above mentioned format i am getting the following format of data ,how do i display the questions field {"BYOD":[ { "posts": [ {"Question":"BYOD (Android)","answer":"???"}, {"Question":"BYOD (IOS)","answer":"?????"} ] } ] };`
i have added the response image above
I added a new answer. Please check that. You should not have an issue now.
0

I am not sure what you are trying to loop, but, if you want to loop over byod,

<div class="cards" *ngFor="let byod of byod.BYOD[0].posts">
 <div class="read-1">
{{byod.Question}}
</div>
</div>

Besides in your example code, byod is locally scope in the function, you should make a component variable from that to make it accessable by the HTML.

Feel free to ask if something is unclear.

As you are new to Angular: this is how decided to access the response:

The 0 should come from the fact that the response is a JSON object with a JSON key BYOD which has an array as value: so the BYOD[0] indicates that you are trying to access the first item of the array from BYOD, which is another object with the JSON key "posts", the value of "posts" is an array you want to loop over. If you parse the data from the request to a component property called byot, it should be accessable in the html the following: byod.BYOD[0].posts I hope I made it a bit more clear.

Here is a stackblitz!

https://stackblitz.com/edit/angular-ivy-jcxgfo?file=src/app/app.component.ts

Improve this answer

5 Comments

Hi sdev95 ,i have edited the post i had a few questions so if i have to display the question how would i go about doing that ?
Hi @nickbellavi, I added a stackblitz as example! Feel free to comment if something is unclear.
sdev95 thank you for your patience ,i am getting the reponse as below{"BYOD":[ ` { "posts": [ {"Question":"BYOD (Android)","answer":"???"}, {"Question":"BYOD (IOS)","answer":"?????"} ] } ] };` and also getting this error TypeError: Cannot read property '0' of undefined
i have added the response image above
Ah, okay, well, were you able to open the stackblitz example? The 0 should come from the fact that the JSON key BYOD has an array as value: so the BYOD[0] indicates that you are trying to access the first item of BYOD, which is another object with the JSON key "posts", the value is the array you want to loop over. If you parse the data from the request to a component property called byot, it should be accessable in the html the following: byod.BYOD[0].posts I hope I made it a bit more clear, kind regards

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.