Question posted in Json
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Unable to get list in JSON from JSON.parse

EricPlayzYT
January 1, 2023
145 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.