2017-04-03 91 views
0

我有以下对象数组:Underscore.js - 通过对象数组循环

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" 
      } 
     ] 
    } 
]; 

使用underscore.js为什么下面点号无法登录任何安慰:

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

我可以只需按照以下方法嵌套foreach循环来实现它的工作?

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

没有products.subTypes逸岸你需要像产品[0] .subTypes和产品[1] .subTypes等 –

+0

你的最后一段代码上面是完全正确的假设。你有一个对象数组作为一个对象数组中的一个属性 - 你需要循环两次。您无法使用'products.subTypes'访问它,因为它试图访问单个对象的属性。 – G0dsquad

回答

0

你可以检查一下

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

如果你想访问你必须首先从你的对象提取它们product.subTypes。

下面是你是如何做到的。 3个示例函数:纯JavaScript,ES6,下划线JS。

// 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>