Exploring Angular: Looping through an Array of Objects

How can I extract and display values from a JSON object in a loop without using the keyValue pipe? Specifically, I am trying to access the "student2" data and display the name associated with it. Any suggestions on how to achieve this?

Thank you for any help.

JSON Object

{
  "student": {
    "student1": [],
    "student2": [
      {
        "id": "123",
        "name": "boot"
      },
      "student3": []
    ]
  },
  "teacher": {
    "teacher1": [],
    "teacher2": [
      {
        "id": "123456",
        "name": "toto"
      }
    ]
  }
}

ts.file

get(){
 this.service.getAll().subscribe((data:any) => {
  object.keys(data).length > 0;
 })
}

Answer №1

If the structure of your JSON object retrieved from the GET request is similar to what you have shared, you can implement the following code:

fetchData(){
 this.service.getAll().subscribe((data:any) => {
  data.student.forEach(element => {
    for (let key in element) {
        console.log("Key:", key, "Value:", element[key]);
        for (let val in element[key]) {
            console.log("Value:", val);
        }
    }
   });
 })
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the error "Err: user.validPassword is not a function" to occur

I am in the process of developing a node.js app and I have implemented Passport js. After referring to the Passport-local documentation on their official website, I decided to utilize the local passport-strategy. However, I encountered an error stating tha ...

Attempting to interpret HTML in Javascript

I have a text string that contains HTML tags. Initially, I attempted to insert this using innerHTML, but the tags were displayed as plain text. After some troubleshooting, I realized that I needed to properly parse the HTML content. Although jQuery prov ...

TypeScript PatchBaseline with AWS CDK

I am currently working with the AWS CDK and TypeScript, utilizing the @aws-cdk/aws-ssm library to create a PatchBaseline. While I have successfully created the Patch baseline, I'm encountering difficulties when attempting to define approvalRules. I ca ...

Is there a way to retrieve the selected value from a dropdown menu using vue.js?

I have a parent Vue component structured like this: <template> <form> <div class="row"> <div class="col-md-4"> <form-select id="color" name="color" :data="color">Color</form-select&g ...

Attempting to dynamically update the title of a Vue Meta page using a combination of a string and

In the blog application for my project using Nuxt JS 2.4.5, I am utilizing Vue Meta. I'm encountering difficulties while attempting to set the title along with a variable from data (), and it seems like something crucial is eluding me. Despite tryin ...

AngularJS - activating $watch/$observe event handlers

I am looking for a way to trigger all $watch/$observe listeners, even if the watched/observed value has not changed. This would allow me to implement a "testing only" feature that refreshes the current page/view without requiring user interaction. I have a ...

Next.js version 13 is causing the page to refresh each time the router is pushed

I am currently developing a search application using NextJs 13, and I have encountered an issue where the page refreshes every time I click the search button. Strangely, this only happens when the application is deployed on Vercel. When running the app l ...

What is the best method for arranging multiple images in a grid while keeping them within a specific maximum width and height?

I've been staring at this problem for a while now, attempting every possible solution to resize images and maintain aspect ratio, but none seem to work in my case. Here are two images that I manually resized so you can view them side by side: highly ...

extract data from a JavaScript object

Currently facing an issue extracting a String name from the JSON object's name. It is necessary to parse this type of JSON response obtained from the server. var response = { hopaopGmailsjIpW: { GmailsjIpW_totalEmails_count: 133, GmailsjIpW ...

Retrieving decimal value from a given string

Currently, I am working with Google Maps and encountering an issue with distance values being returned as strings like 1,230.6 km. My goal is to extract the floating number 1230.6 from this string. Below is my attempted solution: var t = '1,234.04 km ...

Replace the content within the iFrame completely

Is it possible to have a textarea where I can input HTML code and see a live preview of the webpage in an iframe as I type? For example, here is the code I'd like to write in the textarea: <!DOCTYPE html> <html> <head> ...

Avoiding HTML (JSX) tag duplication in React Component

Having the same code in my React component multiple times is becoming repetitive and inefficient. Is there a way to follow the DRY principle and avoid repeating this code? While creating a landing page with Sass styling, I noticed that I am duplicating t ...

ng-if not functioning properly following the activation of the "Save Changes" button

When I click the edit change button, I am updating information and then hiding the form to show the updated details by clicking on the Save Changes button. My API successfully updates the information, but for some reason, ng-if does not seem to work afte ...

Switching to a different ion-tab in Ionic causes the history to be lost

While transitioning between pages with the ion-tabs directive, Ionic seems to forget the history. Can you provide a solution for this issue or identify the specific section of code that may be causing it? ...

Utilize Jquery and MVC 5 to create a reoccurring partial view

I have a button that triggers the loading of a partial view containing a table with all the categories in my system. <input type="button" value="Load Categories" id="btnLoadCategories" /> This loading process is done via a partial view which is in ...

Tips for managing the onloadedmetadata event

If a video file cannot be played by the browser due to format or codec issues, I want to notify the user about it. When the browser is unable to play a video (because of unsupported format or codec), the onloadedmetadata event does not occur. I have some ...

What is the proper way to retrieve a constant variable within a return statement?

Here is the code I have written: const keyToDisplayMessage = 'REGULAR_HOME'; const cf = format( { accountName: this.accountName, }, this.pageData.sucessMessages.keyToDisplayMessage, this.$route.name ); return cf; The ...

Angular 2/4 - Saving User Object Information in the Front-End Instead of Repeatedly Contacting the Back-End Server

Is there a more efficient way to store and update the current user details in the frontend, without constantly making new HTTP GET requests to the backend every time a new component loads? The solution I came up with is a UserService class that handles se ...

Issue with parsing an empty array in a Discord bot built with Node.js

Within this API, there exists an empty array marked with a red underline. Sometimes it's void of content, but other times it contains data. My goal is to display Item Spells: there are no effects on this item. when the array is empty. However, instead ...

The hyperlink in the mobile version of the mega menu is unresponsive in HTML

I am encountering an issue with the navigation menu on my Laravel website. The menu links work correctly on the desktop version, but none of the anchor tag links are functioning properly on the mobile version. HTML <div class="menu-container"> < ...