在javascript foreach中使用数组

Question

I have the following (simplified) php function which calculates a total value for me. it basically fetch an array of items from the wordpress database and checks the type of each item and then compare its value to a specific given value and sums all the comparisons up.

        function total(){ 
        $value1 = 10; // compare value for type 1 items
        $value1 = 20; // type 2 items
        $value1 = 30; // type 3 items
        $total = 0; // reset total variable

global $wpdb;
        $items = $wpdb->get_results("SELECT `item_type` as type, `item_value` as value FROM `table`"); // get all the items from database

        foreach ($items as $item) {

    // check which item type
        switch ($item->type) { 
          case 1:
         $total = $total + min($value1, $item->value);
            break;
          case 2:
          $total = $total + min($value2, $item->value);
            break;
          case 3:
         $total = $total + min($value3, $item->value);
            break;
        }}

        return $total;
        }

Now i want to remake the same function in javascript so i can use it in a form for calculations. This is what i got so far;

<SCRIPT type="text/javascript">
 function calculate_total (){
    var items = <?php echo json_encode($items); ?>;
    var value1 = document.form.range1Input.value;
    var value2 = document.form.range2Input.value;
    var value3 = document.form.range3Input.value;

  for each (var item in items){
     switch (**(refer to item type in array)**) { 
          case 1:
         total = total + min(value1, **(refer to item value in array)**);
            break;
          case 2:
          total = total + min(value2, **(refer to item value in array)**);
            break;
          case 3:
         total = total + min(value3, **(refer to item value in array)**);
            break;
        }}

 document.form.total.value = total;
}
</script>

How can i refer to the values in the items array? I hope somebody can give me some advice on this one.

Also i saw that echo json_encode($items) formats the array as {"type":"3","value":"1.00"},{"type":"1","value":"20.50"} etc etc, I was wondering if this is a usable format for javascript because when i try total = items[1]; I see [Object Object] in the form.

$items = $pdb->get_results() is btw formatted as Array ( [0] => stdClass Object ( [type] => 1 [value] => 35.00 ) [1] => stdClass Object ( [type] => 3 [value] => 1.00 )

Answer 1

You should probably read up on your JavaScript syntax, but there are four ways to loop over an array:

TL;DR: if you're doing things that mutate state, I recommend Array#forEach , if not, recommend Array#map .

var myArray = [1,2,3,4,5,6];
var len = myArray.length;

1) for loop

for (var i=0; i<len; i++) {
  doSomethingTo(myArray[i]);
}

2) while loop

var i = 0; 
while (i<len) {
  doSomethingTo(myArray[i]);
  i++;
}

3) forEach

myArray.forEach(function (element) {
  doSomethingTo(element);
});

4) map

var newArray = myArray.map(function (element) {
  doSomethingTo(element);
});

Of these four, ONLY map has a return. It will run the function you give it on each of the elements of the array, and return an array of those all together. the while loop is the fastest, but you should avoid doing things imperatively like that if you can.

Answer 2

Like you speculated, your first item can be referred to as items[0] , second as items[1] , and so on.

So, in your switch statement / within your for loop where item refers to the current index (0, 1, 2, etc), you can say items[item] to refer to the item you're currently looking at in your loop: first it will be equal to items[0] , then items[1] , and so on.

So, switch (items[item].type) { should be what you need.

---

(A quick JS recap: arrays and objects are different things in JS, look up the differences if you're not sure. When referencing them, you can use myArray[0] to get things from an array, and you can use myObject['myKey'] or myObject.myKey to get things from an object. In your case, items is an array , and each of its elements is an object . You can therefore do items[0]['type'] or items[0].type to access the type of your first item).

---

The reason items[1] just showed [Object object] when you tried it is because browsers aren't great at displaying objects on screen – the object is there, and JS can see it, it's just that most objects are printed as [Object object] . You'd be better off displaying JSON.stringify(items[1]) to see a JSON representation of the object as a string. Better yet, try console.log(items) or console.log(items[1]) to see the entire object in your browser's console (you can search for how to bring up your browser console, it's different for each browser/OS, but it's brilliant for debugging).