I am a very new developer working on a very simple application as part of my training process - so be gentle.
I have built a function in javascript that accepts arbitrary objects from elsewhere and builds a legal POST request string.
Code:
function postify(oPost){
var out = '';
for (key in oPost){
if (oPost.hasOwnProperty(key) && key >0){
if(oPost[key].value != 'Submit'){
out += '&' + oPost[key].name + '=' + oPost[key].value;
}
}
}
return out;
}
There are many like it, but this one is mine. I elected to use hasOwnProperty as a conditional, as the total list of inherited properties could be really quite long.
One of the objects I would like to pass to this function is a JSON parsed responseText object, which is retrieved like so.
function postData(str){
var http = new XMLHttpRequest();
http.open('POST', 'test.php',false);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", str.length);
http.setRequestHeader("Connection", "close");
http.send(str);
var response = JSON.parse(http.responseText);
responseHandle(response);
}
So, the problem - both of these functions do exactly what they are supposed to do, until my responseHandle function routes the response object to the postify function. Manual checking indicates that all expected properties are in place, but postify()
won't concatenate a string because those properties seem to have been inherited.
I am fully aware that I could trivially brute force assign all necessary properties - the handler function would do what it needed to either way. I am also aware that my synchronous XMLHttpRequest
is deprecated - right this second, it's what I need, and works fine.
So, then, some questions - is there a way to pass my JSON.parsed object such that hasOwnProperty() == true
is maintained? Is there a different property or technique I could or should be using in postify()
to look for deliberately set key value pairs? Should I just rig the POST to transmit ALL of the inherited properties of the object I am POSTING to PHP?
The problem isn't with hasOwnProperty
, it's with key > 0
. Unless oPost
is an array, the keys will be strings. When you compare a string with a number, the string is converted to a number. But if the string isn't numeric, the conversion will return NaN
, and comparing this with 0
is false.
Your function shouldn't have worked for any object, it doesn't matter if it came from JSON.parse()
. When JSON.parse
returns an object, all the properties are "own".
The fix is to change
if (oPost.hasOwnProperty(key) && key >0){
to
if (oPost.hasOwnProperty(key)){
Objects restored from JSON serialization have no identity beyond "being a plain object", so all you're getting back is a plain, prototype-less object.
However, instead of solving that issue, let's solve the real problem, the one you're trying to use .hasOwnProperty
for, by using some modern JS (but not so modern as to use ES6/ES2015 syntax) instead:
function postify(inputObject) {
var keys = Object.keys(inputObject);
return keys.filter(function(key) {
return inputObject[key].value !== 'Submit';
}).map(function(key) {
var e = inputObject[key];
return '&' + e.name + '=' + e.value;
}).join('');
}
on the first line, we get the object's keys using the build in JavaScript Object.keys
function. Then we filter the keys, discarding any key for which oPost[key].value
is not the string 'Submit'. Then we build a mapping of ["remaining keys", ...] => ["&thing=whatever", "&thing2=moo", ...], and then we join those things without any glue.
Done, no var out
required even!