title: How To Convert Spring Boot Entity to Angular Object
body: <p>I'm trying to use Angular and Spring Boot to show a list of Rule objects. I am not using a JPA Repository to respond to the GET request, so I think I have to 'manually' convert my list of Rule objects on the Spring Boot side to a JSON so that <code>httpClient.get&lt;Rule[]&gt;()</code> can convert it to a list of Rule objects on the Angular side. However, this is currently not working, and my rule objects are not showing up on my webapp.</p>
  <p>I'm not using a repository because I'm querying the database on the Spring Boot side, and doing some business logic to only display rules that fall under a certain criteria, and adding some information about the rules that is not in the database.</p>
  <p>How do I correctly convert the list of rules to a JSON? Is this even the right approach?</p>
  <p>Thank you!</p>
  <p>Rule.java:</p>
  <pre><code>@Entity
  @Table(name = &quot;MSG_DOM&quot;) 
  public class Rule implements Serializable{
      private static final long serialVersionUID = 1L;
      private String fireType;
      private boolean multipleDrivers;
  
      @Id
      @Column(name = &quot;MSG_CD&quot;, unique = true, nullable = false)
          private String messageCode;
  
      @Column(name = &quot;MSG_TYP_CD&quot;, unique = false, nullable = false)
          private String messageTypeCode;
  
      @Column(name = &quot;BUS_RUL_CD&quot;, unique = false, nullable = false)
          private String busRuleCode;
  
      @Column(name = &quot;MSG_EXTR_USER_TXT&quot;, unique = false, nullable = false)
          private String externalMessageText;
  
      @Column(name = &quot;MSG_INTRL_USER_TXT&quot;, unique = false, nullable = false)
          private String internalMessageText;
  
      public Rule(){}
  
      public String getMessageCode(){
          return messageCode;
      }
      
      public void setMessageCode(String messageCode){
          this.messageCode = messageCode;
      }
  
      ...
  </code></pre>
  <p>RuleController.java:</p>
  <pre><code>@RestController
  @RequestMapping(&quot;/api/v1&quot;)
  public class RuleController {
  
      //get all rules
      @CrossOrigin(origins = &quot;http://localhost:4200&quot;)
      @RequestMapping(value = &quot;/rules&quot;, method = RequestMethod.GET, produces = {MediaType.APPLICATION_JSON_VALUE})
      @ResponseBody
      public Rule[] getAllRules() {
          RuleListService ruleListService = new RuleListService();
          List&lt;Rule&gt; ruleList = ruleListService.listRules();
          Rule[] rules = new Rule[ruleList.size()];
          for (int i = 0; i &lt; ruleList.size(); ++i) rules[i] = ruleList.get(i);
          return rules;
      }
  }
  </code></pre>
  <p>RuleListService.java:</p>
  <pre><code>public class RuleListService {
  
      ApplicationContext context =  new AnnotationConfigApplicationContext(BeanConfig.class);
      
      public List&lt;Rule&gt; listRules() {
          RuleList lister = context.getBean(RuleList.class);
          ArrayList&lt;HashMap&lt;String, Rule&gt;&gt; ruleMaps = lister.loadRuleMap();
          ArrayList&lt;Rule&gt; ruleList = new ArrayList&lt;Rule&gt;();
          for(HashMap&lt;String, Rule&gt; ruleMap: ruleMaps) { 
              ruleList.addAll(ruleMap.values());
          }
          return ruleList;
      }
  
  }
  </code></pre>
  <p>rule.ts:</p>
  <pre><code>export class Rule {
  
      constructor(
                  private _serialVersionUID : number,
                  private _fireType: string,
                  private _multipleDrivers: boolean,
                  private _messageCode: string,
                  private _messageTypeCode: string,
                  private _busRuleCode: string,
                  private _externalMessageText: string,
                  private _internalMessageText: string,) {
                  }
  
      getSerialVersionUID() : number {
          return this._serialVersionUID;
      }
  
      setSerialVersionUID(value: number) {
          this._serialVersionUID = value;
      }
  
      ...
  </code></pre>
  <p>rule.service.ts:</p>
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class RuleService {
    private baseUrl = &quot;http://localhost:8080/api/v1/rules&quot;
    
    constructor(private httpClient: HttpClient) {}
  
    getRuleList(): Observable&lt;Rule[]&gt; {
      return this.httpClient.get&lt;Rule[]&gt;(`${this.baseUrl}`).pipe(
          catchError(this.handleError)
      );
    }
  
    private handleError = (error: Response) =&gt; {
      if (error.status === 400) {
        return throwError(() =&gt; new Error(&quot;Bad Input&quot;));
      }
      if (error.status === 404) {
        return throwError(() =&gt; new Error(&quot;Not Found&quot;));
      }
  
      return throwError(() =&gt; new Error(&quot;App Error&quot;));
    }
  }
  </code></pre>
  <p>rule-list.component.ts:</p>
  <pre><code>export class RuleListComponent implements OnInit {
  
    rules: Rule[];
    ruleTest: Rule;
  
    constructor(private ruleService: RuleService) { }
  
    ngOnInit(): void {
      this.getRules();
    }
  
    private getRules() {
      this.ruleService.getRuleList().pipe(
          map((actions: Rule[]) =&gt;
            actions.map(action =&gt; { return action as Rule;} )
        )).subscribe(rules =&gt; this.rules = rules);
    }
  }
  </code></pre>
  <p>rule-list.component.html:</p>
  <pre><code>&lt;h2&gt; Rule List &lt;/h2&gt;
  &lt;table class = &quot;table table-striped&quot;&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt; MSG_CD &lt;/th&gt;
              &lt;th&gt; MSG_TYP_CD &lt;/th&gt;
              &lt;th&gt; BUS_RUL_CD &lt;/th&gt;
              &lt;th&gt; MSG_EXTR_USER_TXT &lt;/th&gt;
              &lt;th&gt; MSG_INTRL_USER_TXT &lt;/th&gt;
              &lt;th&gt; Fire Type &lt;/th&gt;
              &lt;th&gt; Multiple Drivers &lt;/th&gt; 
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr *ngFor = &quot;let rule of rules&quot; &gt;
              &lt;td&gt; {{rule.getMessageCode()}} &lt;/td&gt;
              &lt;td&gt; {{rule.getMessageTypeCode()}} &lt;/td&gt;
              &lt;td&gt; {{rule.getBusRuleCode()}} &lt;/td&gt;
              &lt;td&gt; {{rule.getExternalMessageText()}}&lt;/td&gt;
              &lt;td&gt; {{rule.getInternalMessageText()}} &lt;/td&gt;
              &lt;td&gt; {{rule.getFireType()}} &lt;/td&gt;
              &lt;td&gt; {{rule.getMultipleDrivers()}} &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p>UPDATE: I'm still not seeing the data in the table, and have gotten this error from the dev console on my browser:</p>
  <pre><code>ERROR TypeError: rule_r1.getMessageCode is not a function
      at RuleListComponent_tr_20_Template (rule-list.component.html:16:18)
  </code></pre>
  <p>I tried changing the variables to public in the Rule.ts constructor, and accessing the variables directly instead of calling get() methods like so, {{rule._messageCode}}, for all table fields, and while it (obviously) got rid of the error, I still did not see data in the table.</p>
  <p>The table has been populated with rows indicating there is actually a Rule[] being sent and received correctly, but there is no data in any row.</p>
  <p>I've also updated all included code, since many changes have been made.</p>
  <p><a href="https://i.stack.imgur.com/D2GiW.png" rel="nofollow noreferrer">Table Screenshot</a></p>