javascript - Issues with retrieving Firebase data into a textbox in html page -

// calls onclick command populate button  function myfunctionpopulate() {    // creates new firebase reference linking js firebase database  var ref = new firebase("https://project01-d018e.firebaseio.com/numbers");    // creates snapshot of data desired firebase database , adds 'value'   ref.on('value', function(snapshot) {    // adds console log of data recived firebase  console.log(snapshot.val());    // creates variable called data snapshot saved  var data = snapshot.val();    (var key in data) {        if (data.hasownproperty(key)) {        // takes id of textbox , adds value of (data[key]) data = snapshot.val() snapshot of data      document.getelementbyid('id1').value=(data[key]);        // adds console log message confirm textbox has been populated      console.log('value added');      };      // end of if    }    // end of  });  // end of ref.on  }  // end of function

<div id="button">    <button id="rbutton" value="submit" onclick="myfunctionpopulate()">populate</button>  </div>    <div id="button2">    <button id="rbutton" value="submit" onclick="myfunctionclear()">clear</button>  </div>    <div id="textbox">    <form>    firebase<br>    <textarea rows="4" cols="50" id="id1"></textarea>  </form>  </div>

i have started using google firebase storage solution storing data. far - i'm liking it!

however, trying display data firebase database html website consists of 2 buttons , textarea. 1 button populating text area other clearing. simple stuff moment.

currently, when hit populate button onclick function performs piece of js:

js screenshot

****project name has been changed sake of example****

numbers - js referencing - looks in firebase console:

firebase console screenshot

when hit populate button textarea populated within html, however, last piece of data numbers displayed , not whole list.

i wish show data text area if possible.

if can shed light onto grateful - i'm unsure whether issue 'key' part of js i'm unsure - snippit github piece of work have adjusted fit work.

i have attached js , html although wont work because not contain firebase script tags or firebase initialisation tag having text makes clearer

thank in advance, g

the reason you're seeing last piece of data you're replacing contents of textarea on every iteration of loop instead of appending it. run below code snippet example. in textarea id1 i'm doing doing, , in textarea id2 i'm appending current value instead of replacing it.

var data = ['first','second','third'];    (var key = 0; key < data.length; key++) {  	document.getelementbyid('id1').value = data[key]    document.getelementbyid('id2').value += data[key]  }

<textarea id="id1"></textarea>  <textarea id="id2"></textarea>