You're basically there, right?
You've declared an object called data, which has 2 properties:
You want to have an array of these objects, so PHP receives the whole lot in one go.
var json = {
gameResults: []
};
$("li").each(function (i, li) {
json.gameResults.push($(li).data('gameresult'));
});
This gives you a JSON object with everything as an array:
{"gameResults":["2:0","1:0","0:0","1:3"]}
Alternatively you can have an array of objects, so each ID/gamescore pair is maintained:
$("li").each(function (i, li) {
json.gameResults.push({
id: $(li).data('id'),
gamescore: $(li).data('gameresult')
});
});
...which gives:
{"gameResults": [
{"id":1,"gamescore":"2:0"},
{"id":3,"gamescore":"1:0"},
{"id":4,"gamescore":"0:0"},
{"id":5,"gamescore":"1:3"}
]}
Then just pass json to jQuery as your data value.
On the PHP side, you'll receive a post object with this associative (or numerically indexed) array - which you can craft into a bulk SQL insert.
JSFiddle demo:
Update: Processing on the PHP side.
To get the object to your PHP script, adjust your AJAX request like so:
$.ajax({
type:"POST",
url: "file.php",
data: json,
success: function(data) {
document.write("<pre>" + data);
}
});
(Note I've changed data: ... and added success: .... We now pass the json variable as the data property, and use a call-back to handle a successful AJAX request. I won't go into detail on this subject - but rather point you to the jQuery documentation. You should handle errors etc as well - everything you need is on that link.)
file.php will receive a POST request - which in PHP means there's an automagical global variable called $_POST which will contain some data from the AJAX request. Again, I won't repeat what's in the PHP documentation - but just remind you to validate and sanitize everything - you absolutely must not trust this data implicitly. It could be anything, from anywhere, and it could be evil (like a SQL injection).
I've written a test file.php script:
<?php
var_dump($_POST);
Making a successful AJAX request to it (using the exact JavaScript above) returns some data (which appears in the JavaScript success call-back in the data parameter):
array(1) {
["gameResults"]=>
array(4) {
[0]=>
array(2) {
["id"]=>
string(1) "1"
["gamescore"]=>
string(3) "2:0"
}
[1]=>
array(2) {
["id"]=>
string(1) "3"
["gamescore"]=>
string(3) "1:0"
}
[2]=>
array(2) {
["id"]=>
string(1) "4"
["gamescore"]=>
string(3) "0:0"
}
[3]=>
array(2) {
["id"]=>
string(1) "5"
["gamescore"]=>
string(3) "1:3"
}
}
It's getting a bit inception-like now ... so I'll explain what's happened.
The browser's JavaScript engine has grabbed the data from the li elements, crafted a JSON object, submitted it (asynchronously in the background - via AJAX) to file.php, which has literally "dumped" all the data it received back to the browser.
The document.write(...) was just a quick hack to debug what came back from file.php - or put it another way, it just outputs the PHP var_dump(...) result to the browser screen. Behind the scenes, there's been a request made to the PHP script, some server-side processing, a response made back and then some client-side processing to finish! #winning
On the PHP side then, we can process the $_POST object (remembering to sanitize everything!) like a normal PHP array:
foreach ($_POST['gameResults'] as $gameResult) {
print $gameResult['id'] . ' ==> ' . $gameResult['gamescore'] . "<br>";
}
We get output like this:
1 ==> 2:0
3 ==> 1:0
4 ==> 0:0
5 ==> 1:3
(We've just iterated the game results on the PHP side and formatted them as very basic HTML.)
I guess at this point you want to build a big bulk SQL insert? That's a bit much for me to go into in this single post - so I'll suggest you search stackoverflow (or open a new question) to find out about that.
Happy coding!
