Parsing JS array with JS and then passing it to PHP - javascript

I'm making a system for calculating road taxes in the netherlands, there for i got a few JS arrays (where the data is in) which i'm parsing with JS (all at the same time, because it's the same format of data), then passing it to PHP as JSON format using the XMLHttpRequest object.
For this i first made this data mapper:
var roadTaxData = {
provinceWeightFuelPricesData: {
personen_auto: {
noord_holland: dataNoordHolland,
zeeland: dataZeeland
//TODO: Add all the provinces with it's data to the personen_auto object
},
kampeer_auto: {
noord_holland: dataNoordHolland2,
zeeland: dataZeeland2
}
}
}
The format of this is:
Vehicle type
Which province
The data belonged to that province.
I've then made this small parser to parse it to an array:
/*
Loop through all the specific vehicle types inside the provinceWeightFuelPricesData object
*/
for (var vehicleType in roadTaxData.provinceWeightFuelPricesData) {
/*
Where the data is getting stored for each vehicle type
*/
var data = {},
/*
Every province with its data contained in the vehicle type
*/
provinces = roadTaxData.provinceWeightFuelPricesData[vehicleType];
/*
Loop through all province's with its data in the specific vehicle type
*/
for (var province in provinces) {
/*
Define each province data
*/
var provinceData = provinces[province];
/*
Add the province to the object as an key
*/
data[province] = [];
/*
Loop through the data which belongs to every province
*/
for (var provinceDataIndex = 0; provinceDataIndex < provinceData.length; provinceDataIndex++) {
/*
Add the province data to the array
*/
data[province].push(provinceData[provinceDataIndex]);
}
console.log('Parsed a the province: ' + province + " from the vehicle type " + vehicleType);
console.log('');
}
console.log('Parsed the vehicle type: ' + vehicleType);
console.log('');
console.log(data);
passToPHP(vehicleType, JSON.stringify(data));
}
This is all going great, and gives me back the correct array with data when i do this:
console.log(data);
But when i've passed it to PHP with this method:
function passToPHP (paramName, data) {
if (typeof paramName === "string" && typeof data === "string") {
var httpc = new XMLHttpRequest(); // simplified for clarity"
httpc.open("POST", INSTALL_FILE, true); // sending as POST
httpc.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
/*
For testing
*/
httpc.onreadystatechange = function () { //Call a function when the state changes.
if (httpc.readyState == 4 && httpc.status == 200) { // complete and no errors
console.log(httpc.responseText); // some processing here, or whatever you want to do with the response
}
};
httpc.send(paramName + "=" + data);
}
}
With this PHP file:
header('Content-Type: application/json');
$personen_auto = $_POST['personen_auto'];
$kampeer_auto = $_POST['kampeer_auto'];
print_r(json_decode($personen_auto));
print_r(json_decode($kampeer_auto));
I get this error first, which doesn't reconize the kampeer_auto index from $_POST, which i actually send:
Notice: Undefined index: kampeer_auto in
C:\Users\Bas\Documents..\Cars\install.php on line 6
Then the data log of the personen_auto object.
Then another error with this message, which does't reconize the personen_auto index, which i also just parsed and printed out?
Notice: Undefined index: personen_auto in
C:\Users\Bas\Documents..\Cars\install.php on line 5
Questions
How does this come that it doesn't reconize those $_POST variables?
How will i be able to make PHP receive more then only 1 $_POST index at the time?
My own try
I've tried putting the passPHP() method outside of the for loop, like this:
/*
Loop through all the specific vehicle types inside the provinceWeightFuelPricesData object
*/
for (var vehicleType in roadTaxData.provinceWeightFuelPricesData) {
/*
Where the data is getting stored for each vehicle type
*/
var data = {},
/*
Every province with its data contained in the vehicle type
*/
provinces = roadTaxData.provinceWeightFuelPricesData[vehicleType];
/*
Loop through all province's with its data in the specific vehicle type
*/
for (var province in provinces) {
/*
Define each province data
*/
var provinceData = provinces[province];
/*
Add the province to the object as an key
*/
data[province] = [];
/*
Loop through the data which belongs to every province
*/
for (var provinceDataIndex = 0; provinceDataIndex < provinceData.length; provinceDataIndex++) {
/*
Add the province data to the array
*/
data[province].push(provinceData[provinceDataIndex]);
}
console.log('Parsed the province: ' + province + " from the vehicle type " + vehicleType);
console.log('');
}
console.log('Parsed the vehicle type: ' + vehicleType);
console.log('');
//console.log(data);
}
passToPHP(vehicleType, JSON.stringify(data));
But that passed only one variable to PHP (which was kampeer_auto).

the code is sending only one vehicleType per call to php. The relevant code is
for (var vehicleType in roadTaxData.provinceWeightFuelPricesData) {
data = ...
passToPHP(vehicleType, JSON.stringify(data));
}
The first call passes 'personen_auto' only (and kampeer_auto is undefined); the second call passes only 'kampeer_auto' and personen_auto is undefined.
The revised version of the code that moves passToPHP outside the loop still resets data each time through the loop, so at the bottom data will contain only the very last auto's provinces.
To pass all autos, data needs to be appended to (not re-initialized), data has to be gathered into auto-specific sections (not intermingled), and passToPHP needs to build a multi-parameter query string, one per auto. All that will pretty much rebuild the roadTaxData object.
Or just pass all of roadTaxData.provinceWeightFuelPricesData to php and have php loop and separate the auto types.
Edit: you don't need to convert objects to arrays when passing them to php. Php's json_decode() can decode objects into associative arrays when the optional second parameter is set to true, as json_decode($data, true). Simply
passToPHP('json', JSON.stringify(roadTaxData.provinceWeightFuelPricesData));
and in php
$data = json_decode($_POST['json'], true);
$kampeer_auto = $data['kampeer_auto']);
$personen_auto = $data['personen_auto']);

try passing the data to php as an un-parsed json string, and parse it explicitly with json_decode.
So send a single $_POST parameter json=string (string is the urlencoded JSON.stringify of the data), and have php decode json_decode($_POST['json'], true). That should return an array that represents the js object.

Try putting declaration for data outside the loop. It's currently getting reset/cleared for each entry in roadTaxData.provinceWeightFuelPricesData so you will only ever send the last entry to the server.
var data = {};
for (var vehicleType in roadTaxData.provinceWeightFuelPricesData) {
Then, as #Andras suggested, you need to decode the JSON on the server side:
$data = json_decode( $_POST['json'], true );
$personen_auto = $data['personen_auto'];
$kampeer_auto = $data['kampeer_auto'];

Related

I want to fetch specific data from JSON file and add it to another JSON file/variable

so i want to fetch data from this api:
http://csgobackpack.net/api/GetItemsList/v2/
Its large database so i want to get only a few information for every item, like 7days price. And than save it in my file. But when i use empty obect the very first object in variable is
"[object][object]"
Request.get("http://csgobackpack.net/api/GetItemsList/v2/", {
json: true
}, (error, response, body) => {
csgo = new Object();
if(body['success']) {
for(let key in body.items_list)
csgo+=("\"" + body.items_list[key].name + "\" :{"
"\"icon\"" + ":" + "\"" + body.items_list[key].icon_url + "\","+
"\"exterior\"" + ":" + "\"" + body.items_list[key].exterior + "\"}"
}
JSON is still the source of much confusion unfortunately. JSON is text. Text that happens to be using a syntax that is very similar to how Objects are defined in JavaScript.
The code you have uses json: true, and Request.get consequently parses the reply into an Object for you. This becomes clear when you use if (body['success']), since if the API response were a string still, there wouldn't be a success property.
Which means JSON is completely out of the picture now, we're only dealing with JavaScript objects. We can access their properties using dot or brackets notation, and construct new ones.
Here's code that will grab the first 5 items and log the result:
const Request = require("request");
Request.get("http://csgobackpack.net/api/GetItemsList/v2/", { json: true }, (error, response, body) => {
// body contains the JSON reply already parsed into a JS Object
csgo = new Object();
if (body['success']) {
var limit = 5;
for (let key in body.items_list) {
// shorter way to grab multiple properties
const { icon_url, exterior } = body.items_list[key];
// add child to csgo
csgo[key] = { icon: icon_url, exterior }; // OR: exterior: exterior
if (--limit === 0) break;
}
console.log(csgo);
}
});
The key part is
csgo[key] = { icon: icon_url, exterior };
A new property is added to the object and set to the specified object literal.

How to change value of Object inside an Array?

I want to change the values of the objects inside an array. I have created an object which I insert in every loop in an array.
If encountered with a missing value, I want to update the values of the existing object.
When the loop runs, it always enters the last object details from the api into the array.
Here; the screenshot: https://i.imgur.com/8uqOIaZ.png
var msg = data.message; // messages array from api
let body;
let posts = [];// empty array created
//object structure
let post ={
id:'',
desc: '',
creator: '',
time: '',
likes: 0,
attachment: '',
};
for(let i in msg){
if(msg[i].body.includes(':')){ //if message body include object notation ':'
body = JSON.parse(msg[i].body); // parse text message body into json
if(body.contentDescription){ //if content is true
post.id = body.postId; //id
post.creator = body.createdUserName; //post creator
post.time = body.publishedDate; //post publish date
post.desc = body.contentDescription; //post content
posts.push(post);
}
else if(posts.length > 1){
for(let j in posts){
if(posts[j].id === body.postId){
console.log(posts[j].id);
if(body.likeCount){ //if likeCount is true
posts[j].likes += 1; //increase like count
}else if(body.attachmentId){ //of Attachment is true
posts[j].attachment = body.attachmentId; // update attachement value
}
}
break;
}
}
}
};
Please help where am I doing it wrong?
Objects in JavaScript are sent via a link to the piece of memory. So when you change your post you are changing all the posts because all of them are looking to the same piece of memory.
You can change your code in a next way so it start working correct
...
if(body.contentDescription){ //if content is true
let postItem = Object.assign({}, post); // Coping an object so breaking the memory link
postItem.id = body.postId; //id
postItem.creator = body.createdUserName; //post creator
postItem.time = body.publishedDate; //post publish date
postItem.desc = body.contentDescription; //post content
posts.push(postItem);
}
...
However, there is more than one way to skin a cat so this is not the only solution.

Getting null in when trying to get array in servlet

I have a below set of code to get the table data in an array and pass the same to servlet through ajax call. But i am getting null. Please someone help me on what my mistake / how to get the required data since i am new to this servlet and web app. So far i tried with some examples given in SO. but i am clueless to get my expected data.
var myTableArray = [];
$("table#itemtable tr").each(function() {
var arrayOfThisRow = [];
var tableData = $(this).find('td');
if (tableData.length > 0) {
tableData.each(function() { arrayOfThisRow.push($(this).text()); });
myTableArray.push(arrayOfThisRow);
}
});
alert(myTableArray);
$.ajax({
url:"insertmasteritem",
type:"POST",
dataType:'json',
data: {json:myTableArray},
success:function(data){
// codes....
},
});
Servlet code
String[] myJsonData = request.getParameterValues("json[]");
System.out.println("myJsonData.length"+myJsonData.length);
for (int i = 0; i < myJsonData.length; i++) {
String[] innerArray=myJsonData[i].split(",");
System.out.println(myJsonData[i]);
}
Send your Json data like this
$.ajax({
url:"insertmasteritem",
type:"POST",
dataType:'json',
data:myTableArray,
success:function(data){
// codes....
},
});
and In Servlet Class
JSONObject jsonObj= new JSONObject(request.getParameter("myTableArray"));
Iterator it = jsonObj.keys();
while(it.hasNext())
{
String jsonKey = (String)it.next();
String jsonValue = jsonObj.getString(jsonKey);
System.out.println(jsonKey + " --> " + jsonValue );
}
Well, you need to send a properly formatted JSON object (as a string) to the servlet. Possibly the easiest way to do this is to create some javascript objects and fill an array with these objects. The array data should then be
converted to a JSON string (using JSON.stringify). I'm going to hardcode object values (but you will get them from your table)
Javascript code
function generateJson(){
var myObjArr = [];
//you will typically have just one object (e.g. myObj, which you will fill in your ajax table loop
//myObj.v1 = v1_val;
//myObj.v2 = v2_val;
...
//myObjArr[i] = myObj; //
myObj1 = { "v1": "Orange", "v2": "ABC", "v3":10,"v4":"OK" };
myObj2 = { "v1": "Apple", "v2": "XYZ", "v3":25,"v4":"OK" };
myObjArr[0] = myObj1;
myObjArr[1] = myObj2;
var jsonObjStr = JSON.stringify(myObjArr);
//you can now use jsonObjStr to send your data to the servlet
// document.getElementById("json").innerHTML = jsonObjStr;//this is just added for testing purposes
}
The generated JSON
[{"v1":"Orange","v2":"ABC","v3":10,"v4":"OK"},{"v1":"Apple","v2":"XYZ","v3":25,"v4":"OK"}]
As you can see, the json string starts with a [ (which denotes an array). You may have to change this to start with a { (and with a } ) depending on how your JSON parser works ({} denote an object).
For the servlet part, it depends on the actual JSON parser you're using. Try to use some of the suggestions provided by others. I can provide some code using Jackson though, but you will have to add the Jackson library to your classpath.
why you are getting parameter value as JSON[]
String[] myJsonData = request.getParameterValues("json[]");

Deconstructing a JSON object

A JSON encoded array is passed from PHP to an HTML document. It is not at all clear how to deconstruct that array into javascript-usable pieces. For example, consider the following HTML:
<div id="options">{"foo":[{"id":1},{"id":3}], "bar":[{"id":2},{"id":4}]}</div>
The only a priori known element of this array is that the key id exists. The indices, I know, can be found with
var data = JSON.parse($("#options").text());
$.each(data, function(index) {
// index will be foo & bar
});
The use case is to use the index and id to add an attribute to elements in a document. I have not yet stumbled upon the technique to return the ids associated with each index. How best can that be done?
Edit - a clarification of the use case - the long story
I want to re-enable some options on a form based on properties of an entity (in a Symfony application). Disabled options cannot be modified, but are also not not persisted - their values are set to null. I've built a service to determine the option elements that are disabled and send those elements to the form document as a JSON object. I'm assuming for now that the specific options are not known until the form is created. In the example above, foo & bar represent possible options, and the ids correspond to the option. For example, a Household entity might have Reason options selected but disabled of "Low wages" (id = 3). This would show up in as ...id="options">{"reasons":[{"id":3}]}<.... I would the use this information to remove the disabled="disabled" attribute from the set of checkboxes for the Reason, id=3 (i.e., id="household_reasons_3") field. I hope this makes sense.
Edit #2, by request - the PHP code creating the object.
The result of getMetatData() appears in the document at #options. From the above edit, the Household entity is $object.
public function getMetaData($object) {
$data = array();
$className = get_class($object);
$metaData = $this->em->getClassMetadata($className);
foreach ($metaData->associationMappings as $field => $mapping) {
if (8 === $mapping['type']) {
$data[$field] = $this->extractOptions($object, $field);
}
}
return json_encode($data);
}
private function extractOptions($object, $field) {
$data = [];
$method = 'get' . ucfirst($field);
$itemName = substr($field, 0, -1);
$getter = 'get' . ucfirst($itemName);
$entity = $object->$method();
foreach ($entity as $item) {
if (method_exists($item, 'getEnabled') && false === $item->getEnabled()) {
$data[] = ['id' => $item->getId()];
}
}
return $data;
}
Long before the infinite monkey limit was reached I stumbled on a method to create the results I was looking for. My thanks go out to all who pushed for clarifications. So, for the object
{"foo":[{"id":1},{"id":3}], "bar":[{"id":2},{"id":4}]}
the script
var data = JSON.parse($("#options").text());
var i = 0
var output = [];
$.each(data, function(index, item) {
$.each(item, function(k, v) {
output[i] = "household_" + index + "_" + v.id;
i++;
});
});
output;
produces this:
["household_foo_1", "household_foo_3", "household_bar_2", "household_bar_4"]
I get the strings I need; I can take it from here.

Pass Dictionary<String,List<String>> to java script

I would like to pass a Dictionary> to client using JavaScript.
I did look at this post and I didn't understand exactly how to proceed.
In case I'm doing something wrong I'll explain what I want to do.
The dictionary contains the 'name' key of all worksheets in the Excel file, and the 'value' is the column value of the first row in that worksheet.
The UI of the client should have two "drop list", the first will contain the key which is all the names of the worksheet in the Excel file.
The second contain all the column value of the first row of the worksheets that will choose in the first drop list – which is actually a List as the value in the dictionary.
So all the back end C# code is working fine. Now I need help in the front end JavaScript.
How do I parse the data to a key value so I can do a "search" on the keys as the client chooses some "key" in the first drop list so I can get back the relevant values as a list?
Thanx!
var ajaxRequest = $.ajax({
type: "POST",
url: "http://localhost:1894/api/Values",
contentType: false,
processData: false,
data: data,
success: function(dataTest) {
}
});
This is the JSON that I get back from the server:
{"First":["Name","Link","User","Pass"],"Sec":["test01"]}
How would I perform a search on this like in C#? I want to be able to do something like this: "dict.TryGetValue(key, out value); and the out value would return as an array of string or as a List.
Try this(you don't need var ajaxRequest variable you can directly call like this:
$.ajax({
type: "POST",
url: "http://localhost:1894/api/Values",
dataType: "json",
data: data,
success: function(dataTest) {
//dataTest should contain your data in a javascript object
for(var i = 0; i < dataTest.First.length; i++)
{
window.alert("" + dataTest.First[i]);
}
for(var i = 0; i < dataTest.Sec.length; i++)
{
window.alert("" + dataTest.Sec[i]);
}
//etc...
//this should print the values returned if you showed me exactly how your JSON is...
}
});
The javascript object will contain properties with an array as the value for each property. Think of it like a map of <String, String[]>. So your returned object dataTest will have properties First and Sec and for First the value associated with the key First will be ["Name","Link","User","Pass"] which is just an array. Same for Sec. So `dataTest.First[0] will equal "Name" and dataTest.First[1] will equal "Link" etc...
*****************************************UPDATE**************************************
You can save your dataTest to a global variable in this example (myObject) then you can access like this:
var key = "First";
// Or if you want to get your key from a dropdown (select) element then you could do like this:
var key = document.getElementById("myselect").options[document.getElementById("myselect").selectedIndex].innerHTML;
if(myObject[key] != undefined)
{
//That means there is values for this key.
//Loop through values or do whatever you want with myObject[key].
for(var i = 0; i < myObject[key].length; i++)
{
window.alert("" + myObject[key][i]);
}
}

Categories