Dispaly image and text together in single GET restful call on web browser using spring boot and Angular 4

Question

Iam able to achieve displaying of image(.jpg file) and text(.txt file) on browser by using simple GET services. But I have used 2 services for this for image and text respectively.

How can I display image and text together on any web browser in single GET call?

Iam using Spring Boot, Angular 4 and MySql

Answer 1

Thanks Nickolaus for providing solution based on Angular 4 perspective. As I have java background I was looking for handling this scenario using java perspective.

What I have done is I have created a Response Pojo(ResponseData.java) which will contain the result of both text + image scenario and made a rest GET call as below:

      @RequestMapping(value = "/get-both", method = RequestMethod.GET)
public ResponseData[]  getbothData() throws IOException {


    ResponseData respDataObj = new ResponseData() ;

    // handling text data : convert byte to string
    byte[] rbaText = transitionService.getTextData();
    String s = new String(rbaText);

    respDataObj.setContents(s);


    // for image we want path only
    String imageUrlObj = transitionService.getImageURL();
    respDataObj.setImages(imageUrlObj);
    ResponseData[] respDataArr= {respDataObj};

    return respDataArr;

}

So Now below mentioned steps happen:

1] Reading of text file from a particular location and capturing its contents in byte form and putting it in response array

2] Reading path of an image , getting the image in byte form and put in response array

3] Return this array to browser by calling " http://localhost:8080/..../get-both " (we are using Spring Rest and Spring Boot here), here in browser we get json response like this :

      [{"images":"http://....../test.jpg","contents":"This is a test document"}]

4] on Angular 4 :(starting server on default 4200)

4.1]in services.ts :

getUpdates() {
return this.http.get
  ('http://localhost:8080/..../get-both').pipe(
    map(res => res.json()));

}

4.2]in app.component.ts :

    this.dataservice.getUpdates().subscribe((postServices) => {
    this.postServices = postServices;
});

4.3]in component.html : display array using ngFor

 <div *ngFor="let post of postServices">
<div class="card">
  <div class="item">
    <h4>
      <div>{{post.contents}}</div>
    </h4>
  </div>
  <div class="item">
    <img width="300" alt="imageTest" src="http://..../test.jpg">
  </div>
</div> 

Now we will be able display text which is read from a text file and just below that image which we want from a particular url.

Answer 2

I think you question is formulated badly, if I understand you correctly you want the results of both http-calls the text and the image result in at the same time. This is totally possible with Angular using rxjs with the operator combineLatest :

combineLatest(observableOfImageCall$, observableOfTextcall$)
  .subscribe([image, text]) {
      this.image = image;
      this.text = text;
  }