0

I am trying to print out the API response data in the DOM. As you can see, I am able to get a response based on the user input. I am able to print the response out to the console, but I am confused why the code below won't print out the same information in the DOM.

if (containsItem == "1") {
    const proxyUrl = "https://cors-anywhere.herokuapp.com/",
      targetUrl =
        "http://services.runescape.com/m=itemdb_oldschool/api/catalogue/detail.json?item=";
    fetch(proxyUrl + targetUrl + i)
      .then((data) => data.json())
      .then(({ item: { id, name, current: { price } } }) =>
        console.log(`${id}: ${name} ${price}`)
      );
    document.getElementById("itemData").innerHTML = `${id}: ${name} ${price}`;
  } else {
    document.getElementById("alert").style.display = "block";
    setTimeout(function() {
      $("#alert").fadeOut("slow");
    }, 2500);
  }

I would really appreciate some help and better understanding of what I am doing wrong. Thank you in advance.

ETHan
  • 187
  • 1
  • 4
  • 17
  • 3
    do it INSIDE the .then where you console.log it - those variables aren't even defined outside the function called in the last .then – Jaromanda X Apr 30 '20 at 03:50
  • That isnt working for me. I am placing it right under my console log and it wouldn't work. It gives me the following error. ```var document: Document ',' expected.ts(1005)``` and ```Declaration or statement expected.ts(1128)```. – ETHan Apr 30 '20 at 05:27
  • 1
    you'll need `{` and `}` since it's not a "simple" arrow function body if you have multiple statements ... - or, add a `,` after the console.log line - or REPLACE the console.log with that one line (and exclude the `;` in either of the last two cases) - that's just basic javascript syntax issues you have – Jaromanda X Apr 30 '20 at 05:35
  • This solved my issue. I simply wrapped that last part in { and } and now I am able to do what I wanted.. Thanks a lot Jaromanda! – ETHan Apr 30 '20 at 05:39

0 Answers0