title: Angular : How to replace hard-coded object with real time api?
body: <p><strong>OLD Method</strong></p>
  
  <blockquote>
    <p>I'm new in angular. I have hard-coded object in component export class
    which i'm using for data binding. It's working fine there.now i need
    to replace same object with real time data.</p>
  </blockquote>
  
  <pre><code>newProduct: any = [
                    { product: "some1", checked: true },
                    { product: "some2", checked: false }
                    ]
  
   &lt;input id="checkbox" type="checkbox" value="{{newProduct[0].product}}" [(ngModel)]="newProduct[0].checked" [ngModelOptions]="{standalone: true}" (change)="productNotSelected()" checked /&gt;&lt;span&gt;{{newProduct[0].product}}&lt;/span&gt;
  
  </code></pre>
  
  <blockquote>
    <p>What i did up to now is i called API in NgOninit method and getting
    response properly. Here is the function which i'm calling on
    NgOninit.This gives me error like undefined checked after binding.</p>
  </blockquote>
  
  <pre><code>**API Response Object** 
  
  [{
  active: "Y"
  activeYn: "Y"
  category: "somehting"
  id: 1
  sortOrder: "1"
  subProducts:"[
    {
     active: "Y"
     backEndName: "some1"
     checked: "true"
     displayName: "some1"
     id: 100
     sortOrder: "1"
    }
  },
  {
  active: "Y"
  activeYn: "Y"
  category: "somehting"
  id: 1
  sortOrder: "1"
  subProducts:"[
    {
     active: "Y"
     backEndName: "some2"
     checked: "true"
     displayName: "some2"
     id: 200
     sortOrder: "1"
    }
  }
  ]
  
  listproduct()
      {
      // let checked;
      // let active;
      this.http.getData("findproduct").subscribe((d) =&gt; {
      let mydata = d;
      this.result = mydata;
      console.log("@@@@@@@@@",this.result);
      this.selProducts = this.result;
      console.log("@@@@@@@@@",this.selProducts);
      for(var i =0 ;i&lt;this.selProducts.length;i++){
      let p1 = this.selProducts[i].subProducts.filter(p =&gt; p.checked);
      // let p2 = p1.filter(p =&gt; p.checked == "false");
      let p2 = p1.filter(p =&gt; {
      if (p.checked) {
       this.checked = p.checked;
      var product = p.backEndName;
     this.active = p.active;
      this.newProduct.push({
      product: product,
      checked: (this.checked === 'true'),
      active :this.active
      });
      }
      });
      }
  
      },
      err =&gt; {
      this.result = err;
      });
      }
  </code></pre>
  
  <p>Can someone suggest me what is the best way to replace hard-coded object with real-time api?
  so that rest of the functionality shouldn't break.</p>