Why can't I access the data in my JSON?

Question

My PHP is:

if(!empty($_POST)&&($_POST['action']=='edit'))
{
    foreach ($_POST['selected'] as $edit_id) 
    {
        $query = "SELECT * FROM grocery WHERE id = $edit_id";
        $result = dbQuery($query);
        break;
    }

    $rowArr=array();
    $inRow = mysqli_fetch_array($result);

    $id = $inRow['id'];
    $shop = $inRow['shop'];
    $category = $inRow['category'];
    $item = $inRow['item'];
    $qnty = $inRow['quantity'];
    $unit = $inRow['unit'];
    $price_based_on = $inRow['price_based_on'];
    $mrp = $inRow['MRP'];
    $sellers_price = $inRow['sellers_price'];
    $last_updated_on = $inRow['last_updated_on'];
    array_push($rowArr, array('id' => $id, 'shop' => $shop, 'category' =>$category, 'item' => $item, 'qnty' => $qnty, 'unit' => $unit, 'price_based_on' => $price_based_on, 'mrp' => $mrp, 'sellers_price' => $sellers_price, 'last_updated_on' => $last_updated_on));  
    echo json_encode(array('rowArr' => $rowArr));
}

The output (JSON) produced by the above script is: (I've ensured this is produced in the Chrome's console)

{
  "rowArr": [
    {
      "id": "30",
      "shop": "Subhash",
      "category": "Spices",
      "item": "Duta Corriander Powder",
      "qnty": "50",
      "unit": "gm",
      "price_based_on": "Packet",
      "mrp": "15.00",
      "sellers_price": "12.00",
      "last_updated_on": "2016-12-03"
    }
  ]
}

My jQuery is:

$('#edit').click(function(){
    var data = $("#list :input").serialize();
    $.post($("#list").attr('action'), data, function(json) 
    {
        if(json.rowArr.length>0)
            console.log("Data Exists");
        else
            console.log("Empty");
        currentRow = json.rowArr[0];
        console.log(json.rowArr[0].id);
        $("#id").val(currentRow.id);
        $("#id_disp").val(currentRow.id);
    });
});

Strangely enough, neither Data Exists or Empty is produced by the above loop. And when I try to access the JSON data, json.rowArr[0].id I get the following error:

Uncaught TypeError: Cannot read property 'length' of undefined

Why is this happening? How do I fix it?

Answer 1

You should explicitly tell jQuery that your response has JSON format. You should pass 'json' as fourth argument of $.post , according to docs .

$('#edit').click(function(){
    var data = $("#list :input").serialize();
    $.post($("#list").attr('action'), data, function(json) {
        if(json.rowArr.length>0)
            console.log("Data Exists");
        else
            console.log("Empty");
        currentRow = json.rowArr[0];
        console.log(json.rowArr[0].id);
        $("#id").val(currentRow.id);
        $("#id_disp").val(currentRow.id);
    }, 'json');
});