Retrieve server side data using XMLlHttpRequest in javascript and populate the items in newly created li element

Question

I am kinda new to javascript and trying to learn some basic operation. I have a dynamically created li element where a list of notes are being displayed.

Adding notes to the server is working well. Each note has an id and name value. The jason object is stored in this form [{"id":"1","name":"This is the first note"}] .

Now I want to retrieve the list from the server and display only the "name" values as the list on the same page whenever the user leaves the page and open the page again.

The controller function looks like this:

public class NoteController {

    private List<Note> notes;

    public NoteController() {
        this.notes = new ArrayList<>();
    }

    @RequestMapping(method = RequestMethod.GET)
    public List<Note> noteList() {
        return this.notes;
    }
}

Heres the html code:

       <form>
            <input type="text" name="name" id="name"/>
            <input type="button" onclick="addNote();" value="Add"/>
        </form>

And here is my javascript code:

        function loadNotes() {

            var HttpGET = new XMLHttpRequest();
            HttpGET.open("GET", "url", true);
            HttpGET.onreadystatechange = function() {

                if (HttpGET.readyState === 4) {
                    if (HttpGET.status === 200) {

                    var response = JSON.parse(HttpGET.responseText);
                    var loadListElement = document.createElement("li");

                 loadListElement.appendChild(document.createTextNode("name"));
                                                         document.querySelector("#notes").appendChild(loadListElement);
                    document.querySelector("#notes").innerHTML = response.value.notes;
                    }
                }
            }

            HttpGET.send(null);
        }

The javascript code is not working. The Json data should be displayed inside the ul element within its child node li. But I see nothing when I close the page or reload. I think I am not sure if I have used the response value properly in the loadTasks function. Also I am note sure if I have created text node properly in document.createTextNode("name"). Or am I missing something? Please help me to get through this. I spent quite much time on this already and cant think anything else other than banging my head here in stackoverflow.

Answer 1

As per your comments I assume you are getting response in the following format

    [
      {"id":"9d0962e8-e1f5-4b61-85ed-489dbc6d5bb2","name":"Runnin‌​g"},
      {"id":"82e1ad1a-‌​9bfb-490f-8f95-90139‌​dfe6790","name":"Sle‌​eping"}
    ]

Now your code should look like this

xmlHttp.onreadystatechange = function() {    
    if (xmlHttp.readyState === 4) {
          if (xmlHttp.status === 200) { 
              if(xmlHttp.responseText){// check for response
                 var response = JSON.parse(xmlHttp.responseText);
                 for(var note in response){ //iterate over response object
                     if(response.hasOwnProperty(note)){ //check whether note is a property of response object
                        var loadListElement = document.createElement("li");
                        loadListElement.appendChild(document.createTextNode(response‌​[note].name)); //use note's name property to get actual text
                        document.querySelector("#notes").appendChild(loadListElement);//append the element
                     }
                 }

              }
          }
    }
}