On my homework, I have to create an array, and I did that, but not I need it sort into an ordered list. My professor does not give any example codes and I couldn't find anything on the web that can help me put into a ordered list. Help!
Direction specifically: In an external JavaScript file, create an array containing the titles of your favorite books (you can make up titles if you wish.) When the page loads, use JavaScript to display the titles on the Web page within an ordered list. Since the book list is variable, the list must be established dynamically. Use either the write method of the document object or modify the innerHTML property of an element.
I have
var books = new Array();
books[0] = "Fifty Shades of Grey";
books[1] = "Twilight";
books[2] = "The Notebook";
books[3] = "Dear John";
books[4] = "Demon in my View";
var bookList = books.sort();
document.write(bookList);
but that only sorts with mas :(
On my homework, I have to create an array, and I did that, but not I need it sort into an ordered list. My professor does not give any example codes and I couldn't find anything on the web that can help me put into a ordered list. Help!
Direction specifically: In an external JavaScript file, create an array containing the titles of your favorite books (you can make up titles if you wish.) When the page loads, use JavaScript to display the titles on the Web page within an ordered list. Since the book list is variable, the list must be established dynamically. Use either the write method of the document object or modify the innerHTML property of an element.
I have
var books = new Array();
books[0] = "Fifty Shades of Grey";
books[1] = "Twilight";
books[2] = "The Notebook";
books[3] = "Dear John";
books[4] = "Demon in my View";
var bookList = books.sort();
document.write(bookList);
but that only sorts with mas :(
Share Improve this question asked Sep 26, 2012 at 17:26 ai5uzuai5uzu 131 gold badge1 silver badge5 bronze badges 4- what do you mean by "sorts with mas"? – Daniel A. White Commented Sep 26, 2012 at 17:27
- 4 You seriously couldn't find an example to sort arrays in Javascript? – Vivin Paliath Commented Sep 26, 2012 at 17:28
- 1 @VivinPaliath The OP dis sort the array, they're kind of lost on how to make a list out of that – Ruan Mendes Commented Sep 26, 2012 at 17:33
- @JanisYee Time to accept one of the answers! Hit and Runs are shunned. – Ruan Mendes Commented Sep 26, 2012 at 19:07
3 Answers
Reset to default 3You already sorted the array. Just print each book into an <li>
and append the HTML to your list.
The reasons you see mas when you document.write(boooks)
is that the document.write
calls toString
on the object that is passed to it, toString
for an array is implemented as array.join()
and the default separator is a ma.
<ol id="books">
</ol>
// This looks much nicer a separate call for each array member
var books = [
"Fifty Shades of Grey",
"Twilight",
"The Notebook"
];
var html = "";
for (var i =0; i < books.length; i++) {
html += "<li>" + books[i]+ "</li>";
}
document.getElementById("books").innerHTML = html;
Sample http://jsfiddle/nkQLM/1/
Just put the HTML code for the list around the strings:
document.write('<ol><li>'+bookList.join('</li><li>')+'</li></ol>');
A bit beyond the exercice, but putting content in the page like this assumes that there is no characters in the strings that has a special meaning in the HTML code, like <
, >
or &
. Ideally you would create element objects, put the text in them, and then add them to the document tree. For example using the jQuery library:
Put an element in the page:
<ol id="list"></ol>
In the ready event (or a script tag below the list) put the list elements in the list:
$.each(booklist, function(){
$('#list').append($('<li/>').text(this));
});
No it is not sorting the array with ma. DEMO
when you are calling document.write(bookList);
bookList getting converted into string by auto insertion of ',' between items
you can replace the ma using join
(in my example with space)
as
document.write(bookList.join(" "))
if you want to generate orderlist use following code
var html ="<ol><li>"+ bookList.join('</li><li>') + "</li></ol>";