Sanya Sanya - 5 months ago 32
jQuery Question

jQuery each loop 3-Dimensional Object Array

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℃)"
}, {
short: "cmH2O",
val: "1033.25183423631",
long: "Centimeter of Water (4℃)"
}, {
short: "ft-H2O",
val: "33.899503811341",
long: "Foot of Water (4℃)"
}, {
short: "GPa",
val: "0.00010132502738",
long: "Gigapascal"
}, {
short: "HPa",
val: "1013.25027383088",
long: "Hectopascal"
}, {
short: "inHg",
val: "29.9212805862261",
long: "Inch of Mercury (0℃)"
}, {
short: "inH2O",
val: "406.793640435982",
long: "Inch of Water (4℃)"
}, {
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℃)"
}, {
short: "mmH2O",
val: "10332.5183423631",
long: "Millimeter of Water (4℃)"
}, {
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>




Answer

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);
    });
});