Retrieving values from an array in a JSON response using Angular 4

How can I access the SubjectCode field in an array at a table using Angular 4? When trying to do so, I receive the error message: "[Error trying to diff '[object Object]'. Only arrays and iterables are allowed]".

Here is the Json Response:

{
  "$id": "1",
  "Council_ID": 88,
  "place": "bla bla",
  "number": "45",
  "type": 1,
  "date": "2017-11-08T00:00:00",
  "time": "04:51",
  "user_Id": 15,
  "subjects": [
     {
        "$id": "2",
        "subjectCode": "45",
        "type": 1,
        "faculty": "medicine",
        "branch": "اسكندرية",
        "gender": true
     }
 ],
  "absence": []
}

meeting.component.html:

<table class="table table-hover table-condensed text-center">
                            <tbody>
                                <tr *ngFor="let subject of subjectsWithID">
                                    <td > {{subject.subjects.subjectCode}} </td>
                                </tr>
                            </tbody>
                        </table>

meeting.component.ts:

this.dataStorageService.getCouncilId(this.meetingID).subscribe(response => {
                    this.subjectsWithID = response.json();
                    console.log(this.subjectsWithID, 'all Json Resopnse Here')
                });

Answer №1

It is recommended to utilize ngFor when iterating over subjects, the code snippet should look like this:

<div *ngFor="let subject of subjectsList">
   <p>{{subject.subjectName}}</p>
</div>

Answer №2

The categories attribute is a collection. To present it on screen, follow the code snippet below:

{{category.categories[0].categoryName}}

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

The implementation of local JSON instead of external JSONP in Angular

I am exploring the option of storing a json-file on the same server as my Angular app. I am wondering about how I can modify this code to read from a locally stored json file: ergastAPI.getDrivers = function() { return $http({ method: 'GET&apos ...

Out-of-order calling of React hooks detected

It's puzzling that the useMemo hook appears to be running before the useEffect hook directly above it. The reason for my suspicion is the error message I'm encountering: TypeError: Cannot read property 'timestamp' of undefined This ...

What is the best way to retrieve Express app configuration asynchronously?

I am utilizing an Express app developed with the Serverless Framework, which will be hosted via AWS API Gateway and AWS Lambda. The authentication process is handled by Okta, and I am considering storing the necessary secrets in SSM. Currently, I have to f ...

What is the proper way to configure QuoteName settings in Json.Net?

Initially, I am aware that the JSON format supplied is not valid. However, due to my customer web service configuration requirements, I am in need of setting QuoteName of Json.Net JsonTextWriter to false. Unfortunately, I am uncertain of the correct method ...

Obtain the dimensions of the outermost layer in a JSON file

Could you please help me extract the dimensions (600*600) of the outermost layer from the JSON below dynamically? { "path" : "shape\/", "info" : { "author" : "" }, "name" : "shape", "layers" : [ { ...

issues with initiating kubernetes service

I've been having trouble getting a service I added to Kubernetes to start up properly. After adding it with d2 swarm service add 'testservice/daemonset.yaml' and attempting to start it, I see the following output: d2 swarm service add &a ...

Accessing data from an API in an AngularJS dropdown menu

After retrieving JSON data from an API, I store it in $scope.industry. $scope.industry = []; $http.get('/industrygroup?languageid=1') .then(function (result) { $scope.industry = result.data; }); The JSON data st ...

Is there a way to display multiple images in a JSON message object?

If you're looking for a fun way to generate random dog images, then check out my DogAPI image generator! Simply enter a number between 1-50 into the form text box, hit send, and watch as it displays that amount of random dog photos. I'm almost t ...

Understanding the basics of Maven imports: troubleshooting class not found errors

After adding the following to my pom.xml: <dependency> <groupId>org.json</groupId> <artifactId>json</artifactId> <version>20170516</version> </dependency> The desired json classes, such as JSONArray, ...

Switch branches to projects without node_modules installed

Is there a better way to checkout a project that had node_modules in .gitignore? I have 2 computers and currently follow the following steps: Commit the project from computer 1 to GitHub Create a new angular project with the same name and folder structur ...

Enhancing the default functionality of React.FC within Next.js

Currently, I am working on a tutorial in Nextjs that employs the code snippet below in JavaScript. However, I am planning to transition it to TypeScript. Since I am relatively new to TypeScript, I have attempted various solutions from different sources but ...

I designed a dropdown menu with a searchable <mat-select> feature, where selecting an item is automatic when a space bar is pressed in the search box

Description : I have implemented a dropdown list using element that contains a list of items along with a search field. This allows users to easily search for specific items in the list instead of manually scrolling through a long dropdown menu. They can ...

What is the predefined value for a multi-select generated by the ng-for directive in Angular?

I am having trouble setting default selected values for the multi-select. Despite trying various methods such as initializing the ngModel to bind the variable and using [selected] = "selectedSegment == 'S1'", none of them seem to be effective fo ...

Import a large JSON file into either a MySQL or Oracle database

My team at work is responsible for supplying files to other services. These files typically range in size from 5MB to 500MB. We are considering using JSON instead of XML, but I am concerned about how our customers will be able to upload these files into th ...

Tips for including an element at the start while creating a map()

enum StatusEnum { accepted = "AC", rejected = "RJ", } const select = (Object.keys(StatusEnum) as Array<keyof typeof StatusEnum>).map((x) => ({ value: x, name: x + "_random", })) /** * Console.log(select) * [ ...

Looking for a solution to the TypeScript & Mantine issue of DateValue not being assignable?

The required project dependencies for this task are outlined below: "dependencies": { "@mantine/core": "^7.6.2", "@mantine/dates": "^7.6.2", "@mantine/form": "^7.6.2", &q ...

Troubleshooting Angular Prerendering: How Conditional JavaScript Usage Can Lead to 'document is not defined' Error

Currently, I am utilizing Angular 15 in an attempt to pre-render a website for SEO optimization. It has come to my understanding that certain elements such as document and window are unavailable during pre-rendering since the code does not operate within a ...

Analyzing bundle files with Angular CLI output

Currently, I am utilizing Angular CLI to develop a production app by using the --prod switch. The resulting bundle is generated in the dist directory. Is there a method to determine which classes and functions have been included in the final bundle after ...

Experimenting with Vuejs by testing a function that delivers a Promise upon the execution of the "Created" hook

In my Vuejs application, I have the following script written in Typescript: import { Foo, FooRepository } from "./foo"; import Vue from 'vue'; import Component from 'vue-class-component'; import { Promise } from "bluebird"; @Component ...

Learn how to use Angular2 or TypeScript to display 'unsubscribe' and 'subscribe' text on a toggle button

I'm working on a toggle button that initially displays the word subscribe on the thumb. When the toggle is disabled, I want it to show unsubscribe instead. Can someone please help me achieve this functionality? Here's the code snippet: <md-s ...