JQuery para visualizar JSON

[hwolowitz]

Buenas:
Tengo una duda que para muchos sería una obviedad, pero me tiene ya con dolor de cabeza. Estoy medio haciendo una aplicación web con archivos PHP que se conectan directamente a la BBDD; me gustaría manejar esos datos con jQuery, pero no sé como.
La solucion que se me ocurrió fue dividir en 2 el archivo PHP original y desde él llamar a $.ajax() para poder manipular el JSON que devuelve el otro archivo PHP... pero esto es improductivo.
¿habria alguna manera de que el archivo PHP devuelva un objeto JSON y manejarlo directamente con jQuery? ... sin AJAX

[Alexis88]

Primero tendrías que explicar qué estás tratando de hacer, pues, sí se puede trabajar con objetos JSON tanto en JS como en PHP; pero, debido a que un lenguaje trabaja en el lado del cliente y el otro en el del servidor, lo ideal para trabajar con ambos a la vez es usar peticiones asíncronas (AJAX).

[hwolowitz]

OK, @Alexis88... a ver si me explico:
estoy inmerso en un proyecto que espero que tenga mucho tráfico, el cual generará el 99% de los contenidos; la parte de servidor la programo en PHP, y la de cliente en JS (jQuery). Mi idea es que casi todos los datos obtenidos por el servidor de la BBDD se envíen al cliente en forma de objetos JSON, con el mínimo procesamiento posible... y después que el navegador haga "cosas" con ellos, a través de jQuery.
La aplicación será diferente para usuarios o para visitantes:
Los visitantes solo pueden acceder a opciones básicas, por lo tanto no "interactúan"... solo reciben datos. Por ejemplo, cuando un visitante accede al index.php, el servidor se conecta a la BBDD y devuelve cosas ya procesadas, pero también devuelve un objeto con datos, que no sé como manejar en el lado cliente.
Los usuarios intercambian datos con la aplicación, por tanto utilizo AJAX con ellos (esto sé como hacerlo).
Las preguntas serían:
¿se pueden manejar objetos JSON "internos" de un archivo con jQuery? ¿Cómo se podría hacer?

[Alexis88]

Si al cargar la página o al hacer una determinada acción obtendrás los datos en un objeto JSON desde la BD provenientes de la respuesta de una petición asíncrona al servidor mediante PHP y tan solo deseas leerlos y manipularlos en el lado del cliente, solo tienes que, primero, usar la función json_encode() en el lado del servidor (PHP) para retornar un objeto JSON; mientras que, en el método $.ajax(), debes especificar el valor del atributo dataType como "json":

Código PHP:

$results = mysqli_query($connection, $query) or exit(mysqli_error($connection));
if (mysqli_num_rows($results)){
    $response = [];
    while ($rows = mysqli_fetch_assoc($results)){
        $response[] = $rows['field'];
    }
    mysqli_free_result($results);
    echo json_encode($response);
}
 

Código Javascript:

$.ajax({
    url: "example.php",
    dataType: "json"
}).done(function(response){
    $.each(response, function(key, value){
        console.log(value); //Each data
    });
});
 

[hwolowitz]

Muchas gracias por la respuesta.
Esto que me dices es lo que hago, pero mi duda no es esa. Intentaré explicarme mejor:
En el index.php se llama a una función que devuelve un objeto a través de json_encode($var); esto lo guardo en un div.
Al final del index.php, llamo a un script jQuery, y con él quiero acceder a ese objeto JSON, sin peticiones AJAX, porque el servidor ya me lo mandó previamente.
Si parto el index.php en 2, separando la función que devuelve el objeto JSON en el otro archivo.php y la llamo desde el script con $.ajax (), funciona... pero tengo una consulta extra a la BB.DD. y además, hay que ejecutar el jQuery sobre ella tras haber hecho la consulta asíncrona. No es productivo.
Mi pregunta es:
¿existe alguna forma de acceder y tratar directamente un objeto JSON en jQuery, sin utilizar AJAX? ¿Como se haria?
¿a alguien se le ocurre alguna solucion para poder acceder y manejar el contenido del objeto JSON del div?
Gracias

[Alexis88]

¿Cómo almacenas el JSON en un <div>?

Es decir, un elemento HTML no es una variable, por lo que asumo que lo guardas como contenido. Partiendo de cómo lo guardas, podría probarse una solución que consistiría en leer el contenido del elemento.

[hwolowitz]

En el index.php, con un "echo" genero el "div id" y dentro de éste llamo a la función que devuelve el objeto JSON con json-encode($var); después, guardo $("#idDiv") en una variable y le aplico $.parseJSON ()... que es donde deja de funcionar y me tiene perdido
Puede que esté haciendo mal desde el principio, pero ya no se me ocurre más nada

[Alexis88]

No tiene sentido el parsear un elemento HTML. Ni siquiera porque contenga información.

Una manera sucia de hacer lo que buscas consiste en asignar directamente el valor generado con PHP en una variable JS:

Código Javascript:

var foo = <?php echo $foo; ?>
 

Aunque lo ideal, para mantener un orden y legibilidad, que es ambos códigos se mantengan aislados, trabajando con código PHP en un archivo PHP y con JS en un archivo JS, para lo cual sería necesaria una petición asíncrona.

[hwolowitz]

O sea... que no existe una manera de trabajar un objeto JSON con jQuery a no ser que se reciba en una petición asíncrona?

[Alexis88]

Sí se puede, solo que tú pretendes trabajar en el lado del cliente con un valor generado en el lado del servidor de forma directa. Es por eso que te propuse esa forma sucia de hacerlo, o puedes optar por AJAX.

[hwolowitz]

O sea, que salvo mezclando PHP y JS no podría ahorrarme la segunda consulta a la BBDD... aunque tuviese ya los datos en el cliente?

[Alexis88]

Mientras no guardes los datos de la consulta en una variable JS, no los tendrás en el lado del cliente.

[hwolowitz]

Los datos están en una variable JS; también se visualiza el objeto JSON en el navegador, y el formato es correcto (lo he validado online y con AJAX va bien... pero son 2 consultas)
Lo que no sé es como acceder a este objeto desde el cliente

[Alexis88]

Por ahí hubieras empezado.

Si deseas iterar, solo utiliza una estructura cíclica. Por ejemplo:

Código Javascript:

var obj = {
    foo: "bar",
    bin: "baz"
};
 
for (var prop in obj){
    console.log(prop + ": " + obj[prop]);
}
 

El resultado será el siguiente:

Código Web console:

foo: bar
bin: baz
 

Y, si deseas acceder directamente a una propiedad, puedes usar la notación por puntos o por corchetes:

Código Javascript:

objeto.propiedad; //Por puntos
objeto[propiedad]; //Por corchetes
 

[hwolowitz]

Gracias.
Ya he provado con un "for" y a acceder a los datos así... igual que al trabajar con AJAX, pero no da resultado. Cuando llegue a casa pego algo de código, a lo mejor es un punto o una coma de esas que sieeeeeeeempre me vuelven loco...

[Alexis88]

No olvides parsear al objeto para poder iterarlo.

[hwolowitz]

Esto es lo que tengo:
index.php: se conecta automáticamente a la BBDD, y llama a get_recCat() para mostrar el objeto JSON

Código PHP:

...
echo "<div id='recCat'>";
    echo"<div id='categoria'></div>";
    get_RecCat($idRecCat);
echo "</div>";
<script type="text/javascript" src="jquery/categoria.js"></script>
 

La función get_RecCat($idRecCat):

Código PHP:

... ...
echo json_encode($recPresObj);
 

El objeto JSON se muestra al ir a http://localhost/index.php, pero no sé acceder a él con jQuery... ¿cómo puedo hacer?

[Alexis88]

Intenta así:

Código Javascript:

var json = JSON.parse(<?php get_RecCat($idRecCat); ?>);
 

[hwolowitz]

¿donde pongo ese código? ¿dentro del archivo en jQuery, o en un script en JavaScript?
¿eso dentro de un archivo *.js se ejecutaría?
He probado a meterlo en el archivo en jQuery y no va; en un script JS en el index.php y tampoco

[Alexis88]

Por una cuestión lógica, como un script insertado en el archivo PHP, tal y como indicas al final que hiciste, sí debería funcionar. Quizá si muestras el código actualizado y los resultados de la depuración del mismo, se te pueda ayudar.