22 posts in this topic

Posted

Hello! I would like to submit an array of strings from a web form to my web service and need a little bit of hand holding. My web service I've written seems fine with having an array of strings as input but I'm not exactly sure how to encode this in javascript from my html form elements before I ship the data to my web service to be processed. The array of strings will be pretty small (on the order of 20x3 strings).

I suspect that there is a clever way to do this by coding the form correctly and just running a jquery .serialize() operation on the form and submitting it.

My first thought was to define a number of textbox inputs and give them incremental ID#'s such as "array0_0", "array0_1", "array0_2", "array1_0", "array1_1", "array_1_2", "array_2_1" etc.

Then as a first step before submitting the post, collect all the values in the textboxs and compile an array using 2 nested for loops. Something like that would probably work, but I was wondering if there was some magic that I could do in my form so that jquery recognizes an array of strings in my form so that the .serialize() function just does its magic.

Thanks!

-Shad

Share this post


Link to post
Share on other sites

Posted

Maybe use JSON to convert it back and forth as needed? That's how we do search suggestions on our website. A service serializes JSON, the ajax (jquery, really) javascript picks it up and parses it and displays the results.

Share this post


Link to post
Share on other sites

Posted

To be more specific... we have a series of services on one server... including a search service. When you type in a search box a javascript function sends off queries to the server (the web app action written to deal with this) which then queries the service. The service hands back the JSON response, all the action does is reads it as an input buffer and println's it out to the client. Once the javascript gets the response back it parses it and displays the result.

UI (javascript) --> Action (java) --> SERVICE (java) --> Action (java) --> UI (javascript)

Share this post


Link to post
Share on other sites

Posted


var arrayToStore = new Array();

var $strings = $('form input');

$strings.each(function(){

	arrayToStore.push(this.val());

})

Also, if you want to store them with a specific key, give them all a data-something attribute rather than abusing the ID property.

Share this post


Link to post
Share on other sites

Posted

I'll try that. I found a JSON.stringify function but am not finding a serialize function.

Share this post


Link to post
Share on other sites

Posted


var arrayToStore = new Array();

var $strings = $('form input');

$strings.each(function(){

	arrayToStore.push(this.val());

})

Also, if you want to store them with a specific key, give them all a data-something attribute rather than abusing the ID property.

I thought that it was only considered "abuse" if you don't use unique IDs.

Your solution is a good start but I need to make a 2d string array in the end so I'll need to tweak it.

Share this post


Link to post
Share on other sites

Posted

Does this help?

LINK: http://api.jquery.com/serialize/

Tell me the down falls and I will be able to clearly understand your issue and assist.

Share this post


Link to post
Share on other sites

Posted

I'll try that. I found a JSON.stringify function but am not finding a serialize function.

I should look at the code... it probably isn't then, probably just a raw string being written.

Share this post


Link to post
Share on other sites

Posted

I have some ideas to play around with. Haha, its funny how much time is spent just communicating between applications and services. This particular application started as a standalone windows program, but my boss wants tighter control so now I'm extending it with a web front end. I think I've spent more time trying to figure out jquery and javascript than I did with the whole write up of my application. I guess whatever you are use to is easy, its when you are up against a learning curve that makes things hard.

Still, I'm amazed at how powerful this jquery and AJAX stuff is and how far the tools have come in the past 10 years. When I was doing full time web development I did everything in server side PHP scripting with auxiliary basic javascript stuff. Using AJAX has the huge advantage of not having to redraw the whole page for every little thing. Now it seems like it is better to offload as much work on the client side as you can and just write auxiliary server side scripting.

Share this post


Link to post
Share on other sites

Posted

I thought that it was only considered "abuse" if you don't use unique IDs.

Your solution is a good start but I need to make a 2d string array in the end so I'll need to tweak it.

It's not abuse, per se, but if you can use the data- attribute, it makes much more sense to use it in a case like this. If you gave them all some data-location1 and data-location2 attribute (or however named), as you iterate through with each you can grab those attributes using .attr(), and then store the final string in your 2d array.

Share this post


Link to post
Share on other sites

Posted

It's not abuse, per se, but if you can use the data- attribute, it makes much more sense to use it in a case like this. If you gave them all some data-location1 and data-location2 attribute (or however named), as you iterate through with each you can grab those attributes using .attr(), and then store the final string in your 2d array.

Word. Thanks.

Share this post


Link to post
Share on other sites

Posted


(function store(){

var arrayToStore = [['',''],['','']];

var $strings = $('form input');

$strings.each(function(){

	    var x = $(this).attr('data-loc1');

	    var y = $(this).attr('data-loc2');

	    arrayToStore[x][y] = $(this).val();

});

    console.log(arrayToStore);

})();

A better example...

Share this post


Link to post
Share on other sites

Posted

I keep getting an error when I try to use multidimensional arrays.

Here is my form:


<form>

	<table>

		<tr>

			<th>&nbsp;</th>

			<th>Independent</th>

			<th>Pass</th>

			<th>Fail</th>

		</tr>

		<tr>

			<th>Data Labels</th>

			<td><input type="textbox" data-row="0" data-col="0" /></td>

			<td><input type="textbox" data-row="0" data-col="1" /></td>

			<td><input type="textbox" data-row="0" data-col="2" /></td>

		</tr>

		<tr>

			<th>Data Row 1</th>

			<td><input type="textbox" data-row="1" data-col="0" /></td>

			<td><input type="textbox" data-row="1" data-col="1" /></td>

			<td><input type="textbox" data-row="1" data-col="2" /></td>

		</tr>

		<tr>

			<th>Data Row 2</th>

			<td><input type="textbox" data-row="2" data-col="0" /></td>

			<td><input type="textbox" data-row="2" data-col="1" /></td>

			<td><input type="textbox" data-row="2" data-col="2" /></td>

		</tr>


		</table>

	</form>

	<p><input type="button" value="Run Regression" onClick="ProcessButtonClick()"/></p>

Here is my javascript:

   	 function ProcessButtonClick() {

			var arrayToStore = [['',''],['','']];

			var $strings = $('form input');

			$strings.each(function(){

				var x = parseInt($(this).attr('data-row'));

				var y = parseInt($(this).attr('data-col'));

				arrayToStore[x][y] = $(this).val();

			});

			console.log(arrayToStore);

}

I get this error in the console from Firebug:

TypeError: can't convert undefined to object

arrayToStore[x][y] = $(this).val();

If I'm only addressing 1 index, it works (i.e., arrayToStore[x] = $(this).val(); does not give me an error but doesn't give me the right output obviously).

Thank you for your input and time.

Share this post


Link to post
Share on other sites

Posted

Its an array initialization problem... once I sized it correctly when dimensioning the array variable it worked fine:

var arrayToStore = [['','',''],['','',''],['','','']]

I did not think that Javascript arrays had to be strictly dimensioned... Is there a short hand for this? I would think new Array(3,3) or something would look better...

Share this post


Link to post
Share on other sites

Posted

#

# CORRECT WAY TO INSTANTIATE AN ARRAY WITHOUT DIMENSION

#

var arrayToStore = [];

#

# PROBLEM

#

var arrayToStore = [['',''],['','']];

#

# REASON

#

IF you instantiate the array with only the above "problem" dimensions and do not correct the length beyond this, they will be truncated.

Share this post


Link to post
Share on other sites

Posted

Its an array initialization problem... once I sized it correctly when dimensioning the array variable it worked fine:

var arrayToStore = [['','',''],['','',''],['','','']]

I did not think that Javascript arrays had to be strictly dimensioned... Is there a short hand for this? I would think new Array(3,3) or something would look better...

I had worked that code up in a fiddle and was getting the same error, hence why I posted it with ['','']. The general consensus seems to be to create a helper fuction that, given a number x, can push x number of blank objects into the array which you can then fill.

Or... just use an object. It's certainly the preferred way in JS unless you really need an array of arrays.

#

# CORRECT WAY TO INSTANTIATE AN ARRAY WITHOUT DIMENSION

#

var arrayToStore = [];

#

# PROBLEM

#

var arrayToStore = [['',''],['','']];

#

# REASON

#

IF you instantiate the array with only the above "problem" dimensions and do not correct the length beyond this, they will be truncated.

If you do arrayToStore = [] and then try to set arrayToStore[0][0] = something, you'll get the same error.

Share this post


Link to post
Share on other sites

Posted

If you gave me an example of how you would like the content it might make it easier but off the top of my mind - how does this work?


var arrayData = [];


function ProcessButtonClick() {


    var $strings = $('form input');


    $strings.each(function(){


        var arrayParent = [];

        var arrayChild = [];


	    var x = parseInt($(this).attr('data-row'));

	    var y = parseInt($(this).attr('data-col'));


        arrayChild[x] = $(this).val();

        arrayParent[y].push(arrayChild);

        arrayData.push(arrayParent)


    });




}

Share this post


Link to post
Share on other sites

Posted

tim_s - I get this error:

TypeError: arrayParent[y] is undefined

arrayParent[y].push(arrayChild);

Seems like the only way for me to get it to work is to declare the full size of the array... in just about every language you can initialize the size of an array directly but for some reason this doesn't seem possible in Javascript unless I'm missing something.

In the end, the size of my table is fixed so dimensioning out the variable before hand is fine.

Share this post


Link to post
Share on other sites

Posted

What is the value of y?

Share this post


Link to post
Share on other sites

Posted

What is the value of y?

It's 0 before it calls that line and throws the error.

Share this post


Link to post
Share on other sites

Posted

Seems like the only way for me to get it to work is to declare the full size of the array... in just about every language you can initialize the size of an array directly but for some reason this doesn't seem possible in Javascript unless I'm missing something.

In the end, the size of my table is fixed so dimensioning out the variable before hand is fine.

You're not, as I mentioned, it's not a preferred way of doing things in JS. If you must, this will work:


<script>

var multidArray = function(y){

var array = [];

for(i=0;i<y;i++){

  array.push(['example', 'array']);

}

return array;

}

var newArray = multidArray(6);

newArray[1][0] = ['now', 1,1];

newArray[1][1] = 'modified';

console.log(newArray);

</script>

However, in JS, this is preferable:

var better = {};

better[0] = {1: 'this', 2 : 'will', 3: 'work', 4: 'much', 5: 'better'};

console.log(better[0][1]); // will log 'this'

Share this post


Link to post
Share on other sites

Posted

Well..its all moot because I can't get the input array into my web service.... apparently arrays of strings are a supported output (in JSON format) but not a supported input. I'll have to turn my table into CSV and then program my web service accordingly.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.