Passing arrays in JavaScript

[SeanF]

Hi:

I'm trying to pass multiple values as an array to a javascript from a <select> field using json_encode. The array is read read correctly in the JavaScript (I think) but I am not able to extract discrete elements.

Here is what I have in the html form (php file):

echo "<select name='product' id='unit_price$i' onchange='calcCost($i)'>";
// loop for all products
$selectArray = array($rowNum, $product_id, $standard_price);
$sel_input = json_encode($selectArray);
echo "<option value=$sel_input >$product_id $product_name $standard_price</option>";
// end loop

Then in the calcCost($i) JavaScript I have:

var unit_price = document.getElementById('unit_price' + rowNumber).value;
alert ('U Price: ' + unit_price );
var price_array = JSON.parse(unit_price);
alert ('Price Array: ' + price_array);
var rownum = price_array(0);
alert ('Row_Num: ' + rownum);

The first alert shows: U Price: [1,"712","3.8"]
The second alert shows: Price Array: 1,712,3.8
There is no third alert, probably because the script is failing

Can someone point me in the right direction?

Thanks

[NickMNS]

It is unclear from your code is trying to achieve. Why are you encoding in JSON the value assigned to the "value" attribute in html? Typically a value should be a relatively short value such as a number or short string. You can in theory assign anything to it, but this is not good practice. If you need to assign a large object to a selection typically you assign an "id" of sorts to the value, save the actual data as object, and the when a option is selected use the "id" key to get the correct value from the object.

Another thing to note is that JSON, has no real use within a script. JSON is simply a formatting standard for data such that it can be passed outside of javascript and then back in. json_encode simply creates a string formatted per the JSON standard. JSON.parse in javascript then takes the string and creates an object in javascript, this object can be an array, or an object proper.

Now regarding your code, the problem is price_array(0) should be throwing an array. That is not how one reference an array in JS, you should use [0] square brackets. Here is some info on arrays in javascript:
[developer.mozilla.org...]

One last point is that the code appears to be somewhat strange, this could be just your example. But as I explained above, your a passing an array to an option value attribute, and then you are printing only one element from the array. Are you passing the same array to each row, and then selecting array element of the row? If this is the case, there is a better way to do it which is easier to code, and understand.

[SeanF]

Thanks for taking the time to respond.

What I am trying to do is pass two values to the javascript, one for the product_id and one for the unit_price. The JavaScript would then calculate price based on units (from another field in the form) and unit price. and return price to a text input field... but the more I think about it, the way I am going about it may not make sense.

The product_id is really only needed for the form, the unit price is needed to calculate price in the JavaScript.

Perhaps a better way is to simply pass the product_id to JavaScript and use Ajax within the script to get the unit_price from the database.

Does that make more sense?

[NickMNS]

So if understand you were passing [9.99, 'id123xyz'], this is reasonable, a better solution may be to separate out the id and price as you were thinking above.

I assume that this is a continuation of the work you posted about a few weeks ago here:
[webmasterworld.com...]

I would set the option value to the product id and then get the price list from the database with an AJAX call. Save the list to a var as a JS object (key, value pair). Then when you call the calcCost() function you take the id from the input and use it as the key to find the price in the list. Now since you are taking the price list from the database and passing to the JS script you send it a JSON object, and when assigning it to the var JSON.parse it such that it become a javascript object, in the shape:

var productInfo = {
 id001: 9.99,
 id002: 12.99,
 id003: 7.99,
}

Then to get the price you simple use productInfo[productID] where productID is var containing a string like 'id001'.

or if you have more data than just price to pass you could send it as an array of objects (which is still valid JSON):

var productInfo = [
 {
  id: 001,
  price: 9.99,
  color: red
 },
 {
  id: 002,
  price: 12.99,
  color: green
 },
 ...
]

The second format is a little more complicated because you need to filter the array by key "id" to find the correct price, but it provides the flexibility that you can have all your product data available with a single ajax request, assigned to a single var that acts like a mini-DB.

[SeanF]

OK, thanks for your help. As you can probably determine, I am a newbie with JavaScript and Ajax. I've been working with PHP and MySql for a while but I'm still new to these others.

I will look at your suggestion and see if I can make that work.

On a related question, if I have the following on my form:
<td><div id='txtHint$i'><b>value.</b></div></td>
where txtHint is returned from the Ajax call, the correct value is displayed
However, if I use:
<td><input type='text' name='unit_price[$i]' id='txtHint$i' /></td>
Nothing is displayed. Why is that?

[NickMNS]

It is hard to say, one would need to see the ajax code and the what the server is doing. But just guessing, and with a big caveat, I don't have much experience with PHP, I usually code my server-side with Python, I would guess that since you are passing a name attribute in the form that your server is using the name attribute in place of the ID, and since you don't expect the name the server returns a blank string or a null value.

[SeanF]

Hi Nick:

Thanks again, for your help. One of these days, I'll actually find the time to take some real JS classes... or hire someone to do the coding for me..

I am going to start a new thread because I am taking a different tack and have different issues.