Javascriptのforループを使用してHTML divにオブジェクトを入力する

Question

forループを使用してオブジェクトの素材を繰り返し、HTMLのdivに素材を入力しようとしています。今は配列を受け入れるようにコードを設定しましたが、代わりにオブジェクトを使用したいと思います。

var animals = [ 
    { 
    name:'Aye Aye', 
    description: 'blue', 
    img: 'http://cdnimg.in/wp-content/uploads/2015/06/335.jpg?cfaea8', 
    price:500 
    }, { 
    name:'Little Imp', 
    description:'yellow', 
    img:'http://cdnimg.in/wp-content/uploads/2015/06/334.jpg?cfaea8', 
    price:3000 
    }, { 
    name:'Long Nose Monkey', 
    decription:'grey', 
    img:'http://cdnimg.in/wp-content/uploads/2015/06/492.jpg?cfaea8', 
    price:5000 
    }, { 
    name:'Nicobar Bird', 
    decription:'purple', 
    img:'http://cdnimg.in/wp-content/uploads/2015/06/471.jpg?cfaea8', 
    price: 6 
    }, { 
    name:'Slow Loris', 
    decription: 'brown', 
    img: 'https://s-media-cache-ak0.pinimg.com/736x/49/09/8f/49098fbc3c9a37fb03034b45e89c5cd4.jpg', 
    price:90 
    }, { 
    name:'Tucan', 
    decription:'orange', 
    img: 'http://cdnimg.in/wp-content/uploads/2015/06/526.jpg?cfaea8', 
    price:100 
    }, { 
    name:'Fennec Fox' 
    decription:'yellow' 
    img:'http://cdnimg.in/wp-content/uploads/2015/06/526.jpg?cfaea8', 
    price:500 
    }, { 
    name:'Sugar Glider', 
    description: 'green', 
    img: 'https://pbs.twimg.com/media/CNd03WIUwAAqKHg.jpg:large', 
    price:1000000 
    } 
] 

function animal() { 
    // var animalName = ['Aye Aye', 

    var animalElement = document.getElementById("div0"); 

    for (i=0; i<animalName.length; i++) { 
    animalElement.innerHTML += '<h2>' + animalName[i]+'</h2>' +'<p>' + animalDescription[i] +'</p>' + '<p>' + animalPrice[i] +'</p>' + '<p>' + animalImage[i] + '</p>'; 
    }; 
}; 

animal(); 

Answer 1

これは、あなたが現在持っているもののオフに基づいて、シンプルなソリューションです：

function generateAnimals() { 
    var animalElements = document.getElementById("div0"); 
    var html = ''; 

    for (i = 0; i < animals.length; i++) { 
     var animal = animals[i]; 

     html += '<h2>' + animal.name + '</h2>' 
      + '<p>' + animal.description + '</p>' 
      + '<p>' + animal.price + '</p>' 
      + '<p>' + animal.image + '</p>'; 
    } 

    animalElements.innerHTML += html; 
} 

generateAnimals(); 

は物事がより複雑になり始めたら、このような作成要素が乱雑得ることができることを警告されます。