複雑なオブジェクト/配列構造からデータを取得する方法は？

Question

私は複雑なAPI構造からデータを取得しようとしています。どのように私は、次のオブジェクトと配列からすべての画像を得るでしょう：

const x = { cars: [ 
    { types: 
     { 
     name: "VW", 
     image: [{ url: "http://www.lkjl.com" }] 
     } 
    }, 
    {...}, 
    {...} 
]}; 

私はこのようなイメージのURLを取得することができます知っている：

x.cars[0].types.image[0].url 

しかし、どのように、私はプリントアウトすることができますがすべての画像URL？

x.cars.map(item => { 
    return(
     item.image[0].url; // this is wrong 
    ); 
}); 

マップ機能内に別のマップを配置する必要がありますか？ carsアレイ内

x.cars.map(item => { 
    return(
     item.types.image[0].url; //this should work for you 
    ); 
}); 

Answer 1

あなたはurlプロパティをマッピングしてArray#reduceを使用することができます。

const 
 
    x = { cars: [{ types: { name: "VW", image: [{ url: "http://www.lkjl.com" },{ url: "http://www.alkjl.com" }] } }, { types: { name: "Tata", image: [{ url: "http://www.lskal.com" },{ url: "http://www.lkfjl.com" }] } }] }, 
 
    images = x.cars.reduce((r, item) => r.concat(item.types.image.map(i => i.url)), []); 
 

 
console.log(images);

Answer 2

は、私はあなたがtypesを逃したと思いますtypesオブジェクト内にimage配列があるので、両方の配列を繰り返してすべての画像を印刷する必要があります。

以下のコードを参照してください。

const x = { cars: [ 
 
    { types: 
 
     { 
 
     name: "VW", 
 
     image: [{ url: "http://www.lkjl.com" }] 
 
     } 
 
    }, 
 
    { types: 
 
     { 
 
     name: "VW", 
 
     image: [{ url: "http://www.lkjl12.com" }] 
 
     } 
 
    } 
 
]}; 
 

 
x.cars.forEach(car => { 
 
    car.types.image.forEach(i => console.log(i.url)); 
 
})

Answer 3

：

Answer 4

：私はあなたはそれがこのようにする必要があり、マップ機能 に「タイプ」オブジェクトにアクセスするために逃したと思います

x.cars.map(item => { 
    return(
     item.types.image[0].url; 
    ); 
}); 

Answer 5

あなたがこの方法を試してみますか？

x.cars.map((item, key) => { 
return(
    item.types.image[0].url; 
    //you're missing 'types' 
); 
}); 

私はそれがあなたを助けることを願っています。

Answer 6

x.cars.map（項目=> item.types.image [0]する.url）