0

need help with my situation. I have 2 API's one is my and I can control it, another is a customer.

In my API - I send get request and receive json object:

    0: {id: 1, name: "10", mtm: "20E3, 20E4", biosVersion: "2.22", lBiosid: "DS104930"}
1: {id: 2, name: "10", mtm: "20C1,20C3", biosVersion: "1.47", lBiosid: "DS041804"}

Next step I need to take "lBiosid" and make it like a cont and after send a new HTTP get request to API2. HTTP request must look like: 

public  LenovoAPI = 'http://supportapi.lenovo.com/v2.5/Content?id=';
this.http.get(this.LenovoAPI + lBiosid, {params}).subscribe(data => this.lbios = data['Files']);

After must receive from API2 json:

{Title: "BIOS Update Utility"
Type: "EXE"
URL: "https://download.lenovo.com/pccbbs/mobiles/n1auj27w.exe"
Version: "2.23"}

I couldn't find how I can make it.

This is my files:

BIOS model bios.mode.ts:

export interface Bios {
    id: number;
    name: string;
    mtm: string;
    biosVersion: string;
    lBiosid: string;
}

My BIOS service bios.service.ts:

import { Injectable } from '@angular/core';
import { HttpParams, HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { Bios} from '../_model/bios.model';
import { OktaAuthService } from '@okta/okta-angular';


@Injectable({
  providedIn: 'root'
})
export class BiosService {




constructor(private http: HttpClient, private oktaAuth: OktaAuthService) { }



  // GET
  async getBios() {
    const accessToken = await this.oktaAuth.getAccessToken();
    const headers = new HttpHeaders({
      Authorization: 'Bearer ' + accessToken
    });
         return this.http.get<Bios[]>(this.API_URLTP, { headers: headers } ).toPromise();
    }



}

My component lenovo-bios.component.ts:

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

    import { OktaAuthService } from '@okta/okta-angular';
    import { Bios } from '../../_model/bios.model';
    import { HttpClient, HttpParams } from '@angular/common/http';
    import { BiosService } from 'src/app/_services/lbios.service';
    import { environment } from 'src/environments/environment';

    @Component({
      selector: 'app-lenovo-bios',
      templateUrl: './lenovo-bios.component.html',
      styleUrls: ['./lenovo-bios.component.scss'],



      providers: [BiosService],
    })
    export class LenovoBiosComponent implements OnInit {



      bios: Array<Bios>;
     public  LenovoAPI = 'http://supportapi.lenovo.com/v2.5/Content?id=';
      constructor(private httpl: BiosService, private oktaAuth: OktaAuthService, private http: HttpClient) {

       }

      ngOnInit() {

    this.loadBios();

     }





    // STUCK over here, doesn't know how pass lBiosid to new http get requests for the second API like a value 

      getLBios() {
        const params = new HttpParams().set('ClientID', 'ClientID');


        this.http.get(this.LenovoAPI + value, {params}).subscribe(data => this.lbios = data['Files']);
        this.http.get(this.LenovoAPI + value, {params}).subscribe(data => console.log(data['Files']));

      }
      // GET
      loadBios() {
         this.httpl.getBios()
         .then(
          (data: Bios[]) => {
            this.bios = data;
            console.log(data);

            }
            );


          }
    }

After all http get request must got all back to the table. my component html:

 <table class="table">
              <thead>
                  <tr>
                      <td>Id</td>
                      <td>name</td>
                      <td>mtm</td>
                      <td>biosVersion</td>
                      <td>bios id</td>
                      <td>Version</td>
                      <td>URL</td>
                  </tr>
              </thead>
              <tbody>
                  <tr *ngFor="let bios of bios">
                      <td>{{bios?.id}}</td>
                      <td>{{bios?.name}}</td>
                      <td>{{bios?.mtm}}</td>
                      <td>{{bios?.biosVersion}}</td>
                      <td  [(ngModel)]="bios.lBiosid"  />{{bios?.lBiosid}}</td>

                  <td *ngFor="let lbios of lbios">
                     {{lbios?.Version}}
                     {{lbios?.URL}}

                  </td>

                  </tr>

              </tbody>
          </table>

Thank you for help.

drago2life
  • 1
  • use pipe and mergeMap - see https://stackoverflow.com/questions/55416011/how-can-i-avoid-multiple-nested-subscriptions-using-rxjs-operators/55416704#55416704 – danday74 Apr 08 '19 at 13:30

3 Answers3

0

I would suggest to use rxjs API which allows combining multiple events in to single stream. What you have here is a requests which triggers an event when it's finished and to response to this event you want to trigger a new event. For this type of streams when in a response of one event you want to trigger another event or multiple events the best seems to be merge map operator.

import { Injectable } from '@angular/core';
import { HttpParams, HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Bios } from '../_model/bios.model';
import { OktaAuthService } from '@okta/okta-angular';


@Injectable({
  providedIn: 'root'
})
export class BiosService {
  
  constructor(private http: HttpClient, private oktaAuth: OktaAuthService) {
  }


  // GET
  getBios(): Observable<any> {
    const accessToken = await this.oktaAuth.getAccessToken();
    const headers = new HttpHeaders({
      Authorization: 'Bearer ' + accessToken
    });
    return this.http.get<Bios[]>(this.API_URLTP, {headers: headers});
  }
}

And next in your component you can combine them into one stream(although I personally think it should be a separate service):

import { HttpParams, HttpClient, HttpHeaders } from '@angular/common/http';
import { forkJoin, of } from 'rxjs';
import { map, mergeMap } from 'rxjs/operators';
import { Bios } from '../_model/bios.model';
import { OktaAuthService } from '@okta/okta-angular';
import { BiosService } from 'src/app/_services/lbios.service';
import { environment } from 'src/environments/environment';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-lenovo-bios',
  templateUrl: './lenovo-bios.component.html',
  styleUrls: ['./lenovo-bios.component.scss'],


  providers: [BiosService],
})
export class LenovoBiosComponent implements OnInit, OnDestroy {


  bios: Array<Bios>;
  public LenovoAPI = 'http://supportapi.lenovo.com/v2.5/Content?id=';

  private subscription = Subscription.EMPTY;

  constructor(private httpl: BiosService, private oktaAuth: OktaAuthService, private http: HttpClient) {

  }

  ngOnInit() {
    this.subscription = this.loadBios().subscribe(value => console.log(value);
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  getLBios(lBiosId: string) {
    const params = new HttpParams().set('ClientID', 'ClientID');
    return this.http.get(this.LenovoAPI + lBiosId, {params}).pipe(map(value => { value.lBiosId = lBiosId; return value;}));
  }

  // GET
  loadBios() {
    return this.httpl.getBios().pipe(mergeMap((values: any[]) => {
        // the first element of request array will be observable
        // with result from 1st API, so this can be reused
        // later when we got all the data from second API
        const requests = [of(values)];
        for (const bios of values) {
          requests.push(this.getLBios(bios.lBiosid));
        }
        return forkJoin(requests);
      }),
      map((value: any[]) => {
        // we have all the data we need to produce a result that
        // we want, 
        const bios: Bios[] = <Bios[]>value[0];
        const biosData = [].concat(...value.slice(1));
        // here you need to iterate over bios collection
        // and find a corresponding biosData using lBiosId
        // it's just a pseudo code
        for(const b of bios) {
           const data = biosData.find(value => value.lBiosId===b.lBiosId);
           b.Files = data.Files;
        }
        return bios;
      }));
  }
}

I would strongly suggest to put all this logic in a separate service.

Dariusz Ostolski
  • 462
  • 3
  • 10
  • Hi Dariusz, thank you for your answer. Now I know which way to look. I try your code and receive some JSON data, but just only from the second API. I include JSON code. – drago2life Apr 09 '19 at 06:28
0

My Full JSON from second API.

 "ID": "DS104930",
    "Type": "Driver",
    "Released": "2019-04-01T07:10:00Z",
    "Updated": "2019-04-08T05:58:44Z",
    "OperatingSystems": [
        "Windows 10 (64-bit)",
        "Windows 8.1 (64-bit)"
    ],
    "Categories": [
        "BIOS/UEFI"
    ],
    "Title": "BIOS Update Utility for Windows 10 (64-bit), 8.1 (64-bit) - ThinkPad 10 (Type 20E3, 20E4)",
    "Summary": "This package updates the UEFI BIOS stored in the ThinkPad computer to fix problems, add new functions, or expand functions",
    "Body": "<p>This package updates the UEFI BIOS stored in the ThinkPad computer to fix problems, add new functions, or expand functions.</p>\n\n<h3>Supported Systems</h3>\n\n<ul>\n\t<li>ThinkPad 10 (Type 20E3, 20E4)</li>\n</ul>\n\n<h3>Supported Operating Systems</h3>\n\n<ul>\n\t<li>Microsoft Windows 10 64-bit</li>\n\t<li>Microsoft Windows 8.1 64-bit</li>\n</ul>\n\n<h3>Additional Information</h3>\n\n<p>Please refer to the README file for the following:</p>\n\n<ul>\n\t<li>Installation Instructions</li>\n\t<li>Determining Which Version is Installed</li>\n\t<li>Complete list of summary of changes</li>\n\t<li>Known limitations (if any)</li>\n</ul>\n\n<table width=\"100%\">\n\t<tbody>\n\t\t<tr>\n\t\t\t<th>Package</th>\n\t\t\t<th>BIOS</th>\n\t\t\t<th>ECP</th>\n\t\t\t<th>Release</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>2.23</td>\n\t\t\t<td>2.23 (N1AETC3W)</td>\n\t\t\t<td>2.23 (N1AHTC3W)</td>\n\t\t\t<td>Current release</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>2.22</td>\n\t\t\t<td>2.22 (N1AETC2W)</td>\n\t\t\t<td>2.22 (N1AHTC2W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj26w.exe\">n1auj26w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj26w.txt\">n1auj26w.txt</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>2.21</td>\n\t\t\t<td>2.21 (N1AETC1W)</td>\n\t\t\t<td>2.21 (N1AHTC1W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj25w.exe\">n1auj25w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj25w.txt\">n1auj25w.txt</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>2.19</td>\n\t\t\t<td>2.19 (N1AETB9W)</td>\n\t\t\t<td>2.19 (N1AHTB9W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj24w.exe\">n1auj24w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj24w.txt\">n1auj24w.txt</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>2.18</td>\n\t\t\t<td>2.18 (N1AETB8W)</td>\n\t\t\t<td>2.18 (N1AHTB8W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj23w.exe\">n1auj23w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj23w.txt\">n1auj23w.txt</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>2.17</td>\n\t\t\t<td>2.17 (N1AETB7W)</td>\n\t\t\t<td>2.17 (N1AHTB7W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj22w.exe\">n1auj22w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj22w.txt\">n1auj22w.txt</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>2.16</td>\n\t\t\t<td>2.16 (N1AETB6W)</td>\n\t\t\t<td>2.16 (N1AHTB6W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj21w.exe\">n1auj21w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj21w.txt\">n1auj21w.txt</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>2.14</td>\n\t\t\t<td>2.13 (N1AETB4W)</td>\n\t\t\t<td>2.14 (N1AHTB4W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj20w.exe\">n1auj20w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj20w.txt\">n1auj20w.txt</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>2.13</td>\n\t\t\t<td>2.13 (N1AETB3W)</td>\n\t\t\t<td>2.13 (N1AHTB3W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj19w.exe\">n1auj19w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj19w.txt\">n1auj19w.txt</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>2.12</td>\n\t\t\t<td>2.12(N1AETB2W)</td>\n\t\t\t<td>2.12(N1AHTB2W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj18w.exe\">n1auj18w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj18w.txt\">n1auj18w.txt</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>2.10</td>\n\t\t\t<td>2.10(N1AETB0W)</td>\n\t\t\t<td>2.10(N1AHTB0W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj17w.exe\">n1auj17w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj17w.txt\">n1auj17w.txt</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>2.08</td>\n\t\t\t<td>2.08(N1AETA8W)</td>\n\t\t\t<td>2.08(N1AHTA8W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj16w.exe\">n1auj16w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj16w.txt\">n1auj16w.txt</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>2.03</td>\n\t\t\t<td>2.03(N1AETA3W)</td>\n\t\t\t<td>2.03(N1AHTA3W)</td>\n\t\t\t<td>Not released to the web</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>1.97</td>\n\t\t\t<td>1.97(N1AET97W)</td>\n\t\t\t<td>1.97(N1AHT97W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj14w.exe\">n1auj14w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj14w.txt\">n1auj14w.txt</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>1.96</td>\n\t\t\t<td>1.96(N1AET96W)</td>\n\t\t\t<td>1.96(N1AHT96W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj13w.exe\">n1auj13w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj13w.txt\">n1auj13w.txt</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>1.95</td>\n\t\t\t<td>1.95(N1AET95W)</td>\n\t\t\t<td>1.95(N1AHT95W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj12w.exe\">n1auj12w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj12w.txt\">n1auj12w.txt</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>1.83</td>\n\t\t\t<td>1.81(N1AET83W)</td>\n\t\t\t<td>1.83(N1AHT83W)</td>\n\t\t\t<td>Not released to the web</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>1.81</td>\n\t\t\t<td>1.81(N1AET81W)</td>\n\t\t\t<td>1.81(N1AHT81W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj06w.exe\">n1auj06w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj06w.txt\">n1auj06w.txt</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>1.80</td>\n\t\t\t<td>1.80(N1AET80W)</td>\n\t\t\t<td>1.80(N1AHT80W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj05w.exe\">n1auj05w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj05w.txt\">n1auj05w.txt</a></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>1.64</td>\n\t\t\t<td>1.64(N1AET64W)</td>\n\t\t\t<td>1.64(N1AHT64W)</td>\n\t\t\t<td><a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj03w.exe\">n1auj03w.exe</a><br />\n\t\t\t<a href=\"https://download.lenovo.com/pccbbs/mobiles/n1auj03w.txt\">n1auj03w.txt</a></td>\n\t\t</tr>\n\t</tbody>\n</table>\n<div id=\"divauto-tranmt\" data-mt=\"0\"  style=\"display:none; \"></div>",
    "Files": [
        {
            "Title": "README",
            "Version": "2.23",
            "Size": "17 KB",
            "Priority": "Recommended",
            "Type": "TXT README",
            "OperatingSystems": [
                "Windows 10 (64-bit)",
                "Windows 8.1 (64-bit)"
            ],
            "URL": "https://download.lenovo.com/pccbbs/mobiles/n1auj27w.txt",
            "MD5": "2046cd690e255ce02827e3e825f9f921",
            "SHA1": "d856d01ea4b7326e97ebd057c27c83908ebe8b12",
            "SHA256": "a5d4cd69bd858294bd4a3eca0891b228aef5ad9123bfa32004fa4569b49ff7b6"
        },
        {
            "Title": "BIOS Update Utility",
            "Version": "2.23",
            "Size": "4.8 MB",
            "Priority": "Recommended",
            "Type": "EXE",
            "OperatingSystems": [
                "Windows 10 (64-bit)",
                "Windows 8.1 (64-bit)"
            ],
            "URL": "https://download.lenovo.com/pccbbs/mobiles/n1auj27w.exe",
            "MD5": "f84f897dde04a3e7cf4ed68f38635700",
            "SHA1": "f3326e7dfe666cc65bdf3d3342cb2a34a816ab0d",
            "SHA256": "0ef73faf2250f78a202786b7606f2742f77029ecae9119543f5e4b434eff4721"
        }
    ]

From this JSON I need to use just :

"Files": [
        {

            "Version": "2.23",
            "Type": "EXE",
            "URL": "https://download.lenovo.com/pccbbs/mobiles/n1auj27w.exe",

        },

My API JSON looks like this:

{id: 1, name: "10", mtm: "20E3, 20E4", biosVersion: "2.22", lBiosid: "DS104930"}

When I run Dariusz code just receive full second API JSON:

0: {ID: "DS104930", Type: "Driver", Released: "2019-04-01T07:10:00Z", Updated: "2019-04-08T05:58:44Z", OperatingSystems: Array(2), …}
1: {ID: "DS041804", Type: "Driver", Released: "2019-03-28T00:00:00Z", Updated: "2019-04-03T02:55:55Z", OperatingSystems: Array(2), …}
2: {ID: "DS041534", Type: "Driver", Released: "2019-03-20T00:00:00Z", Updated: "2019-04-03T03:06:13Z", OperatingSystems: Array(2), …}
3: {ID: "DS041529", Type: "Driver", Released: "2018-12-11T16:53:00Z", Updated: "2018-12-17T03:16:24Z", OperatingSystems: Array(3), …}
4: {ID: "DS112170", Type: "Driver", Released: "2019-02-01T05:04:00Z", Updated: "2019-04-04T06:28:25Z", OperatingSystems: Array(3), …}

I need to receive something like this: 

{
        "id": 1,
        "name": "10",
        "mtm": "20E3, 20E4",
        "biosVersion": "2.22",
        "lBiosid": "DS104930",
        "Files": [
        {

            "Version": "2.23",
            "Type": "EXE",
            "URL": "https://download.lenovo.com/pccbbs/mobiles/n1auj27w.exe",

        },
    },
    {
        "id": 2,
        "name": "10",
        "mtm": "20C1,20C3",
        "biosVersion": "1.47",
        "lBiosid": "DS041804",
        "Files": [
        {

            "Version": "x.xx",
            "Type": "EXE",
            "URL": "https://download.lenovo.com/pccbbs/mobiles/xxxxxx.exe",

        },
    },
    {
        "id": 3,
        "name": "10 x 32",
        "mtm": "20C1,20C3",
        "biosVersion": "1.84",
        "lBiosid": "DS041534",
        "Files": [
        {

            "Version": "x.xx",
            "Type": "EXE",
            "URL": "https://download.lenovo.com/pccbbs/mobiles/xxxxxx.exe",

        },
    },
    {
        "id": 4,
        "name": "11e",
        "mtm": "20D9,20DA",
        "biosVersion": "1.35",
        "lBiosid": "DS041529","Files": [
        {

            "Version": "x.xx",
            "Type": "EXE",
            "URL": "https://download.lenovo.com/pccbbs/mobiles/xxxxxx.exe",

        },
    },
    {
        "id": 5,
        "name": "11e  3rd Gen, Yoga 11e 3rd Gen ",
        "mtm": "20G9,20GB, 20G8, 20GA",
        "biosVersion": "1.20/1.24",
        "lBiosid": "DS112170",
        "Files": [
        {

            "Version": "x.xx",
            "Type": "EXE",
            "URL": "https://download.lenovo.com/pccbbs/mobiles/xxxxxx.exe",

        },

Thank you for help.

drago2life
  • 1
  • Hi Dariusz, I try it and got some errors in code. ERROR in src/app/test/lenovo-bios/lenovo-bios.component.ts(58,86): error TS2339: Property 'lBiosid' does not exist on type 'Object'. src/app/test/lenovo-bios/lenovo-bios.component.ts(69,25): error TS2345: Argument of type 'Observable' is not assignable to parameter of type 'Observable'. Type 'string' is not assignable to type 'any[]'. I add in my Bios model this: export interface Bios { id: number; name: string; mtm: string; biosVersion: string; lBiosid: string; Files: [any]; } – drago2life Apr 09 '19 at 09:00
  • Hi, I've added missing return statement to a map, if typescript compiler still complains about types mismatch, I would first try to remove type information and see if it works. It's difficult to fix compilation errors without smallest possible repro. Maybe working jsfiddle could help (with mocked requests, you can produce observables using of operator). – Dariusz Ostolski Apr 09 '19 at 09:23
  • Hi Dariusz. Thank you for help. Almost finished what I want. Just founded a mistake. I think this happens because not explain exactly what I want. A mistake was here: `for(const b of bios) { const data = biosData.find(value => value.lBiosId===b.lBiosId); b.Files = data.Files; } ` Just change `value.lBiosId to value.ID` and start worl. now have issue to dispaly all data. If using `

    {{item.id}}

    ` it's not show anyting and no errors. I missing sometings?     – drago2life Apr 10 '19 at 07:13
  • Hi Dariusz. Maybe you could help and with this. I subscribe and show data in the template. All data From my API I can see. have a problem. how I can show data from API2. JSON: `{ id: 1, name: "10", mtm: "20E3, 20E4", biosVersion: "2.22", lBiosid: "DS104930", Files { Version: "2.23", Type: "EXE", URL:"some link"} } }` How I understand I need to make an interface, but could found correct syntax: My interface: `export interface Bios2 {id: number;name: string; mtm: string; biosVersion: string; lBiosid: string; Files: {URL: string; Type: string; Version: string; }; }` all part till `FIles` OK – drago2life Apr 10 '19 at 08:04
  • Hi Drago, I'll prepare a plunker or stackblitz in the evening today. Mocking your requests. – Dariusz Ostolski Apr 10 '19 at 08:14
  • Hi Just forgot to mantion that `Files` come in Array: `Files { {Title: "README", Version: "2.23", Type: "TXT", URL:"some link"} {Title: "BIOS install", Version: "2.23", Type: "EXE", URL:"some link"} }` – drago2life Apr 10 '19 at 08:59
0

still have a problem to display data from API2. I have models: bios.model.ts:

    import { LBios } from './lbios.model.';
    export class Bios  {
    id: number;
    name: string;
    mtm: string;
    biosVersion: string;
    lBiosid: string;
    Files: LBios[];
}

and lbios.model.ts:

export class LBios  {
Title: string;
Version: string;
URL: string;
Type: string;

}

And my html file have code:

<div *ngFor="let bios of bios ">
  {{bios.id}} <br>
  {{bios.name}}<br>
  {{bios.mtm}}<br>
  {{bios.biosVersion}}<br>
  {{bios.lBiosid}}<br>
  {{bios.Files}}<br>
</div>

And after rending I have this:

    1 
10
20E3, 20E4
2.22
DS104930
[object Object],[object Object]

2 
10
20C1,20C3
1.47
DS041804
[object Object],[object Object]

3 
10 x 32
20C1,20C3
1.84
DS041534
[object Object],[object Object]

4 
11e
20D9,20DA
1.35
DS041529
[object Object],[object Object]

5 
11e 3rd Gen, Yoga 11e 3rd Gen 
20G9,20GB, 20G8, 20GA
1.20/1.24
DS112170
[object Object],[object Object]

How I need to implement my model that I have some data instead [object Object],[object Object]

Thank you for help

drago2life
  • 1