Underscore.js-遍历对象数组

Question

I have the following object array:

var products = [
    {
        id: 1,
        name: "Product 1",
        subTypes: [
            {
                id: 1,
                name: "Product 1 - Sub Type 1"
            },
            {
                id: 2,
                name: "Product 1 - Sub Type 2"
            }
        ]
    },
    {
        id: 2,
        name: "Product 2",
        subTypes: [
            {
                id: 1,
                name: "Product 2 - Sub Type 1"
            },
            {
                id: 2,
                name: "Product 2 - Sub Type 2"
            }
        ]
    }
];

Using underscore.js why does the following dot notation not log anything to console:

_.each(products.subTypes, function(subType) {
       console.log(subType.name);
 });

I can only get it to work by doing nesting the foreach loops as follows?

_.each(products, function (product) {
    _.each(product.subTypes, function (subType) {
        console.log(subType.name);
    });
});

Answer 1

你可以检查一下

console.log('Subtypes:', products.subTypes.name);

Answer 2

If you would like to access product.subTypes you have to extract them from your objects first.

Here is how you do it. 3 example functions: pure javascript, ES6, underscoreJS.

 // pure JS function pureJsloop(data) { var result = []; for (i = 0; i < data.length; i++) { var product = data[i]; result.push(product.subTypes); } return result[0]; } // ES6 function ES6loop(data) { // We are returning reduced array return data.reduce((previous, product) => { return previous = [ ...previous, product.subTypes ]; }, [])[0]; } // Underscore function underscoreLoop(data) { return _.reduce(data, function(previous, product){ return previous = [ ...previous, product.subTypes ]; }, [])[0]; } var products = [ { id: 1, name: "Product 1", subTypes: [ { id: 1, name: "Product 1 - Sub Type 1" }, { id: 2, name: "Product 1 - Sub Type 2" } ] }, { id: 2, name: "Product 2", subTypes: [ { id: 1, name: "Product 2 - Sub Type 1" }, { id: 2, name: "Product 2 - Sub Type 2" } ] }]; //console.log(pureJsloop(products)); //console.log(ES6loop(products)); console.log(underscoreLoop(products)); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>