How to display several messages on screen with Watson Conversation

问题

I'm working on a chatbot with Watson technology and more precisely with conversation service. It's my first application on Bluemix and with javascript and i have an issue with the display message of my chatbot. I explain: currently I have this code :

var text = response.output.text[0]; // only display first value

And my function displayMessage

function displayMessage(text, user) {

        var chat = document.getElementById('chatBox');
        var bubble = document.createElement('div');
        bubble.className = 'message';  // Wrap the text first in a message class for common formatting

        // Set chat bubble color and position based on the user parameter
        if (user === watson) {
            bubble.innerHTML = "<div class='bot'>" + text + "</div>";
        } else {
            bubble.innerHTML = "<div class='user'>" + text + "</div>";
        }

        chat.appendChild(bubble);
        chat.scrollTop = chat.scrollHeight;  // Move chat down to the last message displayed
        document.getElementById('chatMessage').focus();

        return null;
}

The problem currently is that the function only displays my first value, but in some cases I have to display n message (n is always < 10) So I think about the creation of an array[10] to store my message with while (array[i] != undefined). But my error is with the display in the function displayMessage - I don't know how display several messages. I tried this:

bubble.innerHTML = "<div class='bot'>" + tab[tmp] + "</div>";

and a loop while same as in my declaration but it didn't work.

Someone could help me?

Thank you

Edit n°1 To inform you this is my first loop while creating my tab :

var tab = new Array(response.output.text[0]); // array with my different text
        var tmp = 1;
        while(response.output.text[tmp] != undefined){
            tab[tmp] = response.output.text[tmp]; // only display first value if second is null
            tmp = tmp + 1;
    }

回答1:

There is a much easier approach. JS allows you to 'join' all the elements in an array:

text = response.output.text.join(" ");

That should do the trick!

回答2:

I found a solution, a litlle savage but it's working currently so if someone have a better solution i will take it.

I create an array like in my post then when i instatiate my bubber.innerHTML i do

bubble.innerHTML = "<div class='bot'>" + tab[0] + tab[1]+ tab[2] + tab[3] + tab[4] +tab[5] + tab[6]+ tab[7]+ "</div>";

Because my array is always taller than 7

来源：https://stackoverflow.com/questions/41160887/how-to-display-several-messages-on-screen-with-watson-conversation

标签

javascript

ibm-cloud

watson-conversation