SyntaxError: Unexpected token " [ " in JSON - Javascript

Question

I am trying to retrieve the data from database. Whatever data I retrieve, I put that data into array and then apply json_encode($data). I successfully get Array of Objects in the response as a text. But when I try to JSON.parse(response) I get an error which which says unexpected token [.

First I thought that the data will be already parsed so I tried console.log(response[0]) in order to print the first object, but the result was [. I don't know what's the problem.

My question might be same to others, but I tried all possible solutions, and couldn't solve it through those answers.

My PHP code :

public

function showDeposits($db_conn) {

  $sql = "SELECT * FROM `deposit`";

  if ($db_conn - > query($sql)) {
    $r = $db_conn - > query($sql);
    if ($r - > num_rows > 0) {
      $data = array();
      for ($i = 0; $i < $r - > num_rows; $i++) {
        $data[] = $r - > fetch_assoc();
      }
      echo json_encode($data);
    }
  }

}

My Javascript code :

this.depositForm = function() {
  var form = document.querySelector("#dep_form");

  form.addEventListener("submit", function(e) {
    e.preventDefault();
    var json = {
      time: getTime().text,
      stamp: getTime().stamp,
      date: getDate().dateText,
      data: JSON.parse(toJSONString(this))
    };
    fetch("model.php", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(json)
    }).then(function(t) {
      t.text().then(function(res) {
        var j = JSON.parse(res);
        console.log(j);
      })
    })

  })

}

The response

Try console.log(res) at the bottom there - sounds like it's not valid JSON. — CertainPerformance
– CertainPerformance, Commented Oct 28, 2018 at 7:25
Yep, that's the issue. The {"success":true} should not be at the beginning there - remove whatever's adding it and things might work. — CertainPerformance
– CertainPerformance, Commented Oct 28, 2018 at 7:28
Oh, I got the problem, I was sending two responses at one call... — Nadeem Ahmad
– Nadeem Ahmad, Commented Oct 28, 2018 at 7:28

felixmosh · Accepted Answer · 2018-10-28 07:31:18Z

1

Instaed of using .text() and then parsing it, you just can use .json

this.depositForm = function() {
  var form = document.querySelector("#dep_form");

  form.addEventListener("submit", function(e) {
    e.preventDefault();
    var json = {
      time: getTime().text,
      stamp: getTime().stamp,
      date: getDate().dateText,
      data: JSON.parse(toJSONString(this))
    };
    fetch("model.php", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(json)
    })
    .then((res) => res.json())
    .then((data) => console.log(data))
  })
}

small tip: You should use promise chaining.

answered Oct 28, 2018 at 7:31

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

SyntaxError: Unexpected token " [ " in JSON - Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related