jQuery each loop 3-Dimensional Object Array

Question

I have a multidimensional array that I am trying to loop through. I want the loop to eventually look through the first object (in the example code it is: "pressure"), then perform a specific action for each object inside the first object.

But I can't even get it to work properly. I know my $.each function is completely wrong — I just can't figure out how to make it right. Of course I get nothing in the console.

$(document).ready(function() {
  var units = {
    "pressure": [
      {
        short: "atm",
        val: "1",
        long: "Atmosphere (standard)"
      }, {
        short: "bar",
        val: "1.01325027383089",
        long: "Bar"
      }, {
        short: "cmHg",
        val: "76.0000526890144",
        long: "Centimeter of Mercury (0&#8451;)"
      }, {
        short: "cmH2O",
        val: "1033.25183423631",
        long: "Centimeter of Water (4&#8451;)"
      }, {
        short: "ft-H2O",
        val: "33.899503811341",
        long: "Foot of Water (4&#8451;)"
      }, {
        short: "GPa",
        val: "0.00010132502738",
        long: "Gigapascal"
      }, {
        short: "HPa",
        val: "1013.25027383088",
        long: "Hectopascal"
      }, {
        short: "inHg",
        val: "29.9212805862261",
        long: "Inch of Mercury (0&#8451;)"
      }, {
        short: "inH2O",
        val: "406.793640435982",
        long: "Inch of Water (4&#8451;)"
      }, {
        short: "kPa",
        val: "101.325027383089",
        long: "Kilopascal"
      }, {
        short: "MPa",
        val: "0.10132502738309",
        long: "MegaPascal"
      }, {
        short: "mbar",
        val: "1013.25027383088",
        long: "Millibar"
      }, {
        short: "mtorr",
        val: "760000.526890144",
        long: "Millitorr"
      }, {
        short: "mmHg",
        val: "760.000205385833",
        long: "Millimeter of Mercury (0&#8451;)"
      }, {
        short: "mmH2O",
        val: "10332.5183423631",
        long: "Millimeter of Water (4&#8451;)"
      }, {
        short: "Pa",
        val: "101325.027383088",
        long: "Pascal"
      }, {
        short: "psf",
        val: "2116.21372690676",
        long: "Pound-Force/Square-Foot"
      }, {
        short: "psi",
        val: "14.6959793215884",
        long: "Pound-Force/Square-Inch"
      }, {
        short: "Torr",
        val: "760.000526890144",
        long: "Torr"
      }
    ],

    "density": [

      {
        short: "lb/in3",
        val: "1",
        long: "Pound / Inch-Cubed"
      }, {
        short: "lb/ft3",
        val: "1728.00001173627",
        long: "Pound / Foot-Cubed"
      }, {
        short: "slug/ft3",
        val: "53.707964051111",
        long: "Slug / Foot-Cubed"
      }, {
        short: "grain/ft3",
        val: "12094392.8271733",
        long: "Grain / Foot-Cubed"
      }, {
        short: "grain/in3",
        val: "6999.99988928036",
        long: "Grain / Inch-Cubed"
      }, {
        short: "g/cm3",
        val: "27.679904710267",
        long: "Gram / Centimeter-Cubed"
      }, {
        short: "g/cup",
        val: "6.548788655679",
        long: "Gram / Cup"
      }, {
        short: "g/L",
        val: "27679.9047102671",
        long: "Gram / Liter"
      }, {
        short: "kg/cm3",
        val: "0.02767990471",
        long: "Kilogram / Centimeter-Cubed"
      }, {
        short: "kg/L",
        val: "27.679904710267",
        long: "Kilogram / Liter"
      }, {
        short: "kg/m3",
        val: "27679.9047102671",
        long: "Kilogram / Meter-Cubed"
      }
    ]
  };

  $.each(units, function(index, obj) {
    $.each(obj, function(short, val) {
      console.log(obj.index.short);
      console.log(obj.index.val);
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

In your case you might want to iterate with some for(var type in units){ for(var property in units[type]){ } } — Sladix, Jun 22 '16 at 16:03
Possible duplicate of [Javascript iterate object](http://stackoverflow.com/questions/14379274/javascript-iterate-object) — Derek, Jun 22 '16 at 16:04
@ShaunakD: jQuery's `$.each` works for both objects and arrays. — gen_Eric, Jun 22 '16 at 16:11
@RocketHazmat, my bad. Not sure why I said that. having used it many times. — Shaunak D, Jun 22 '16 at 16:12

score 3 · Answer 1 · answered Jun 22 '16 at 16:05

3

You might want to do something like this:

Object.keys(units).forEach((key, index) => { // loop over the units keys
    units[key].forEach(object => { // loop over the objects in arrays
        // do your stuff with the objects
    });
});

answered Jun 22 '16 at 16:05

Azamantes

1,435
10
15

score 3 · Answer 2 · answered Jun 22 '16 at 16:07

3

$.each(units, function(index, obj) {
console.log(index)
  $.each(obj, function(short, val ) {
    console.log(val.short);
    console.log(val.val);
  });
});

answered Jun 22 '16 at 16:07

Piyush.kapoor

6,715
1
21
21

You were so close. Rocket Hazmat was just 1 minute quicker. – Sanya Jun 22 '16 at 16:12

score 2 · Accepted Answer · answered Jun 22 '16 at 16:07

When you use the . syntax to refer to object properties, you are trying to access that literal property.

For example, obj.index.short. This looks for a property called index and then one called short. I assume you want the index variable to be used, so that you are accessing the correct property.

Something like: obj[index].short. This won't work either though, since your obj[index] value is an array.

What you want to do is loop over the outer object, then loop over each property (which is an array) and get the values of each array element (object).

Try this:

$.each(units, function(index, obj){
    // `index` is either "pressure" or "density"
    // `obj` is the value of that property (an array)
    $.each(obj, function(short, val){
        // `short` is the index in the array
        // `val` is each element in the array, it's an object
        console.log(val.short);
        console.log(val.val);
    });
});

Thanks! this works great. I guess I shouldn't use "val" as a key — Sanya, Jun 22 '16 at 16:11
@Sanya: I guess so you don't have `val.val` which may look silly. You can leave `val` as a property in your object and just change the code to use something else, like `data.val` or something. — gen_Eric, Jun 22 '16 at 16:13

score 1 · Answer 4 · answered Jun 22 '16 at 16:12

$(document).ready(function() {
  var units = {
    "pressure": [
      {
        short: "atm",
        val: "1",
        long: "Atmosphere (standard)"
      }, {
        short: "bar",
        val: "1.01325027383089",
        long: "Bar"
      }, {
        short: "cmHg",
        val: "76.0000526890144",
        long: "Centimeter of Mercury (0&#8451;)"
      }, {
        short: "cmH2O",
        val: "1033.25183423631",
        long: "Centimeter of Water (4&#8451;)"
      }, {
        short: "ft-H2O",
        val: "33.899503811341",
        long: "Foot of Water (4&#8451;)"
      }, {
        short: "GPa",
        val: "0.00010132502738",
        long: "Gigapascal"
      }, {
        short: "HPa",
        val: "1013.25027383088",
        long: "Hectopascal"
      }, {
        short: "inHg",
        val: "29.9212805862261",
        long: "Inch of Mercury (0&#8451;)"
      }, {
        short: "inH2O",
        val: "406.793640435982",
        long: "Inch of Water (4&#8451;)"
      }, {
        short: "kPa",
        val: "101.325027383089",
        long: "Kilopascal"
      }, {
        short: "MPa",
        val: "0.10132502738309",
        long: "MegaPascal"
      }, {
        short: "mbar",
        val: "1013.25027383088",
        long: "Millibar"
      }, {
        short: "mtorr",
        val: "760000.526890144",
        long: "Millitorr"
      }, {
        short: "mmHg",
        val: "760.000205385833",
        long: "Millimeter of Mercury (0&#8451;)"
      }, {
        short: "mmH2O",
        val: "10332.5183423631",
        long: "Millimeter of Water (4&#8451;)"
      }, {
        short: "Pa",
        val: "101325.027383088",
        long: "Pascal"
      }, {
        short: "psf",
        val: "2116.21372690676",
        long: "Pound-Force/Square-Foot"
      }, {
        short: "psi",
        val: "14.6959793215884",
        long: "Pound-Force/Square-Inch"
      }, {
        short: "Torr",
        val: "760.000526890144",
        long: "Torr"
      }
    ],

    "density": [

      {
        short: "lb/in3",
        val: "1",
        long: "Pound / Inch-Cubed"
      }, {
        short: "lb/ft3",
        val: "1728.00001173627",
        long: "Pound / Foot-Cubed"
      }, {
        short: "slug/ft3",
        val: "53.707964051111",
        long: "Slug / Foot-Cubed"
      }, {
        short: "grain/ft3",
        val: "12094392.8271733",
        long: "Grain / Foot-Cubed"
      }, {
        short: "grain/in3",
        val: "6999.99988928036",
        long: "Grain / Inch-Cubed"
      }, {
        short: "g/cm3",
        val: "27.679904710267",
        long: "Gram / Centimeter-Cubed"
      }, {
        short: "g/cup",
        val: "6.548788655679",
        long: "Gram / Cup"
      }, {
        short: "g/L",
        val: "27679.9047102671",
        long: "Gram / Liter"
      }, {
        short: "kg/cm3",
        val: "0.02767990471",
        long: "Kilogram / Centimeter-Cubed"
      }, {
        short: "kg/L",
        val: "27.679904710267",
        long: "Kilogram / Liter"
      }, {
        short: "kg/m3",
        val: "27679.9047102671",
        long: "Kilogram / Meter-Cubed"
      }
    ]
  };

  $.each(units, function(i, obj) {     
      console.log(i);
     $.each(obj, function(j, obj2) {
         console.log(obj2.short +' : '+obj2.val+' , '+obj2.long);
     });
    
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 1 · Answer 5 · answered Jun 22 '16 at 16:13

units is an Object and pressure is a key to this object

var _getPressure=units.pressure // will return value of key pressure
 _getPressure.forEach(function(item){ // use Array forEach to loop through array
 document.write('<pre>'+item.short+'--'+item.val+'</pre>')
 })

JSFIDDLE

jQuery each loop 3-Dimensional Object Array

5 Answers5