CODEWITHSUNDEEP
javascriptphpjqueryajax
Rocstar
Rocstar

Reputation: 1487

Ajax - Why use JSON.parse(data) with dataType in $.post()

I use ajax to fill a datatables table dynamically.

Here is the code:

Javascript :

  $.post("/import_data.php", {add: new_row}, "json").done(function(data){
    data = JSON.parse(data);

    if (data[0] === 'example_1') {
      .....
      $("#error_1").modal("show");
    }
    else if (data[0] === 'example_2') {
      .....
      $("#error_2").modal("show");
    }
    else {
      table.row.add(data).order([0, 'desc']).draw();
    } 
  });

PHP (import_data.php) :

 ...    
 $arr = array('info1', 'info2', 'info3', 'info4');
 echo json_encode($arr);

But there is something that I do not understand, why I have to use the line JSON.parse (data), it's not the work of the dataType or there is a problem in my code?

How can I improve my script?

EDIT :

Console.log(data) -- before JSON.parse(data) :

["super","1","220","example"]

After JSON.parse(data) : 

(4) ["super", "1", "220", "example"]
0: "super"
1: "1"
2: "220"
3: "example"
length: 4
__proto__: Array(0)

If I do not put JSON.parse(data) Rather than taking me the super element, he takes me [

Upvotes: 2

Views: 116

Answers (3)

Aditya Sharma
Aditya Sharma

Reputation: 663

The sequence of dataType is wrong.

jQuery.post( url [, data ] [, success ] [, dataType ] )

As per the official doc.

A callback function that is executed if the request succeeds. Required if dataType is provided, but can be null in that case.

Try this

$.post("/import_data.php", {add: new_row}, function(data){

    if (data[0] === 'example_1') {
      .....
      $("#error_1").modal("show");
    }
    else if (data[0] === 'example_2') {
      .....
      $("#error_2").modal("show");
    }
    else {
      table.row.add(data).order([0, 'desc']).draw();
    } 
}, "json");

Or try setting callback to undefined

$.post("/import_data.php", {add: new_row}, null, "json").done(function(data){
    data = JSON.parse(data);

    if (data[0] === 'example_1') {
      .....
      $("#error_1").modal("show");
    }
    else if (data[0] === 'example_2') {
      .....
      $("#error_2").modal("show");
    }
    else {
      table.row.add(data).order([0, 'desc']).draw();
    } 
  });

Check this fiddle

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1075189

I'm shocked to find that the data is not parsed when passed to the done callback when you rely on the dataType parameter (I've replicated your problem locally) in your example. It's because jQuery's $.post requires you to pass an argument for the success parameter if you're going to include a dataType parameter; see Aditya Sharma's answer for a quote from the docs on that.

You shouldn't rely on the dataType parameter anyway, though; instead, your PHP should return the correct Content-Type header:

<!-- language: lang-php -->
<?php
header("Content-Type: application/json");
$arr = array('info1', 'info2', 'info3', 'info4');
echo json_encode($arr);

If you do that, your $.post call works just fine (without the JSON.parse call).

If for some reason you can't do that, use the success callback instead of done (or pass null as the success parameter and keep using .done); jQuery will parse the JSON for you because of the "json" parameter:

<!-- language: lang-js -->
$.post("temp.php", {add: new_row}, function(data) {
    // ...
}, "json");

// or
$.post("temp.php", {add: new_row}, null, "json").done(function(data) {
    // ...
}, "json");

...and then, again, no need for the JSON.parse call.

But again, it's better if the PHP correctly identifies the type of the response.

Upvotes: 3

Rushi Shukla
Rushi Shukla

Reputation: 46

if you are request with $.post then first you require the parse json array and then get a array value. otherwise u can use ajax call it is better and u don't need to require Json.parse directly you can get the array value.

example :

 $.ajax({
        type: 'POST',
        url: "your url",
        dataType: 'json',
        data: {data: value},
        success: function (data) {
            alert(data[0])
            console.log(data[0]);
            //data = JSON.parse(data);
        },

=> Check and try with this.

Upvotes: -1

Related Questions