StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>colorArray will be an array of the form</p> <pre><code>[2.339, 3.195, 6.537, 2.614, 2.614, 1.759] </code></pre> <p>according to <a href="http://php.net/manual/en/function.json-encode.php" rel="nofollow noreferrer">the php <code>json_encode()</code> documentation</a>. </p> <p>I've put together a <strong><a href="http://jsbin.com/eyano" rel="nofollow noreferrer">Working Demo</a></strong> to demonstrate how to handle data returned in a JSON string as an array. add <strong>/edit</strong> to the URL to see the code.</p> <p>Code from the demo</p> <pre><code>$(function() { $('button').click(function() { // the URL is just another page on jsbin.com that contains // this string - ["2.339","3.195","6.537","2.614","2.614","1.759"] $.getJSON('http://jsbin.com/amibo', function(data) { $.each(data, function(i,v) { $('<div>').text(v).appendTo('body'); }); }); }); }); </code></pre> <p>Note that in your example, <code>colorArray</code> is declared locally inside the function that executes when the AJAX request has completed and therefore will not be available outside of that scope. You can either use a higher scoped variable to capture the returned data or perform your iteration inside of the callback function.</p> <p><strong>EDIT:</strong></p> <p>I've looked at <a href="http://www.3roadsmedia.com/samplejquery.php" rel="nofollow noreferrer">your code here</a> and you would need something like this</p> <pre><code>$('#quantity').change(function() { var qty = $('option:selected', this).val(); switch (qty) { case '250': $.getJSON('scripts/jsondata.php',function(data) { // call the new updateOptionLabels function updateOptionLabels(qty, data); // I'm not sure if you needed this part as it seems to // essentially duplicate the new updateOptionLabels function // I've commented out but I may misunderstand what you're doing /* $.each(data, function(i, value) { $('#colors option').eq(i).attr('label',qty * value); }); */ }); break; case '500': // ditto, but retrieving a different array break; // etc... default: alert("Default"); break; } // I'd like to use that local "colorArray" variable here function updateOptionLabels(qty, arr) { $('#colors option').each(function(i) { $(this).attr('label',qty * arr[i]); }); } }); </code></pre> <p>I've introduced a new function for updating option labels. This function is scoped to the function executed when the change event is raised on <code><select></code> with id <code>quantity</code>. The variable <code>qty</code> can be used inside of the callback function for the <code>getJSON()</code> command in each case statement as it is declared outside of the scope of the callback function. The <code>data</code> variable and the <code>qty</code> are both passed into the <code>updateOptionLabels()</code> function so that this code is not duplicated in each case statement. This could probably be refined earlier. I've commented out the <code>$.each()</code> for the moment as it looks as though what you were trying to do with that is now taken care of by the <code>updateOptionLabels()</code> function.</p> <p>I would suggest taking a look at Doug Crockford's excellent <a href="http://javascript.crockford.com/survey.html" rel="nofollow noreferrer">Survey of the JavaScript Programming Language</a>, particularly the section on Functions. Also take a look at Mozilla's excellent Core JavaScript 1.5 reference material. <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Functions" rel="nofollow noreferrer">Here's the section on Functions and function scope</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload