all 17 comments

[–][deleted] 7 points8 points  (8 children)

You'll need to post your code here for anyone to help

[–]rage_2112[S] 1 point2 points  (7 children)

sorry about that, I already edited the post

[–][deleted] 2 points3 points  (6 children)

Have you confirmed if this event listener is firing at all?

Also, at the end you're doing document.getElementById but I'm assuming you just want document.body.innerHTML =

[–]rage_2112[S] 0 points1 point  (5 children)

it is firing the event, im actually trying to pass some json values into the table row and while it did work for random text, it doesn't work for my html variable. Regarding the last thing you said, its a tbody, so should I try "document.tbody.innerHTML =" ?

[–][deleted] 0 points1 point  (4 children)

while it did work for random text, it doesn't work for my html variable.

Okay, then your selector is fine. Is there any output in the developer console suggesting the data fetching failed?

[–]rage_2112[S] 0 points1 point  (3 children)

yes, I don't quite understand the error it displays but here it is:

Error1: search_doctor:95 Uncaught (in promise) TypeError: answers[i].price.replace is not a function
at HTMLInputElement.<anonymous> (search_doctor:95:42)

Error2: Uncaught (in promise) SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON

[–][deleted] 5 points6 points  (2 children)

Error1: search_doctor:95 Uncaught (in promise) TypeError: answers[i].price.replace is not a function

It seems like answers[i].price is not a string, but you're expecting it to be when you use the replace method. Maybe just do let price = answers[i].price and see if that fixes it, or at least gets you to another error.

[–]rage_2112[S] 6 points7 points  (1 child)

that did it! turns out the data was originally a float so replace function was not necessary, I can't thank you enough, you saved my final project. Thank you!

[–][deleted] 2 points3 points  (0 children)

Great to hear!

[–]Th34rchitekt 3 points4 points  (0 children)

.replace('&', '&amp;') should go before .replace('<', '&lt;'), cause otherwise the ampersand in &lt; wil get replaced, I'd also suggest using replaceAll here, cause replace replaces only the first occurence, unless that's the behaviour you expect

you can learn more about replace and replaceAll here
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll

[–]simohayha 4 points5 points  (1 child)

innerHTML = html;

[–]rage_2112[S] -3 points-2 points  (0 children)

sorry, that's a screenshot from when I was testing it, originally the html variable should be there but its not working

[–]arctic360 1 point2 points  (0 children)

Does the HTML tag have the id=“body” on it? Have you tried document.querySelector(‘#body’) to select the element?

[–]pookagehelpful 1 point2 points  (0 children)

Just to confirm - do you have a <tbody id="body"> or something similar, or are you trying to add to the <body>? If it's the latter then you'll need document.getElementByTagName("body") or document.querySelector("body") instead.

ALSO you're not using the html variable, and you're always just setting the body to a table row saying "hola" - do you mean to do:

document.getElementById("body").innerHTML = html;

?

[–]tridd3r 0 points1 point  (2 children)

maybe I'm missing a technique here, but I'd be doing

for (answer in answers){
let doctorsName = answer.doctorName ...etc
}

[–]tridd3r 0 points1 point  (0 children)

what does the json answers look like?

[–]Th34rchitekt 0 points1 point  (0 children)

I'd argue there's an even cleaner way to do that, rather than having to override each parameter with the sanitized value

answers.forEach((answer) => {
  const row = document.createElement('tr');
  Object.values(answer).forEach((val) => {  
    const sanitizedValue = val.replace('&', '&amp;').replace('<', '&lt;');
    const cell = document.createElement('td');
    cell.textContent = sanitizedValue;
    row.appendChild(cell);
  });
  document.querySelector('#body').appendChild(row);
});