JavaScript Objects Arrays & Printing

Question

I want to create & print a list of 20 businesses.

Server only allows for HTML & JavaScript and no jQuery plugins.

I need to use an Arrays to add 20 more Businesses w/ minimum coding. Would be nice to have a code for easily adding 20 more businesses.

Each array needs to print a separate bulleted list / Unordered List ( "ul")

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Yellow Pages</h2>

<p id="businessID"></p>

<script>

// Business Object
Business = {
  "businessName",
  "businessType",
  "businessNumber",
}

// Constructor function for Business Object
function business( businessName, businessType, businessNumber ) {
    this.businessName = name,
    this.businessType = type,
    this.businessNumber = number,
}

// Create 3 Business Objects
var business1 = new business("businessName1", "businessType1", "businessNumber1");
var business2 = new business("businessName2", "businessType2", "businessNumber2");
var business3 = new business("businessName3", "businessType3", "businessNumber3");

// Arrays of Business Objects, (Hopefully)
var businessesArray = [

  {"businessName1", "businessType1", "businessNumber1"},
  {"businessName2", "businessType2", "businessNumber2"},
  {"businessName3", "businessType3", "businessNumber3"},
];

// Create Bulleted List & Print
var text = "<ul>";
for(i=0; i< businesses.length; i++){
  for(j=0; j< businesses[i].length; j++){
  text += "<li>" + businesses[i][j] + "</li>";
  }

text += "<BR>";
}
text += "</ul>";
document.getElementById("businessID").innerHTML = text;

</script>    
</body>
</html>

Try code here https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

Sorry, I am a novice. Please help more in details :-)

Thank you in advance for all your help with my very first question! :-)

You should store the business information in an object instead of in an array. Then loop through the initial array which contains the business objects. [{}, {}] — Rastalamm
– Rastalamm, Commented Nov 19, 2018 at 21:27

devlin carnate · Accepted Answer · 2018-11-19 21:43:30Z

1

To print the array based on the structure you've given, use two loops (one for the inner array and the other for the outer array):

for (var i = 0; i < businesses.length; i++) {
  var ul = $("<ul/>");
  $('#list').append(ul);
  console.log((businesses[i]));
  for (var j = 0; j < businesses[i].length; j++) {
    var li = $("<li/>");
    li.text(businesses[i][j]);
    ul.append(li);
  }
}

Here is a Fiddle demo: https://jsfiddle.net/zephyr_hex/vqodf1xn/13/

answered Nov 19, 2018 at 21:43

devlin carnate

8,6727 gold badges55 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Farhang Over a year ago

Sorry, the server only allows me to use HTML & JavaScript code I can not use jQuery Thank you for your reply, thought!

devlin carnate Over a year ago

@Farhang : you should be able to use the same structure with JS. Two loops, like I've shown above.

Farhang Over a year ago

Thank you. What is "#list"? Is it a variable? Do I have to declare it before? How about "$"? Thanks!

devlin carnate Over a year ago

@Farhang : #list is the id of an HTML element, such as a div that the ul is appended to.

Collectives™ on Stack Overflow

JavaScript Objects Arrays & Printing

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related