Unable to get list in JSON from JSON.parse-CodePudding

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%;" onm ouseover="const collection = this.children; this.style.background = '#535357'; this.style.color = 'white';" onm ouseout="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  style="background: mediumpurple;">TESTER <i ></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%;" onm ouseover="const collection = this.children; this.style.background = '#535357'; this.style.color = 'white';" onm ouseout="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  style="background: mediumpurple;">TESTER <i ></i></span> </b> <br>${json["messages"]['message']}</li>`);*/
  })
  //location.reload()
} /*edited code*/

I appreciate answers!

CodePudding user response：

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%;" onm ouseover="const collection = this.children; this.style.background = '#535357'; this.style.color = 'white';" onm ouseout="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  style="background: mediumpurple;">TESTER <i ></i></span> </b> <br>${obj.message}</li>`);
}

CodePudding user response：

If your body equals to this:

"[{\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}]"

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)