Organize the JSON data in order to display it in a table row

I am trying to arrange the data from a JSON in a table with the following structure displayed in a single row. Can someone assist me in looping through the JSON to rearrange the items as specified below?

StudentId | CourseTitle | TextbookName

23 | Biology | Biology Today

JSON Data Format:

{
    "studentId": 23,
    "course": [{
        "courseTitle": "Biology",
        "textBook": 1,
        "TextBooks": {
            "textbookId": 1,
            "textbookName": "Biology Today"
        }
    }, ... ]
}

Sample Code:

<table class="table">
     <tbody>
         <tr *ngFor="let student of this.listOfStudents">
             <td >{{student ?.studentId}}</td>                                   
         </tr>
    </tbody>
</table>
jsonangulartypescript

Answer №1

Here's a possible solution:

<table class="table">
  <tbody>
    <ng-container *ngFor="let student of this.listOfStudents">
        <tr *ngFor="let course of student.course">
            <td>{{ student.studentId }} | {{ course.courseTitle }} | {{ course.TextBooks.textbookName }}</td>                                   
        </tr>
    </ng-container>
 </tbody>
</table>

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

Issue with refreshing causing Firebase Hosting (utilizing Angular 8 and Service Worker) to not update

I am the owner of quackr.io and I am encountering an issue where users are not seeing the updated version of my code. Quackr is a Progressive Web App (PWA) built with Angular SSR and Service worker, deployed on Firebase hosting. Every time I deploy a new ...

angularfirebaseservice-workerfirebase-hostingangular-universal

What is the best approach for replacing numerous maps within an rxjs observable array?

Is there a more efficient way to retrieve only 3 items from an array? If you have any suggestions, I would appreciate it! Thank you. loadAsk!: Observable<any[]>; this.loadAsk.pipe( map(arr => arr.sort(() => Math.random() - .5)), map((item ...

typescriptrxjs

What could be causing my mdx files to not display basic markdown elements such as lists and headings? (Next.js, mdx-bundler)

Trying to implement Kent C Dodds mdx-bundler with the Next.js typescript blog starter example is proving challenging. While it successfully renders JSX and certain markdown elements, basic markdown syntax like lists and paragraph spacing seem to be malfunc ...

reactjstypescriptnext.jsmarkdown

Is there a method to modify the cell and date color with a click action in fullcalendar using Angular?

I am looking for a way to change the color of a cell and its corresponding date simultaneously when clicking on it in the fullcalendar. So far, I have been able to change the cell background color using .fc-highlight in the style.css file. However, I am ...

angularfullcalendar

Angular form checkbox has been interacted with

I have a form where the save button remains disabled until the form is interacted with. All the input fields trigger this behavior except for a checkbox. No matter how many times I click or change the checkbox, the form always registers as untouched. Is th ...

angularforms

Getting the value of a specific key in angularfire2 - a simple guide

The task at hand involves retrieving a specific value labeled as UID from the database structure below. this.af.database.object('/profile/' + this.uid).subscribe(profile => { console.log(profile); this.uid = profile.uid; console.log(th ...

angularfirebasefirebase-realtime-databaseangularfire2

Step-by-step guide on implementing virtual scroll feature with ngFor Directive in Ionic 2

I am working on a project where I need to repeat a card multiple times using ngFor. Since the number of cards will vary each time the page loads, I want to use virtual scrolling to handle any potential overflow. However, I have been struggling to get it ...

javascriptangulartypescriptionic2

Styling an Angular2 Component with a jQueryUI element

My goal is to integrate a jQueryUI range slider into an Angular2 Component. doubleRange.ts: /// <reference path="../../../../../typings/jquery/jquery.d.ts" /> /// <reference path="../../../../../typings/jqueryui/jqueryui.d.ts" /> import { Com ...

jquerycssjquery-uiangular

Unpredictable Results with JSON Data

Can anyone shed some light on why all my JSON data is showing up as Undefined? Here is the JSON snippet in question: {"273746":[{"name":"Darius's Wizards","tier":"GOLD","queue":"RANKED_SOLO_5x5","entries":[{"playerOrTeamId":"273746","playerOrTeamName ...

javascriptjson

Encountering a problem while deserializing a JSON response from Stripe

My attempt to deserialize the Stripe JSON response is mostly successful, but I encountered an error in some cases: Cannot convert null to a value type. Even though there seems to be a type present at the end. Here is the response: { "id": "evt_1Dez ...

c#jsonjson-deserialization

What is the best way to retrieve a specific children element from a JSON object in JavaScript based on a keyname and value match

Recently, I encountered a JSON data structure that looked like this: var jsonData = { "id": 0, "content": "abc", "children" : [{ "id": 1, "content": "efg", "children" : [] } { "id": 2, "c ...

javascriptjsonhashtable

Exploring Sensor Information with Vis.js

In my work with Wireless Sensor Networks, I have been collecting sensor addresses and their corresponding temperature readings in JSON format. The data looks like this: {"eui":"c10c00000000007b","count":0"tmp102":" 0.0000 C"} When it comes to the network ...

javascriptjsoncoapvis.js

What is the proper method for transferring a JWT token to an external URL?

I currently have two REST endpoints set up: accounts.mydomain.com/login - This is an identity provider that sends a JWT token as a response once a user is authenticated with their username and password. api.mydomain.com/users - This endpoint accepts the ...

angularjwthttp-redirect

What is the correct method for using typedef to define a function with the signature "() => void" in accordance with tslint guidelines?

Currently, I am working on a function that requires specific typing: const checkIfTagNeedsToBeCounted = (listOfTags: string[]): boolean => { const tagsToExcludeFromCounting: string[] = [ "DoNotCount", ]; const excludedTagFound: boolean = lis ...

typescripttypescript-typingstslint

Embarking on your ABLY journey!

Incorporating https://github.com/ably/ably-js into my project allowed me to utilize typescript effectively. Presently, my code updates the currentBid information in the mongodb document alongside the respective auctionId. The goal is to link the auctionId ...

angulartypescriptably-realtime

Bespoke animated angular material tabs

Having an issue with Angular Material tabs. I have managed to remove the "slide" effect, but I can't figure out how to modify or remove the black effect behind my tab. Can anyone offer some assistance? black effect 1 black effect 2 Here is a snippe ...

cssangularangular-material

Retrieve the X,Y coordinates from a list in an HTML document

When a user inputs text to search for an element in a list, I want the page to scroll to that specific element. However, I am having trouble obtaining the X,Y position of the element in the list. Here is my code: <input type="text" (change)= ...

angulartypescriptarraylistscroll

Managing JSON data with tab fragments on android devices

I am a beginner in the world of Android development and I am currently working on accessing JSON data for my project. The app consists of two tabs within a viewpager - the first tab displays information about events while the second tab contains a custom l ...

androidjsonandroid-fragments

Adding fresh information to an already existing JSON document

After extensive searching and countless attempts to find a solution, I have come up empty-handed. I've been struggling for weeks to implement my own fix, but nothing seems to work. Any help would be greatly appreciated! I have a file named (file.jso ...

c#.netjsonmicrosoft-metro

Obtain data from an external XML source using jQuery

Hey there! I'm looking to scrape/parse some information from an external XML file hosted on a different domain and display it on my website. I attempted the following but unfortunately, it didn't work as expected: jQuery(document).ready(functio ...

javascriptjqueryjsonxmlxml-parsing