[Solved] Javascript Loop (Beginner) [closed]

by


Using your structure, we can do this:

var links = new Array(); // Missing this part as code

links[0] = new Array();
links[0]["linkName"] = "W3Schools";
links[0]["linkLogo"] = "http://www.w3schools.com/images/w3schools.png";
links[0]["linkURL"] = "http://www.w3schools.com/";
links[0]["linkDescription"] = "W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript and PHP.";

links[1] = new Array();
links[1]["linkName"] = "Code Academy";
links[1]["linkLogo"] = "http://2.bp.blogspot.com/-5_nn_mBDGb0/U3RBFBDiozI/AAAAAAAAm60/kOmwt-F5x8g/s1600/codeacademy.png";
links[1]["linkURL"] = "https://www.codecademy.com/";
links[1]["linkDescription"] = "Codecademy is an online interactive platform that offers free coding classes in 9 different programming languages.";

links[2] = new Array();
links[2]["linkName"] = "The World Wide Web Consortium";
links[2]["linkLogo"] = "http://www.w3.org/2008/site/images/logo-w3c-mobile-lg";
links[2]["linkURL"] = "http://www.w3.org/";
links[2]["linkDescription"] = "The World Wide Web Consortium is the main international standards organization for the World Wide Web.";

// Loop through the main array
for(var i = 0; i < links.length; ++i){

  // As we loop, we'll create new HTML elements that will be configured
  // with the information we extract from the objects in the array:
  var div = document.createElement("div");
  var a = document.createElement("a");
  var img = document.createElement("img");
  
  // Use data in the nested array to configure the new HTML element
  a.href = links[i]["linkURL"];
  img.src = links[i]["linkLogo"];
  img.alt = links[i]["linkDescription"];
  img.title = links[i]["linkName"];
  
  // Place the image inside of the link:
  a.appendChild(img);
  
  // Place the link inside of the div
  div.appendChild(a);
  
  // Inject div element into the web page
  document.body.appendChild(div);
}
img {width:200px}

However, in JavaScript, arrays are best for storing single data items or even nested arrays. But, when you need to store names and values to go with those names, it’s best to use an Object, which is designed for key/value pair storage.

Here is your data, reorganized into objects that are then placed into an array and finally, the array is looped, the object data is extracted and the data is placed into HTML elements.

// First set up objects to store the name/value pairs (arrays don't do this)
var object1 = {
 linkName : "W3Schools",
 linkLogo : "http://www.w3schools.com/images/w3schools.png",
 linkURL : "http://www.w3schools.com/",
 linkDescription : "W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript and PHP."
};

var object2 = {
 linkName : "Code Academy",
 linkLogo : "http://2.bp.blogspot.com/-5_nn_mBDGb0/U3RBFBDiozI/AAAAAAAAm60/kOmwt-F5x8g/s1600/codeacademy.png",
 linkURL : "https://www.codecademy.com/",
 linkDescription : "Codecademy is an online interactive platform that offers free coding classes in 9 different programming languages."
};

var object3 = {
 linkName : "The World Wide Web Consortium",
 linkLogo : "http://www.w3.org/2008/site/images/logo-w3c-mobile-lg",
 linkURL : "http://www.w3.org/",
 linkDescription : "The World Wide Web Consortium is the main international standards organization for the World Wide Web."
};

// Place the objects into an array:
var objects = [object1, object2, object3];

// Loop through each of the objects in the array
for(var i = 0; i < objects.length; ++i){

  // As we loop, we'll create new HTML elements that will be configured
  // with the information we extract from the objects in the array:
  var div = document.createElement("div");
  var a = document.createElement("a");
  var img = document.createElement("img");
  
  // Use data in the object to configure the new HTML element
  a.href = objects[i].linkURL;
  img.src = objects[i].linkLogo;
  img.alt = objects[i].linkDescription;
  img.title = objects[i].linkName;
  
  // Place the image inside of the link:
  a.appendChild(img);
  
  // Place the link inside of the div
  div.appendChild(a);
  
  // Inject div element into the web page
  document.body.appendChild(div);
}
img {width: 200px;}

4

solved Javascript Loop (Beginner) [closed]