Html Question posted in
Some basic documentation can be found here.

Html – Angular Observable keeps displaying an array instead of a string

The project is kindof a mess so I will attempt to be as simple as possible, but for context this is using angular, spring, and maven. I am fairly certain the only relevant part is angular, though.

I am attempting to make a call to display information from a resourcebundle and it works fine with several consol prints showing the string intact along the way, but it still displays as an array on the page when loaded (ex: displays as S,t,r,i,n,g instead of String)

heres the MessageController in java (the multithreading is part of the assignment, I dont believe it to be relevant, but included it for context):

public class MessageController {
    static ExecutorService messageExecutor = newFixedThreadPool(2);
    public static String myMessage = "";
    public static String myMessage1 = "";
    @RequestMapping(path = "/welcome")
    public String welcome(){
        Properties properties=new Properties();
        messageExecutor.execute(()->{
            try{
                InputStream stream = new ClassPathResource("welcome_en.properties").getInputStream();
                properties.load(stream);
                System.out.println(properties.getProperty("welcome"));
                myMessage = properties.getProperty("welcome");
            } catch (Exception e) {
                e.printStackTrace();
            }
        });
        messageExecutor.execute(()->{
            try{
                InputStream stream = new ClassPathResource("welcome_fr.properties").getInputStream();
                properties.load(stream);
                System.out.println(properties.getProperty("welcome"));
                myMessage1 = properties.getProperty("welcome");
            } catch (Exception e) {
                e.printStackTrace();
            }
        });

        String arrayMessage = myMessage+ ", " +myMessage1;
        System.out.println(arrayMessage);
        return arrayMessage;
    }
}

At this point everything prints to the console correctly, everything appears fine.

next, in the app.component.ts we have:

ngOnInit(){
      this.getWelcome().subscribe(
        welcome=>{
          this.welcome= <any>Object.values(welcome);
        }}

and getWelcome():

getWelcome(): Observable<any>{
      return this.httpClient.get(this.baseURL + '/welcome', {responseType: "text"});
    }

this is just set with:

welcome!:string;

and called in the html as:

{{welcome}}

using this, the webpage displays:
W,e,l,c,o,m,e,,, ,B,i,e,n,v,e,n,u,e

even though http://localhost:8080/welcome correctly displays:
Welcome, Bienvenue

how do I get this message to display properly?

Tags:

2

Answers


  1. 0

    I don’t know why you try to do:

    this.welcome= <any>Object.values(welcome);

    Can you try:

    ngOnInit(){
      this.getWelcome().subscribe(
        welcome=> {
          this.welcome = welcome;
        }}

    And you can add some pipe into like:

    // unsubcribeVar is a subject variable in class and do unsubcribe when component destroyed
this.getWelcome().pipe(takeUtil(this.unsubcribeVar)).subcribe((welcome)=>{
    this.welcome = welcome;
});
    Login or Signup to reply.
  2. 0

    When you subscribe to the getWelcome() Observable and cast it to object.values, you are treating it as an object which results in splitting the string into an array of characters.

    modify getWelcome() function to parse the response as plain text instead of trying to parse it as JSON

    Here’s how you can do it:

    ngOnInit() {
  this.getWelcome().subscribe(
    welcome => {
      this.welcome = welcome;
    }
  );
}

getWelcome(): Observable<string> {
  return this.httpClient.get(this.baseURL + '/welcome', { responseType: "text" });
}

    the welcome property will contain the plain text response from the server and it should display correctly in your HTML template

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search