use array in 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 )

what does it look like in the javascript side? what is item on the first loop? — John Ruddell
– John Ruddell, Commented Jun 26, 2014 at 13:50
Hi John, Thanks for your comment. I'm not sure what do you mean? I have little to no experience with javascript — Florian
– Florian, Commented Jun 26, 2014 at 13:54
i mean when you send it from php to javascript what does the data look like? what does items contain.. is it json? an array? can you put that up too ? thanks :) — John Ruddell
– John Ruddell, Commented Jun 26, 2014 at 13:57
print_r(items$) = Array ( [0] => stdClass Object ( [type] => 1 [value] => 35.00 ) [1] => stdClass Object ( [type] => 3 [value] => 1.00 ) [2] => stdClass Object ( [type] => 1 [value] => 20.50 ) etc etc — Florian
– Florian, Commented Jun 26, 2014 at 14:02

Shai · Accepted Answer · 2014-06-27 12:27:00Z

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).

Moshe Bildner · Accepted Answer · 2014-06-26 14:04:14Z

0

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.

answered Jun 26, 2014 at 14:04

Moshe Bildner

4715 silver badges9 bronze badges

1 Comment

Florian Over a year ago

Hi Moshe, thanks for this information! Can you be somewhat more specific how i can use this for my case? Any directions would help :)

Collectives™ on Stack Overflow

use array in javascript foreach

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related