NaN on ajax请求返回数据

Question

on the php side of the api I have this:

$res = $db->query("SELECT count(upVote) FROM tbl_post_likers WHERE post_id='$pnum' AND upVote='true'");
$row = $res->fetchArray();
if($row[0] > 0){
    $upVotes = $row[0];
    $res = $db->query("SELECT count(downVote) FROM tbl_post_likers WHERE post_id='$pnum' AND downVote='true'");
    $row = $res->fetchArray();
    $downVotes = $row[0];

    $tot = $upVotes + $downVotes;
    $upVotesPer = ($upVotes * 100) / $tot;
    $downVotesPer = ($downVotes * 100) / $tot;
    return $upVotesPer - $downVotesPer;
}else if ($row[0] == 0){
    return 0;
}

and I've tried to return some more data as an array from the api. and on the javascript side when I JSON.parse the returned data I get all the data correctly as below: eg:

0: [...],
1: [...],
2: 0

the zero is the return 0; from the php side, The problem is when I console.log the 3rd property it is undefined or when I parseInt it, it returns NaN while the 3rd property of the returned data as shown is zero.

this is the actual console.log:

0 : "{"0":2,"id":2,"1":"0.jpg","image":"0.jpg","2":"Proj 1","title":"Proj 1","3":"some description here about the course!","desc":"some description here about the course!","4":"sinawic","teacher":"sinawic","5":0,"sell_count":0,"6":"1997.05.05","date_released":"1997.05.05","7":97,"preview":97,"8":0,"likes":0,"9":0,"post_point":0,"10":0,"post_cash":0}" 1 : "["jquery","vue"]" 2 : "[{"lesson_num":1,"topic_name":"pre"}]" 3 : "{"0":"sinawic","username":"sinawic","1":"web design, React, VUE, javascript","fields_name":"web design, React, VUE, javascript","2":"this is all about me, oke? call me maybe","description":"this is all about me, oke? call me maybe","3":"85%, 53%, 36%, 74%, 17%","ranks":"85%, 53%, 36%, 74%, 17%"}" 5 : 0

and this is the data echo to the api:

{"0":"{\"0\":2,\"id\":2,\"1\":\"0.jpg\",\"image\":\"0.jpg\",\"2\":\"Proj 1\",\"title\":\"Proj 1\",\"3\":\"some description here about the course!\",\"desc\":\"some description here about the course!\",\"4\":\"sinawic\",\"teacher\":\"sinawic\",\"5\":0,\"sell_count\":0,\"6\":\"1997.05.05\",\"date_released\":\"1997.05.05\",\"7\":98,\"preview\":98,\"8\":0,\"likes\":0,\"9\":0,\"post_point\":0,\"10\":0,\"post_cash\":0}","1":"[\"jquery\",\"vue\"]","2":"[{\"lesson_num\":1,\"topic_name\":\"pre\"}]","3":"{\"0\":\"sinawic\",\"username\":\"sinawic\",\"1\":\"web design, React, VUE, javascript\",\"fields_name\":\"web design, React, VUE, javascript\",\"2\":\"this is all about me, oke? call me maybe\",\"description\":\"this is all about me, oke? call me maybe\",\"3\":\"85%, 53%, 36%, 74%, 17%\",\"ranks\":\"85%, 53%, 36%, 74%, 17%\"}","5":0}

how could I possibly solve it.

Answer 1

Your code is trying to access the item at index 5 in the Object.keys array, which would be the 6th item. However you have a gap in the key numbering - 4 is not included.

Therefore the object with the key "5" is actually the 5th item in the list of keys, and therefore accessible at index 4 - because the array of keys is zero-based, like all JS arrays. There is no 6th item - the object only has 5 keys.

I think because the object keys are numeric you have got confused between the name of the key and its position in the list of keys.

Observe the difference between the last 2 console.logs in this (runnable) example:

var allData = { 0:{"0":2,"id":2,"1":"0.jpg","image":"0.jpg","2":"Proj 1","title":"Proj 1","3":"some description here about the course!","desc":"some description here about the course!","4":"sinawic","teacher":"sinawic","5":0,"sell_count":0,"6":"1997.05.05","date_released":"1997.05.05","7":97,"preview":97,"8":0,"likes":0,"9":0,"post_point":0,"10":0,"post_cash":0},
1:["jquery","vue"],
2:[{"lesson_num":1,"topic_name":"pre"}],
3:{"0":"sinawic","username":"sinawic","1":"web design, React, VUE, javascript","fields_name":"web design, React, VUE, javascript","2":"this is all about me, oke? call me maybe","description":"this is all about me, oke? call me maybe","3":"85%, 53%, 36%, 74%, 17%","ranks":"85%, 53%, 36%, 74%, 17%"},
5:0 };

console.log(Object.keys(allData));

console.log(allData[Object.keys(allData)[5]]);

console.log(allData[Object.keys(allData)[4]]);

However you could greatly simplify this. If you already know you want the item whose key is called "5" then you can simply access it directly:

var allData = { 0:{"0":2,"id":2,"1":"0.jpg","image":"0.jpg","2":"Proj 1","title":"Proj 1","3":"some description here about the course!","desc":"some description here about the course!","4":"sinawic","teacher":"sinawic","5":0,"sell_count":0,"6":"1997.05.05","date_released":"1997.05.05","7":97,"preview":97,"8":0,"likes":0,"9":0,"post_point":0,"10":0,"post_cash":0},
1:["jquery","vue"],
2:[{"lesson_num":1,"topic_name":"pre"}],
3:{"0":"sinawic","username":"sinawic","1":"web design, React, VUE, javascript","fields_name":"web design, React, VUE, javascript","2":"this is all about me, oke? call me maybe","description":"this is all about me, oke? call me maybe","3":"85%, 53%, 36%, 74%, 17%","ranks":"85%, 53%, 36%, 74%, 17%"},
5:0 };

console.log(allData[5]);

</div>