Unable to get list in JSON from JSON.parse

Question

I am having this problem where it keeps saying Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0') when I am pretty sure this is right.

My response from the page the system is getting text from is here:

"[{\u0027message\u0027: \u0027amazing\u0027, \u0027sent_by\u0027: \u0027Tester Wupx\u0027}, {\u0027message\u0027: \u0027wow\u0027, \u0027sent_by\u0027: \u0027Tester Wupx\u0027}, {\u0027message\u0027: \u0027name\u0027, \u0027sent_by\u0027: \u0027guest\u0027}]"

Here is my code:

async function getNewMessages() {
  await fetch(`/get_new_messages/s/${sId}`).then(async function(response) {
    const body = await response.text();
    arr = body.replace('[', "{'auto': [").replace(']', ']}')
    console.log(arr)
    json = await JSON.parse(arr);
    
    document.querySelector('.channel-messages ul').innerHTML = null;

    for (const i in Object.keys(json)) {
      const obj = json["auto"][i];
      document.querySelector('.channel-messages ul').insertAdjacentHTML('beforeend', `<li style="padding-left: 10px; color: white; width: 100%;" onmouseover="const collection = this.children; this.style.background = '#535357'; this.style.color = 'white';" onmouseout="const collection = this.children; this.style.background = 'transparent'; this.style.color = 'white';"><b><img src="/assets/images/Goobler-meowsicles.png" width=40/> <onclickFunc onclick="">${obj["sent_by"]}</onclickFunc> <span class="badge" style="background: mediumpurple;">TESTER <i class="fa fa-check"></i></span> </b> <br>${obj["message"]}</li>`);
      console.log(obj)
      
    }
    
    /*document.querySelector('.channel-messages ul').insertAdjacentHTML('beforeend', `<li style="padding-left: 10px; color: white; width: 100%;" onmouseover="const collection = this.children; this.style.background = '#535357'; this.style.color = 'white';" onmouseout="const collection = this.children; this.style.background = 'transparent'; this.style.color = 'white';"><b><img src="/assets/images/Goobler-meowsicles.png" width=40/> <onclickFunc onclick="">${json.message}</onclickFunc> <span class="badge" style="background: mediumpurple;">TESTER <i class="fa fa-check"></i></span> </b> <br>${json["messages"]['message']}</li>`);*/
  })
  //location.reload()
} /*edited code*/

I appreciate answers!

Answer 1

I fixed it myself, I will explain what I did. I changed await response.text() to await response.json() instead. I edited the for loop Here is my code now:

async function getNewMessages() {
  await fetch(`/get_new_messages/s/${sId}`).then(async function(response) {
    const body = await response.json();
    const jsonText = body.replaceAll('\u0027', '\u0022');
    const item = await JSON.parse(jsonText)/*.replaceAll(`'`, `"`);*/
    console.log("Edited array: "+jsonText);
    console.log("Raw array: "+body);
    console.log("Parsed array"+item)
    
    document.querySelector('.channel-messages ul').innerHTML = null;

    for (const obj of Object.entries(item.messages)) {
      const message = obj[1].message
      const sent_by = obj[1].sent_by
      document.querySelector('.channel-messages ul').insertAdjacentHTML('beforeend', `<li style="padding-left: 10px; color: white; width: 100%;" onmouseover="const collection = this.children; this.style.background = '#535357'; this.style.color = 'white';" onmouseout="const collection = this.children; this.style.background = 'transparent'; this.style.color = 'white';"><b><img src="/assets/images/Goobler-meowsicles.png" width=40/> <onclickFunc onclick="">${sent_by}</onclickFunc> <span class="badge" style="background: mediumpurple;">TESTER <i class="fa fa-check"></i></span> </b> <br>${message}</li>`);
      console.log(obj[1])
    }
    
    /*document.querySelector('.channel-messages ul').insertAdjacentHTML('beforeend', `<li style="padding-left: 10px; color: white; width: 100%;" onmouseover="const collection = this.children; this.style.background = '#535357'; this.style.color = 'white';" onmouseout="const collection = this.children; this.style.background = 'transparent'; this.style.color = 'white';"><b><img src="/assets/images/Goobler-meowsicles.png" width=40/> <onclickFunc onclick="">${json.message}</onclickFunc> <span class="badge" style="background: mediumpurple;">TESTER <i class="fa fa-check"></i></span> </b> <br>${json["messages"]['message']}</li>`);*/
  })
  //location.reload()
}