php

javascript

ajax

arrays

dom

Best way to transfer an array between PHP and Javascript

Viewed 73 times

So I have an array of records retreived from a database. The array is in the format;

$rows[0]['id']=1;
$rows[0]['title']='Abc';
$rows[0]['time_left']=200;


$rows[1]['id']=2;
$rows[1]['title']='XYZ';
$rows[1]['time_left']=300;
//And so on upto 10-20 rows

What's the best way of transferring this array over to my javascript code? I'd like the javascript to be able to loop through all of the records, and using the 'id' attribute, update the div with that id with some information.

My javascript code is in an external .js file, but i'm able to execute php code in the HTML code of my page. So I could do something like this:

In my_file.js:

var rows=New Array();

In HTML code:

<html>
<head>
<script type="text/javascript" src="js/my_file.js"></script>

<script type="text/javascript">
<? foreach ($rows as $row):?>
<? extract($row);?>
rows[<?=$id;?>]['title']="<?=$title;?>";
//And so on
<? endforeach;?>
</script>

Answers

I tend to use a JSON object for this:

On the server side, JSON encode your data: json_encode($data);
On the JavaScript side, I write a function that takes a JSON object as a parameter and unpack it.

When you unpack the object, you can print the array's contents into a <DIV> tag, or where ever you would like on the page (jQuery does a pretty sweet job of this).

Saturday, August 13, 2022

junchao1507-b1cf9dcad180

If your array has more then 1 dimension or is an associative array you should use JSON.

Json turns a complete array structure into a string. This string can easily send to your php application and turned back into a php array.

More information on json: http://www.json.org/js.html

var my_array = { ... };
var json = JSON.stringify( my_array );

In php you can decode the string with json_decode:

http://www.php.net/manual/en/function.json-decode.php

var_dump(json_decode($json));

Sunday, November 27, 2022

tech_noob

I had the same question a few months ago, and answered it for myself after some tinkering and research.

I used Node.js in combination with PHP.

Basically, it works like this. Apache/php send a page to the client on request. It contains an auth token. The browser Initializes socket.io and sends the token back to a node js server. Node then sends the token to a private API (if you will) to the Apache server requesting needed context on the user (user id for example). When node gets this back, it stores it in a "connection ID" => "user ID" table. (or routing table (fancy specific term for a hash map))

If a user sends a "chat" message to another user, it goes to Apache via ajax, does the database/processing stuff, then passes it back to Node.js on the back-end which plugs the user id into the routing table and sends the message to the users browser.

I cant post code because this may be used in production at some point but that Is how I did it with a LAMP based server.

NOTES: You will need to have a string account management system implemented for this to work, and I implemented this concept for my own account handling system so it is very application specific in my case.

The need for the token is for security. This token for example could be a sessions ID. Something that can derive the user ID on the back-end, but not on the front end. It should change periodically. This way, if it is compromised, the attacker wont be able to connect to the live session for long, or at all.

This concept can be improved. Such as a per-request token, that changes on every request that may only be used once. This is currently something I am working on with my live notification system.

Wednesday, November 30, 2022

nathancy

The best way depends on your architecture but in order to give you an idea, take a look at this example:

@Injectable()
export class MyService {
    public invokeEvent:Subject<any> = new Subject();
    constructor() {}
}

Component1: pushes something to an array

setInterval(()=>{
    array.push(this.counter++);
    this._myService.invokeEvent.next(array);
},1000);

Component2: listens the array

this._myService.invokeEvent.subscribe((value) => {
     console.log(value); 
     this.anotherName = value;
});

Plunker example: http://plnkr.co/edit/EVC7UaO7h5J57USDnj8A

Thursday, August 11, 2022

sfreeman

The problem is in your PHP - you are using echo on an array. Instead use var_dump.

<?php
    $n=$_POST['array1'];
    var_dump($n);
?>

Tuesday, December 20, 2022

jroot

Only authorized users can answer the search term. Please sign in first, or register a free account.

Not the answer you're looking for? Browse other questions tagged :

php