Javascript not defined error, when adding elements to array

Question

I have a Json array, that I'm parsing into a javascript object array.

btn.addEventListener("click", function() {
  var request = new XMLHttpRequest();
  request.open('GET', 'http://localhost:8084/RestandJson/api/Person');
  request.onload = function() {
    var data = JSON.parse(request.responseText);
    // renderhtml(data);
    addPerson(data);
  };
  request.send();
});

I have made an addPerson function to add a user-defined object into the list.

addPerson = (data) => {
  var fName = document.getElementById("fname");
  var lName = document.getElementById("lname");
  var age = document.getElementById("age");
  var id = data.pop()+1;
  const person = {fName, lName, age, id};
  data.add(person);
}

when the function is called I get 'addPerson is not defined' as an error. Why is this?

here is my entire file:

var btn = document.getElementById("btn");
var root = document.getElementById("root");


btn.addEventListener("click", function() {
    var request = new XMLHttpRequest();
    request.open('GET', 'http://localhost:8084/RestandJson/api/Person');
    request.onload = function(){
      var data = JSON.parse(request.responseText);
      //renderhtml(data);
      addPerson(data);

    };
    request.send();

});



renderhtml = (data) => {
let htmlString = " ";

for(i = 0; i < data.length; i++){
    htmlString += "<p> " + data[i].fName +" " +  data[i].lName + "</p>"
}



addPerson = (data) => {
    var fName = document.getElementById("fname");
    var lName = document.getElementById("lname");
    var age = document.getElementById("age");
    var id = data.pop()+1;
    const person = {fName, lName, age, id};
    data.push(person);

}



root.insertAdjacentHTML('beforeend', htmlString);
}

The error means that addPerson() is defined in a scope such that it's not accessible from the XHR callback. Without seeing more code it's impossible to be more precise. — Pointy
– Pointy, Commented Sep 22, 2018 at 13:25
Thank you for your comment, I have edited the code, so we can see the entire file — Kristoffer Tølbøll
– Kristoffer Tølbøll, Commented Sep 22, 2018 at 13:28

Nick Parsons · Accepted Answer · 2018-09-23 03:06:10Z

4

It's because you didn't close your renderHTML function properly, it should be like this:

renderhtml = (data) => {
  let htmlString = " ";

  for(i = 0; i < data.length; i++){
      htmlString += "<p> " + data[i].fName +" " +  data[i].lName + "</p>"
  }
} // <-- Add closing bracket to renderHTML function here

addPerson = (data) => {
  var fName = document.getElementById("fname");
  var lName = document.getElementById("lname");
  var age = document.getElementById("age");
  var id = data.pop()+1;
  const person = {fName, lName, age, id};
  data.push(person);
}

edited Sep 23, 2018 at 3:06

answered Sep 22, 2018 at 13:31

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rio Hilmy · Accepted Answer · 2018-09-22 13:35:38Z

1

Try moving the whole addPerson function outside the renderhtml function, most probably because that addPerson function is inside the renderhtml function

answered Sep 22, 2018 at 13:35

Rio Hilmy

6505 silver badges10 bronze badges

2 Comments

Mark Schultheiss Over a year ago

Welcome to StackOverflow. While this answer is good, you could make it great by adding the revised code, see other answers for what I mean by this. As it stands, it is more of a comment than an answer. As this is a "coding" site code is always good and does not always have to be large, just illustrative.

Rio Hilmy Over a year ago

My apologies, thanks for letting me know @MarkSchultheiss :)

Collectives™ on Stack Overflow

Javascript not defined error, when adding elements to array

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related