Unable to display list of elements using *ngFor in Angular + Spring Boot project

Question

Here is the html part:

<thead>
                <tr>
                    <th scope="col">Test ID</th>
                    <th scope="col">Test Name</th>
                    <th scope="col">Test Start Date</th>
                    <th scope="col">Test End Date</th>
                    <th scope="col">Test Duration (minutes)</th>
                    <th scope="col">Negative Markinh</th>
                    <th scope="col">Add Questions</th> 
                    <th scope="col">View Questions</th>
                    <th scope="col">No of Questions</th>
                    <th scope="col">Delete Test</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let test of tests">
                    <th>{{test.test_id}}</th>
                    <td>{{test.test_name}}</td>
                    <td>{{test.test_start_date | date:"dd/MM/yyyy"}}</td>
                    <td>{{test.test_end_date | date:"dd/MM/yyyy"}}</td>
                    <td>{{test.test_duration}}</td>
                    <td>{{test.negative_marking}}</td>
                    <td><button type="button" class="btn btn-success" (click)="addQuestions(test.test_id)"> Add Questions </button></td>
                    <td><button type="button" class="btn btn-info" (click)="viewQuestions(test.test_id)">View Questions</button></td>
                    <td>{{test.no_of_questions}}</td> 
                    <td><button type="button" class="btn btn-danger" (click)="deleteTest(test.test_id)">Delete</button></td>
                </tr>

            </tbody>

component.ts file

tests:any;
  
  questions:any;

  constructor(private service:TeacherPartService,
    private router:Router
    ) { }

  ngOnInit() {
    let response = this.service.viewTests();
    response.subscribe(data=>{
      console.log('data='+data+'\n');
      this.tests = data;
    });
    console.log('this.tests='+this.tests);

  }

service.ts file

public viewTests(){
    return this.http.get("http://localhost:8081/viewTests");
  }

the rest controller part

@GetMapping("/viewTests")
    public List<Test> viewAllTests(){
        System.out.println("viewTestss works");
        return (List<Test>)testRepo.viewTests();
    }

the query implementation part

package com.exam.dao;

import java.util.List;

import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;
import javax.persistence.Query;
import javax.transaction.Transactional;

import org.springframework.stereotype.Repository;

import com.exam.model.Test;

@Repository
public class TestRepository {
    @PersistenceContext
    private EntityManager entityManager;
    
    public List<Test> viewTests(){
        Query query = entityManager.createNativeQuery("select * from test");
        return (List<Test>)query.getResultList();
    }
}

It correctly gets the no of entries in the list but is unable to display the results.

When I used the inbuilt JPA repository it was working fine but when I switched to my custom queries as per the requirements it doesn't seem to work.

This is the API response

[[4,"second","2020-08-01","2020-09-04",0,120,true,1],[5,"newTest28080116","2020-08-28","2020-09-01",4,100,false,1],[6,"newTest28080118","2020-08-08","2020-09-01",0,300,true,1],[7,"SCI_2808","2020-08-29","2020-09-05",0,50,true,1],[8,"sampleTest","2020-08-28","2020-09-11",0,90,false,1]]

can you post the API response of this call 'localhost:8081/viewTests'? — Suhas Parameshwara
– Suhas Parameshwara, Commented Aug 28, 2020 at 12:46
Shouldn't the first tag under the tr be td instead of th? — GoWin
– GoWin, Commented Aug 28, 2020 at 12:52
@GovindSinghThakur that is to make the test id field appear bolder — Deviprasad Sharma
– Deviprasad Sharma, Commented Aug 28, 2020 at 12:54

Abrar Ansari · Accepted Answer · 2020-08-28 13:10:11Z

2

You are getting the response in an array and trying to iterate using keys, try to iterate using the index.

check sample here

answered Aug 28, 2020 at 13:10

Abrar Ansari

13710 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Deviprasad Sharma Over a year ago

works for now but i know by using this approach i will face some difficulties I will choose the correct ans which is best suitable thanks though for the answers :)

halfer · Accepted Answer · 2020-08-29 10:01:47Z

1

In your case, the result returns List<Object[]>:

entityManager.createNativeQuery("select * from test")
    .getResultList()

just add resultClass param to createNativeQuery():

entityManager.createNativeQuery("select * from test", Test.class)
    .getResultList()

that's why:

When I used the inbuilt JPA repository it was working fine but when I switched to my custom queries as per the requirements it doesn't seem to work

edited Aug 29, 2020 at 10:01

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Aug 28, 2020 at 13:12

tsarenkotxt

3,5295 gold badges25 silver badges39 bronze badges

Comments

Suhas Parameshwara · Accepted Answer · 2020-08-28 13:07:12Z

From the API response, I can say that the object is not a key-value pair and it's just nested string arrays. You need to change the object for the ngFor something like below.

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  testActualObject: Test[] = [];

  test = [[4,"second","2020-08-01","2020-09-04",0,120,true,1],[5,"newTest28080116","2020-08-28","2020-09-01",4,100,false,1],[6,"newTest28080118","2020-08-08","2020-09-01",0,300,true,1],[7,"SCI_2808","2020-08-29","2020-09-05",0,50,true,1],[8,"sampleTest","2020-08-28","2020-09-11",0,90,false,1]];

  ngOnInit(){
    console.log(this.test);
    this.test.forEach(test => {
     var testActualObj = new Test();
     testActualObj.test_id = test[0];
      testActualObj.test_name = test[1];
      this.testActualObject.push(testActualObj);
    });
  }


}

export class Test {
  test_id: any;
  test_name: any;
}

You can create a class called Test and you can manipulate your data and once it is done you can ngFor it to display the data.

app.component.html

<div *ngFor="let actualobj of testActualObject">
  ID: {{actualobj.test_id}} <br />
  testName: {{actualobj.test_name}}
</div>

Here is the Stackblitz link.

Hope this resolved your issue.

Hantsy · Accepted Answer · 2020-08-28 13:16:19Z

0

For the angular and Spring Boot application, check my sample, and read my doc.

answered Aug 28, 2020 at 13:16

Hantsy

9,61111 gold badges75 silver badges141 bronze badges

Collectives™ on Stack Overflow

Unable to display list of elements using *ngFor in Angular + Spring Boot project

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related