Display content of an Array of Objects with Interpolation in Angular2 Typescript

Question

Application

A simple Search bar and a button where user enters a keyword and the response returned is from a RESTful server (HTTP GET requests)

simplesearch.ts

export class SimpleSearch {
    kw: string; // keyword
    resp: string; // response from Server
}

simplesearch.service.ts

Has a simple method called searchData which does a HTTP GET request with the user's keyword as a query search. (Code not included for brevity)

simplesearch.component.ts

/*All respective headers and @Component removed from brevity*/
const OUTPUT: SimpleSearch[] = []; // create an array for storing Objects

export class SimpleSearchComponent {
    Output = OUTPUT; // define variable for array
    constructor(private httpServ: SimpleSearchService, private temp: SimpleSearch) {}

/*Search button on HTML file does this*/
Search(inputVal: string) {
    this.temp.kw = inputVal; // store the value of user's input
    this.httpServ.searchData(inputVal)
          .then(res => this.temp.resp = res); // store the response in temp.resp

    // push the Object on the Output Array
    this.Output.push({kw: this.temp.kw, resp: this.temp.resp}); 
    }
}

Interpolation Variable

I use Output as an Interpolation Variable for my HTML template. I show the data in an unordered list

<ul>
     <li *ngFor="let keyword of Output">
         <span>{{keyword.kw}}</span>
     </li>
</ul>

 Response:
 <ul>
     <li *ngFor="let answer of Output">
        <span>{{answer.resp}}</span> <!-- WHAT TO DO HERE for Array Index-->
     </li>
 </ul>

Result

I can see the keywords in a list every time a user inputs new keywords but the responses in the wrong way

How do I pass Indexing with the Interpolation? Or am I thinking wrong?

The easy way out was to create two separate Array<String> for keywords and responses and this works great since I can use the index to delete the contents on the page too but with an Object in an Array I am confused with the key: value representation and the index of the Array (OUTPUT) itself.

Answer 1

The problem lies exactly where developer noticed, this.temp.resp is outside the async function. So when you are pushing items in your Output array, it's always pushing the previous search with the new keyword, therefore you are getting the behavior that the resp is always "one step behind". You can check this to understand this async behavior: How do I return the response from an Observable/http/async call in angular2?

So let's look at the code and explain what is happening. I assume you have initialized 'temp' since it isn't throwing an error on first search, where temp.resp would be undefined unless temp is initialized.

this.httpServ.searchData(inputVal)
  // this takes some time to execute, so the code below this is executed before 'this.temp.resp' has received a (new) value.
  .then(res => this.temp.resp = res);

// old value of 'temp.resp' will be pushed, or if it's a first search, empty value will be pushed
this.Output.push({kw: this.temp.kw, resp: this.temp.resp}); 

So how to solve this, would be to move the this.Output.push(... line inside the callback (then), so that the correct values will be pushed to the array.

Also I'd change your model to be an Interface instead of Class. But as to how to change the function and do the assignment inside the callback, I'd also shorten the code a bit and do:

Search(inputVal: string) {
  this.httpServ.searchData(inputVal)
    .then(res => {
       // we are pushing values inside callback now, so we have correct values! 
       // and 'SimpleSearch' stands for the interface
       this.Output.push(<SimpleSearch>{kw: inputVal, resp: res}); 
    });
  }
}

This should take care of it that the corresponding keyword will have the corresponding response! :)

PS. Worth noticing here, is that you'd maybe want to display the keyword while we are waiting for the response for that keyword, I ignored it here though and applied the same as you are currently using.