title: Properties getting dropped from Object using Typescript and Angular
body: <p>I have a class called RandomValue and a class called WeatherForecast. The WeatherForecast class works correctly and data populates the table. The RandomValues class/interface seems to return a list of objects with no properties. So I get a table with the correct number of rows but no properties. I could really use some help with this</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  using Newtonsoft.Json.Linq;
  
  namespace WebApplication14.Models
  {
      public class RandomValue
      {
          public RandomValue RandomVal(JObject obj)
          {
              RandomValue val = new RandomValue();
              val.userId = Int32.Parse(obj.GetValue("userId").ToString());
              val.id =  Int32.Parse(obj.GetValue("id").ToString());
              val.title = obj.GetValue("title").ToString();
              val.completed = obj.GetValue("completed").ToString();
              return val;
          }
  
          Int32 userId { get; set; }
          Int32 id { get; set; }
          String title { get; set; }
          String completed { get; set; }
      }
  }
  
  </code></pre>
  
  <pre><code>using System;
  
  namespace WebApplication14
  {
      public class WeatherForecast
      {
          public DateTime Date { get; set; }
  
          public int TemperatureC { get; set; }
  
          public int TemperatureF =&gt; 32 + (int)(TemperatureC / 0.5556);
  
          public string Summary { get; set; }
      }
  }
  </code></pre>
  
  <p>here are their respective controllers: </p>
  
  <pre><code> public class RandomValuesController : ControllerBase
      {
          public RandomValuesController(ILogger&lt;RandomValuesController&gt; logger)
          {
              Logger = logger;
          }
  
          public ILogger&lt;RandomValuesController&gt; Logger { get; }
  
          [HttpGet]
          public IEnumerable&lt;RandomValue&gt; Get()
          {
              using var httpClient = new WebClient();
  
              Int32 NumberRows = new Random().Next(1, 10);
              List&lt;RandomValue&gt; Values = new List&lt;RandomValue&gt;();
  
              for (Int32 row = 0; row &lt; NumberRows; row++)
              {
                  Int32 randomRow = new Random().Next(1, 200);
                  JObject randomJSON = JObject.Parse(httpClient.DownloadString("https://jsonplaceholder.typicode.com/todos/" + randomRow));
  
                  RandomValue value = new RandomValue().RandomVal(randomJSON);
                  Values.Add(value);
              }
              RandomValue[] theValues = Values.ToArray();
              return theValues;
          }
      }
  </code></pre>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  using Microsoft.AspNetCore.Authorization;
  using Microsoft.AspNetCore.Mvc;
  using Microsoft.Extensions.Logging;
  
  namespace WebApplication14.Controllers
  {
      [Authorize]
      [ApiController]
      [Route("[controller]")]
      public class WeatherForecastController : ControllerBase
      {
          private static readonly string[] Summaries = new[]
          {
              "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
          };
  
          private readonly ILogger&lt;WeatherForecastController&gt; _logger;
  
          public WeatherForecastController(ILogger&lt;WeatherForecastController&gt; logger)
          {
              _logger = logger;
          }
  
          [HttpGet]
          public IEnumerable&lt;WeatherForecast&gt; Get()
          {
              var rng = new Random();
              var example =  Enumerable.Range(1, 5).Select(
              index =&gt; new WeatherForecast
              {
                  Date = DateTime.Now.AddDays(index),
                  TemperatureC = rng.Next(-20, 55),
                  Summary = Summaries[rng.Next(Summaries.Length)]
              })
              .ToArray();
              return example;
          }
      }
  }
  
  </code></pre>
  
  <p>both of the controllers return an array of the type in question and the models and controllers seem to work fine. </p>
  
  <p>Now here is my typescript file</p>
  
  <pre><code>import { Component, Inject } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Component({
    selector: 'app-fetch-data',
    templateUrl: './fetch-data.component.html'
  })
  
  
  export class FetchDataComponent {
    public forecasts: WeatherForecast[];
    public randomvalues: RandomValue[];
  
  
    constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
        http.get&lt;WeatherForecast[]&gt;(baseUrl + 'weatherforecast')
            .subscribe(result =&gt; { this.forecasts = result; }, error =&gt; console.error(error));
  
        http.get&lt;RandomValue[]&gt;(baseUrl + 'randomvalues')
            .subscribe(result =&gt; { this.randomvalues = result;  }, error =&gt; console.error(error));
  
    }
  }
  
  interface WeatherForecast {
    date: string;
    temperatureC: number;
    temperatureF: number;
    summary: string;
  }
  
  interface RandomValue {
      userId: number;
      id: number;
      title: string;
      completed: string;
  }
  </code></pre>
  
  <p>and here is my html file</p>
  
  <pre><code>&lt;h1 id="tableLabel"&gt;Weather forecast&lt;/h1&gt;
  
  &lt;p&gt;This component demonstrates fetching data from the server.&lt;/p&gt;
  
  &lt;p *ngIf="!forecasts"&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
  
  &lt;table class='table table-striped' aria-labelledby="tableLabel" *ngIf="forecasts"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Date&lt;/th&gt;
        &lt;th&gt;Temp. (C)&lt;/th&gt;
        &lt;th&gt;Temp. (F)&lt;/th&gt;
        &lt;th&gt;Summary&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor="let forecast of forecasts"&gt;
        &lt;td&gt;{{ forecast.date }}&lt;/td&gt;
        &lt;td&gt;{{ forecast.temperatureC }}&lt;/td&gt;
        &lt;td&gt;{{ forecast.temperatureF }}&lt;/td&gt;
        &lt;td&gt;{{ forecast.summary }}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;table class='table table-striped' aria-labelledby="tableLabel" *ngIf="randomvalues"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;UserId&lt;/th&gt;
        &lt;th&gt;Id&lt;/th&gt;
        &lt;th&gt;Title&lt;/th&gt;
        &lt;th&gt;Completed&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor="let value of randomvalues"&gt;
        &lt;td&gt;{{ value.userId }}&lt;/td&gt;
        &lt;td&gt;{{ value.id }}&lt;/td&gt;
        &lt;td&gt;{{ value.title }}&lt;/td&gt;
        &lt;td&gt;{{ value.completed }}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>WeatherForecasts is a list of Objects with the correct properties inside them
  RandomValues is a list of Objects but the Objects don't have any properties inside them</p>