Unable to get list in JSON from JSON.parse

EricPlayzYT
January 1, 2023
125 views
2 votes
3 Answers

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:

"[{u0027messageu0027: u0027amazingu0027, u0027sent_byu0027: u0027Tester Wupxu0027}, {u0027messageu0027: u0027wowu0027, u0027sent_byu0027: u0027Tester Wupxu0027}, {u0027messageu0027: u0027nameu0027, u0027sent_byu0027: u0027guestu0027}]"

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!

Answers

Chosen as BEST ANSWER

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()
}

(Edit)

replace u0027 with u0022 i.e. single quotes with double quotes as the single quote is not a valid JSON.

Updated

const body = await response.text();
const jsonText = body.replaceAll('u0027', 'u0022');
const item = await JSON.parse(jsonText);

for (const obj of item.messages) {
  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>`);
}

If your body equals to this:

"[{u0027messageu0027: u0027amazingu0027, u0027sent_byu0027: u0027Tester Wupxu0027}, {u0027messageu0027: u0027wowu0027, u0027sent_byu0027: u0027Tester Wupxu0027}, {u0027messageu0027: u0027nameu0027, u0027sent_byu0027: u0027guestu0027}]"

Then try in this way:

    const body = await response.text();
    // arr = body.replace('[', "{'auto': [").replace(']', ']}') <= remove this line
    json = await JSON.parse(body);
    console.log(json)

Please signup or login to give your own answer.

Click here to cancel reply.