JSON data undefined after ajax calling

Question

problem facing to show the name in maindata, whereas maindata is showing perfectly but maindata->name : undefined. maindata is longtext column in MySQL

//this is the jQuery code section below
//original data stored in MySQL database in column MAINDATA
{
  "name":"SOUMITRA AND & SARKAR",
  "address":"24/1 Sahid Ananta Dutta Sarani, P.O. Rajbari,Kolkata 700 081",
  "stateid":["19","20","21"],
  "ref":{"noref":01,"myref":"02"}
 }

//retuning after AJAX call in jQuery script the $.parseJSON value is below

[
  {
    "maindata":"{
        "name":"SOUMITRA AND & SARKAR",
        "address":"24/1 Sahid Ananta Dutta Sarani, P.O.Rajbari, Kolkata 700 081",
        "stateid":["19","20","21"],
        "ref":{"noref":01,"myref":"02"}
     }"
   }
]


for (var i=0;i<pass_data.length;i++)
{
    //maindata is showing perfectly
    alert(pass_data[i].maindata);
}
for (var i=0;i<pass_data.length;i++)
{
    alert(pass_data[i].maindata["address"]; // undefined
}

I have shown it in my question, so far I found that parse data is doing something wrong. after maindata there is { second bracket which is within quotes.

Answer 1

In your returned value maindata is a string, so you can't access the properties within. You have to parse the string again to make the properties accessible.

For example:

const ajaxResult = [
  {
    "maindata":"{
        "name":"SOUMITRA AND & SARKAR",
        "address":"24/1 Sahid Ananta Dutta Sarani, P.O.Rajbari, Kolkata 700 081",
        "stateid":["19","20","21"],
        "ref":{"noref":01,"myref":"02"}
     }"
   }
]

ajaxResult[0].maindata = JSON.parse(ajaxResult[0].maindata)

console.log(ajaxResult[0].maindata.address) // "24/1 Sahid Ananta Dutta Sarani, P.O.Rajbari, Kolkata 700 081"