1

Muy buenas a todos, Dios los bendiga!, Sucede que estoy siguiendo un tutorial al pie de la letra pero estoy teniendo problemas a pesar de que copio todo como es, Estoy intentando enlistar todas las tareas que estan en la DB, La cual tiene los datos correctamente insertados, Tambien tengo la conexion correctamente ya que la he utilizado antes para insertar las nuevas tareas, Y bueno, el problema lo tengo al usar JSON.parse(); en una peticion AJAX, Ya revise que el problema no fuera del servidor y vi que el codigo esta bien, Ya le he dado muchas vueltas y deseo que puedan ayudarme, Muchas gracias.

Script DB

CREATE DATABASE IF NOT EXISTS php_tests;
USE php_tests;
CREATE TABLE IF NOT EXISTS tasks(
    ID          INT(11) AUTO_INCREMENT NOT NULL,
    Title       VARCHAR(100) NOT NULL,
    Description VARCHAR(255) NOT NULL,
    CONSTRAINT pk_tasks PRIMARY KEY(ID)
);

Conexion a la DB

<?php

$connection = mysqli_connect(
    'localhost',
    'root',
    'admin',
    'php_tests'
);

Codigo del servidor que envia el array a el archivo JS

<?php

require_once 'connection.php';

$query = "SELECT * FROM tasks";
$result = mysqli_query($connection, $query);

if (!$result) {
    die('Query Failed' . mysqli_error($connection));
}

$json = array();

while ($row = mysqli_fetch_array($result)) {
    /* $json = array($row['ID'], $row['Title'], $row['Description']); */

    $json = array(
        'ID'=>$row['ID'],
        'Title'=>$row['Title'],
        'Description'=>$row['Description']
    );

    /* var_dump($json); */

    $jsonstring = json_encode($json);
    echo $jsonstring;
}

Peticion AJAX (Archivo JS)

$.ajax({
    url: 'task_list.php',
    type: 'GET',
    success: (response) => {
        let tasks = JSON.parse(response);
        let template = '';

        tasks.forEach(task => {
            template += 
            `
            <tr>
                <td>${task.ID}</td>
                <td>${task.Title}</td>
                <td>${task.Description}</td>
            </tr>
            `;
        });
        $('#Tasks').html(template);
    }
});

Error en consola

SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 79 of the JSON data
11
  • ¿Que error te da? Commented el 4 mar. 2019 a las 9:22
  • Disculpa el error @FranciscoGarrido, Ya lo agregue en la edicion :)
    – Adax
    Commented el 4 mar. 2019 a las 9:32
  • puedes dar ejemplos de los datos en BD y lo que intentas recuperar, comparado con lo que ahora mismo estás consiguiendo ?
    – lois6b
    Commented el 4 mar. 2019 a las 9:33
  • Entonces los datos no estan llegando del todo bien. Prueba añadiendo esto al principio de tu archivo pvp header('Content-Type: application/json');. Tambien seria util que hicieras un console.log del response. Commented el 4 mar. 2019 a las 9:34
  • 1
    En el servidor dentro del while sólo estas cogiendo un dato, tedrías que cambiar los siguiente para coger todos los task: $json[] = array(..); Commented el 4 mar. 2019 a las 9:47

2 respuestas 2

1

Prueba realizando los siguientes cambios en el archivo php.

<?php

header('Content-Type: application/json');

require_once 'connection.php';

$query = "SELECT * FROM tasks";
$result = mysqli_query($connection, $query);

if (!$result) {
    die('Query Failed' . mysqli_error($connection));
}

$json = array();

while ($row = mysqli_fetch_array($result)) {
    /* $json = array($row['ID'], $row['Title'], $row['Description']); */

    $json[] = $row;

    /* var_dump($json); */


}

$jsonstring = json_encode($json);
echo $jsonstring;

?>

Y estos en el archivo JS.

$.ajax({
    url: 'task_list.php',
    type: 'GET',
    contentType: "application/json",
    success: (response) => {
        let tasks = response;
        let template = '';

        tasks.forEach(task => {
            template += 
            `
            <tr>
                <td>${task.ID}</td>
                <td>${task.Title}</td>
                <td>${task.Description}</td>
            </tr>
            `;
        });
        $('#Tasks').html(template);
    }
});

Así nos aseguramos de que el archivo PHP envía un JSON y que el JS es lo que espera. Ademas, no es necesario parsear a JSON ya que este viene listo.

6
  • Segui las recomendaciones de los dos y ahora ya entra a la funcion success pero ahora el console error es este:
    – Adax
    Commented el 4 mar. 2019 a las 10:20
  • SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
    – Adax
    Commented el 4 mar. 2019 a las 10:20
  • pon un console.log(response); antes del JSON.parse, para que te salga por la consola el resultado que te llega al ajax, y asi vemos si tiene mal formato lo que llega, ok?
    – Jakala
    Commented el 4 mar. 2019 a las 10:22
  • Entonces creo que no te hace falta usar el JSON.parse(). Ya deberia estar parseado Commented el 4 mar. 2019 a las 10:45
  • @FranciscoGarrido, Y tu respuesta fue la correcta! Muchas gracias, Tambien tenia mi duda sobre por que pareciera estar convirtiendo a JSON 2 veces en el tutorial, Francisco, Escribe o modifica una respues para marcarla como correcta, Muchas gracias! Dios te bendiga :)
    – Adax
    Commented el 4 mar. 2019 a las 15:58
1

Por cada petición de Ajax necesitas obtener un resultado y en el caso en el que has puesto estas haciendo un echo por cada dato de los task que obtienes. Prueba a sacar el encode y el echo fuera del while.

<?php

require_once 'connection.php';

$query = "SELECT ID, Title, Description FROM tasks";
$result = mysqli_query($connection, $query);

if (!$result) {
    die('Query Failed' . mysqli_error($connection));
}

$json = mysqli_fetch($result);

$jsonstring = json_encode($json);
echo $jsonstring;

Además si te traes la consulta con los tres datos que necesitas no es necesario crear un array con los datos obtenidos en la consulta.

3
  • Gracias por el recorte en cuanto al array del JSON, EN vez de usar var_dump use echo, copie el JSON lo valide en la pagina que compartiste y salio correcto,Cerre y saque del bucle While a $jsonstring como lo dijieron y ahora si entro a la funcion success, Pero ahora el console error es otro:
    – Adax
    Commented el 4 mar. 2019 a las 10:18
  • SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
    – Adax
    Commented el 4 mar. 2019 a las 10:19
  • El fecj_array te trae en formato array y con el cambio que he hecho te trae un obtjeto, prueba a ver si te funciona. Commented el 4 mar. 2019 a las 15:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.