Pasar una variable de PHP a una variable JAVASCRIPT

[faty912]

Buen Dia,

estoy realizando un proyecto y me tope con el siguiente problema: tengo un archivo PHP que me contruye una variable con esta estructura:

[{source: "Marina_Shopping", target: "Funchal", type: "Is_In"},{source: "Marina_Shopping", target: "Avenida_do_Mar", type: "Is_Accessible_From"},{source: "Marina_Shopping", target: "Avenida_Arriaga", type: "Is_Accessible_From"},]

el objetivo es pasar esa estructura desde ese archivo PHP, hasta otro HTML que en si contiene codigo JAVASCRIPT para contruime la visualizacion que quiero. estoy usando la biblioteca D3.js, que me crea una visualizacion basada en esa estructura.

parte del codigo jascript es asi:


<script type="text/javascript">

var links = //AQUI ES DONDE DEVE RECIBIR LA VARIABLE PHP


var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});

var w = 1500;
h = 800;

var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([w, h])
.linkDistance(250) //tamanho de las lineas
.charge(-1800) //organizacion de las lineas
.on("tick", tick)
.start();

//.......
</script>


ya intente varias formas de hacerlo pero no me ha funcionado. espero que me consigan ayudar porque realmente estoy lo estoy necesitado!!

Gracias de antemano.

[GatorV]

No puedes imprimir cosas de PHP en un archivo con extensión .html, la idea es que uses archivos .php para que sean pre-procesados en el servidor y solo se envié el html resultante.

Una vez que lo hagas en un archivo PHP, es algo trivial, solamente imprimes tu variable:

Código PHP:

<script type="text/javascript">
 
var links = <?php echo $variablequetieneelcodigojs; ?>;
 

Saludos.

[faty912]

Iniciado por GatorV

No puedes imprimir cosas de PHP en un archivo con extensión .html, la idea es que uses archivos .php para que sean pre-procesados en el servidor y solo se envié el html resultante.

Una vez que lo hagas en un archivo PHP, es algo trivial, solamente imprimes tu variable:

Código PHP:

<script type="text/javascript">
 
var links = <?php echo $variablequetieneelcodigojs; ?>;
 

Saludos.

Buen dia,

Primeramente gracias por ayudarme. Esta forma de imprimir la variable ya la he intentado varias veces sin resultado. Que tendria que hacer en el archivo PHP? para que me resulte. Disculpa es que no tengo mucha experiencia.

[somosmente]

tal vez no te de resultado si no tienes un servidor local para probar, prueba en el servidor online

[AlanChavez]

No te compliques la vida y utiliza AJAX.

OBviamente tu estructura es JSON, por lo que Javascript la soporta nativamente. Lo unico que tienes que hacer es decirle a Javascript de donde leerla.

si creas una pagina en PHP que regrese esa estructura solamente y ponga los encabezados para JSON, usando jQuery lo unico que tienes que hacer es:

Código Javascript:

$.ajax({
      url: "tuScript.php"
      }).done(function(datos) {
          console.log(datos.source, datos.target, datos.type);
       });
 

[faty912]

Iniciado por AlanChavez

No te compliques la vida y utiliza AJAX.

OBviamente tu estructura es JSON, por lo que Javascript la soporta nativamente. Lo unico que tienes que hacer es decirle a Javascript de donde leerla.

si creas una pagina en PHP que regrese esa estructura solamente y ponga los encabezados para JSON, usando jQuery lo unico que tienes que hacer es:

Código Javascript:

$.ajax({
      url: "tuScript.php"
      }).done(function(datos) {
          console.log(datos.source, datos.target, datos.type);
       });
 

Gracias por tu consejo..

efectivamente ya encontre una forma de enviar la variable a javascript usando AJAX, ahora mi nuevo problema surge cuando voy a usar la variable en javascript, me aparece un error diciendo:

Uncaught TypeError: Object [{source: "Marina_Shopping", target: "Funchal", type: "Is_In"},{source: "Marina_Shopping", target: "Avenida_do_Mar", type: "Is_Accessible_From"},{source: "Marina_Shopping", target: "Avenida_Arriaga", type: "Is_Accessible_From"},]


has no method 'forEach'.

tienes alguna sugestion para mi nuevo problema? gracias de antemano

[AlanChavez]

El método forEach solamente esta definido para Arrays y funciones derivadas de Arrays.

Tendrias que poner el snippet de codigo que te devuelve ese error.

[faty912]

Iniciado por AlanChavez

El método forEach solamente esta definido para Arrays y funciones derivadas de Arrays.

Tendrias que poner el snippet de codigo que te devuelve ese error.

<script type="text/javascript">


var resultado;

function captura (){



$.ajax({
async: false,
type : 'POST',
url : 'teste1.php',
data : {objid:88},
success : function (response) {

resultado=response;

}

});

return resultado;
}


var response = captura();

//alert(response);
//var links = jQuery.parseJSON(response);

var links = captura();



var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});

var w = 1500;
h = 800;

var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([w, h])
.linkDistance(250) //tamanho de las lineas
.charge(-1800) //organizacion de las lineas
.on("tick", tick)
.start();

var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);


// Per-type markers, as they don't inherit styles.
svg.append("svg:defs").selectAll("marker")
.data(["IsNext", "IsIn", "resolved", "IsAccessibleFrom"])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 15 20")
.attr("refX", 60)
.attr("refY", -5)
.attr("markerWidth", 8) //tamanho dos marcadores (puntadores de las flechas)
.attr("markerHeight", 8)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,8");

var path = svg.append("svg:g").selectAll("path")
.data(force.links())
.enter().append("svg:path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

var circle = svg.append("svg:g").selectAll("ellipse")
.data(force.nodes())
.enter().append("svg:ellipse")
.attr("rx", 70) //tamanho das elipses
.attr("ry", 35)
.call(force.drag);

var text = svg.append("svg:g").selectAll("g")
.data(force.nodes())
.enter().append("svg:g");

// A copy of the text with a thick white stroke for legibility.

text.append("svg:text")
.attr("x", 8)
.attr("y", ".31em")
.attr("class", "labels")
.attr("text-anchor", "middle")
.text(function(d) { return d.name; });



// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
path.attr("d", function(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
});

circle.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});

text.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}

</script>


este es el codigo que estoy utilizando...