JSON.parse: Unable to find error in code

Question

I have a script receiving a JSON from PHP. I have to parse the data. Unfortunately I'm not able to parse the JSON into an object and get the different arrays. I tried to validate the JSON but I cant find an error there either.

Code:

$.ajax({
  type: "POST",
  dataType: "html",
  url: "/sqldblink.php",
  data: data,
  success: function(data) {
    var recdata=data;
    console.log("Received data from listregistered:");
    console.log("Server reports:" + recdata);
    ListRegisteredResults(recdata);
  },
  error: function () {
    console.log("Failed to list!");
   }
});

function ListRegisteredResults(recdata) {
    console.log(typeof recdata);
    var data = JSON.parse(recdata);
    console.log(data);
    console.log(typeof data);
    console.log(data.Address.length);
}

The output:

Server reports:"{\"Address\":[\"Home\",\"\",\"Home,\nHoover House 85\",\"\",\"Home\",\"\",\"\",\"\",\"\",\"\"],\"BloodGroup\":[\"o+\",\"\",\"B+\",\"B+\",\"AB+\",\"o+\",\"o-\",\"\",\"\",\"\"],\"Occupation\":[\"Vendor\",\"\",\"Carpenter\",\"Playing\",\"Nurse\",\"IT professional\",\"Engineer\",\"Doctor\",\"\",\"\"],\"Alternate\":[\"0\",\"0\",\"925\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\"],\"Email\":[\"some@site.com\",\"\",\"jim@site.com\",\"\",\"\",\"\",\"arun@site.com\",\"\",\"\",\"\"],\"Mobile\":[\"90000006\",\"90000005\",\"90000005\",\"34344444\",\"902w0w05\",\"90002005\",\"900020w5\",\"90000005\",\"90002105\",\"90000005\"],\"Marital\":[\"Married\",\"Married\",\"Married\",\"Unmarried\",\"Unmarried\",\"Married\",\"Married\",\"Married\",\"Married\",\"Married\"],\"Gender\":[\"1\",\"2\",\"\",\"1\",\"1\",\"2\",\"2\",\"1\",\"1\",\"1\"],\"Age\":[\"28\",\"65\",\"35\",\"2\",\"25\",\"34\",\"31\",\"28\",\"60\",\"58\"],\"Name\":[\"Tracy Jim\",\"George Jose\",\"Jim G Mathew\",\"Cary jim\",\"Becky Mathew\",\"Cary Guy\",\"Arun Mose\",\"Tracy Kelly\",\"Dr Kim\",\"Steven Ludwig\"],\"HospitalID\":[\"3\",\"5\",\"6\",\"7\",\"8\",\"9\",\"10\",\"11\",\"12\",\"16\"]}"
string
{"Address":["Home","","Home,\nHoover House 85","","Home","","","","",""],"BloodGroup":["o+","","B+","B+","AB+","o+","o-","","",""],"Occupation":["Vendor","","Carpenter","Playing","Nurse","IT professional","Engineer","Doctor","",""],"Alternate":["0","0","925","0","0","0","0","0","0","0"],"Email":["some@site.com","","jim@site.com","","","","arun@site.com","","",""],"Mobile":["90000006","90000005","90000005","34344444","902w0w05","90002005","900020w5","90000005","90002105","90000005"],"Marital":["Married","Married","Married","Unmarried","Unmarried","Married","Married","Married","Married","Married"],"Gender":["1","2","","1","1","2","2","1","1","1"],"Age":["28","65","35","2","25","34","31","28","60","58"],"Name":["Tracy Jim","George Jose","Jim G Mathew","Cary jim","Becky Mathew","Cary Guy","Arun Mose","Tracy Kelly","Dr Kim","Steven Ludwig"],"HospitalID":["3","5","6","7","8","9","10","11","12","16"]}
string
userjs/main.js:347 Uncaught TypeError: Cannot read property 'length' of undefined
    at ListRegisteredResults (userjs/main.js:347)
    at Object.success (userjs/main.js:295)
    at i (jquery-3.2.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
    at A (jquery-3.2.1.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery-3.2.1.min.js:4)

After I parse the string into JSON, why is it still being reported as being a string?

Answer 1

This is happening only because of dataType: "html", that you are sending with your post request. SO the response you are getting with '\' so JSON.parse() can't handle them. Remove dataType from post request and then try, then you'll get correct response and your required result.

Code:

$.ajax({
  type: "POST",
  url: "/sqldblink.php",
  data: data,
  success: function(data) {
    var recdata=data;
    console.log("Received data from listregistered:");
    console.log("Server reports:" + recdata);
    ListRegisteredResults(recdata);
  },
  error: function () {
    console.log("Failed to list!");
   }
});

function ListRegisteredResults(recdata) {
    console.log(typeof recdata);
    var data = JSON.parse(recdata);
    console.log(data);
    console.log(typeof data);
    console.log(data.Address.length);
}

Answer 2

You JSON was invalid. \n at position 28 was breaking it, you need to escape it.

"Address":["Home","","Home,\nHoover House 85"

Should be

"Address":["Home","","Home,\\nHoover House 85"

If you want to keep that \n.

let jsonString = `{"Address":["Home","","Home,\\nHoover House 85","","Home","","","","",""],"BloodGroup":["o+","","B+","B+","AB+","o+","o-","","",""],"Occupation":["Vendor","","Carpenter","Playing","Nurse","IT professional","Engineer","Doctor","",""],"Alternate":["0","0","925","0","0","0","0","0","0","0"],"Email":["some@site.com","","jim@site.com","","","","arun@site.com","","",""],"Mobile":["90000006","90000005","90000005","34344444","902w0w05","90002005","900020w5","90000005","90002105","90000005"],"Marital":["Married","Married","Married","Unmarried","Unmarried","Married","Married","Married","Married","Married"],"Gender":["1","2","","1","1","2","2","1","1","1"],"Age":["28","65","35","2","25","34","31","28","60","58"],"Name":["Tracy Jim","George Jose","Jim G Mathew","Cary jim","Becky Mathew","Cary Guy","Arun Mose","Tracy Kelly","Dr Kim","Steven Ludwig"],"HospitalID":["3","5","6","7","8","9","10","11","12","16"]}`;

let json = JSON.parse(jsonString);
console.log(json.Address);

Answer 3

Remove dataType: "html" as well as any JSON.parse() from your code and it'll work. jQuery automatically parses the data if you don't set wrong dataTypes, or json

$.ajax({
  type: "POST",
  url: "/sqldblink.php",
  data: data,
  success: function(data) {
    var recdata=data;
    console.log("Received data from listregistered:");
    console.log("Server reports:" + recdata);
    ListRegisteredResults(recdata);
  },
  error: function () {
    console.log("Failed to list!");
   }
});

function ListRegisteredResults(recdata) {
    console.log(typeof recdata);
    var data = recdata;
    console.log(data);
    console.log(typeof data);
    console.log(data.Address.length);
}