Net Core API: Assigning Array name and showing in Angular

Question

How can I assign an array name to an Api?

Example: This has an array name called posts: https://public-api.wordpress.com/rest/v1.1/sites/vocon-it.com/posts

"found":95,"posts":[{"ID":5551,"site_ID":97734730,"author":{"ID":5,"login":"oveits","email":false,"name":"oveits","first_name":"Oliver","last_name":"Veits","nice_name":"oveits","URL":"","avatar_URL":"https:\/\/secure.gravatar.com\/avatar\/1364548d67e195a45f4d31cd84a4c826?s=96&d=identicon&r=g","profile_URL":"http:\/\/en.gravatar.com\/1364548d67e195a45f4d31cd84a4c826"},"date":"2018-12-20T20:10:29+00:00","modified":"2018-12-20T20:10:29+00:00","title":"Kubernetes (5) Local Persistent Volumes &#8211; A Step-by-Step Tutorial","URL":"https:\/\/vocon-it.com\/2018\/12\/20\/kubernetes-local-persistent-volumes\/","short_URL":"https:\/\/wp.me\/p6C5gC-1rx","content":"<p>Kubernetes local volume

My code does not have an array name so does not work. I am trying to publish my array api to Angular CLI, using resource template below. The issue is I need an array name.

[{"sysTablesId":0,"name":"Product","createDate":"0001-01-01T00:00:00"},{"sysTablesId":0,"name":"book","createDate":"0001-01-01T00:00:00"},{"sysTablesId":0,"name":"customertransaction","createDate":"0001-01-01T00:00:00"},

Front End Angular API:

https://vocon-it.com/2017/06/24/consuming-a-restful-web-service-with-angular/

<h1>Table Data</h1>
<div *ngIf="undefined === restItems">Loading...</div>
<div *ngIf="undefined !== restItems">
  <ul>
    <li *ngFor="let post of restItems['sysTables']" [innerHTML]="post.name">
    </li>
  </ul>
</div>

  ngOnInit() {
    this.getRestItems();
  }
    // Read all REST Items
    getRestItems(): void {
      this.restItemsServiceGetRestItems()
        .subscribe(
          restItems => {
            this.restItems = restItems;
            console.log(this.restItems);
          }
        )
    }
      // Rest Items Service: Read all REST Items
  restItemsServiceGetRestItems() {
    return this.http
      .get<any[]>(this.restItemsUrl)
      .pipe(map(data => data));
  }
}

Back End API:

[Route("api/[controller]")]
[ApiController]
public class ValuesController : Controller
{
    private readonly ProductRepository productRepository;


    public ValuesController()
    {
        productRepository = new ProductRepository();
    }


    // GET api/values
    [HttpGet]
    public IEnumerable<SysTables> Get()
    {
        return productRepository.GetAll();
    }

Repository:

    public IEnumerable<SysTables> GetAll()
    {
        using (IDbConnection dbConnection = Connection)
        {
            dbConnection.Open();
            return dbConnection.Query<SysTables>("SELECT * FROM sys.tables");
        }
    }

    public class SysTables
    {

        public int SysTablesId { get; set; }
        public string Name { get; set; }
        public DateTime CreateDate { get; set; }
    }

The API works successfully in my VS code and Postman. Just calls a list of tables using Dapper in sql.

In Chrome it shows no results in html website, just an empty list, but at least showing its reading the API in F12 Console

Not working with this either yet,

<h1>Tables</h1>
<div *ngIf="undefined === restItems">Loading...</div>
<div *ngIf="undefined !== restItems">
  <ul>
    <li *ngFor="let post of list">
      {{post.name}}
    </li>
</ul>

<ul>
    <li *ngFor="let post of list" [innerHTML]="post.name">
    </li>
</ul>
</div>

Please give more details of the error/issue you are facing. If the object is of the same type (has same properties), then the return value should automatically be assigned to the restItem. — Sachin Gupta
– Sachin Gupta, Commented Dec 27, 2018 at 7:52
are you getting the list of object in the response? as shown in the console? — Prashant Pimpale
– Prashant Pimpale, Commented Dec 27, 2018 at 7:58
correct, I receive a list of objects in console, want to display it to html now, If I have an array name like in the website example, I know it will prob work vocon-it.com/2017/06/24/… — user10503656
– user10503656, Commented Dec 27, 2018 at 7:59

Prashant Pimpale · Accepted Answer · 2018-12-27 09:10:22Z

2

If I understand correctly:

Use *ngFor:

<h1>Table Data</h1>
<div *ngIf="undefined === restItems">Loading...</div>
<div *ngIf="undefined !== restItems">
  <ul>
    <li *ngFor="let post of restItems" [innerHTML]="post.name">
    </li>
  </ul>
</div>

WORKING DEMO

edited Dec 27, 2018 at 9:10

answered Dec 27, 2018 at 8:05

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

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

Collectives™ on Stack Overflow

Net Core API: Assigning Array name and showing in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related