Сортировка, переключение и отображение массива, сгенерированного из массива объектов

Question

Мне кажется, что списки появляются только на странице, но нажатие на кнопки HTML не отображает переупорядоченный список.

По сути, я пытаюсь получить HTML для каждого объекта. в массиве отображаются на странице и упорядочены в соответствии с функциями, запускаемыми кнопками.

Javascript

var bookReviewsByTitleDateTopic = {
    books: [
        {
            html: `<li><a href="december_2018/reviews.html">A Cage Went in Search of a Bird</a> <font id="br2">by Cary Fagan Illustrated by Banafsheh Erfanian </font></li>`,
            year: 2018,
            month: 12,
            topic: ["Children's Fiction"],
            title: `A Cage Went in Search of a Bird`
        },
        {
            html: `<li><a href="December2013/Reviews_December_2013.html#academic">Academic Conversations</a> <font id="br2">by Jeff Zwiers and Marie Crawford</font></li>`,
            year: 2013,
            month: 12,
            topic: ["Adult Non Fiction"],
            title: `Academic Conversations`
        },
        {
            html: `<li><a href="/publications/professionally_speaking/march_2019/Reviews.html">Accessible Algebra</a> <font id="br2">By Anne m. Collins and Steven r. Benson</font></li>`,
            year: 2019,
            month: 03,
            topic: ["Adult Non Fiction"],
            title: `Accessible Algebra`
        },
        {
            html: `<li><a href="http://professionallyspeaking.oct.ca/june_2012/resources/reviews.aspx#aboriginal">Achieving Aboriginal Student Success</a> <font id="br2">by Pamela Rose Toulouse</font></li>`,
            year: 2012,
            month: 06,
            topic: ["Adult Non Fiction"],
            title: `Achieving Aboriginal Student Success`
        },
        {
            html: `<li><a href="september_2014/Reviews_September_2014.html#advocating">Advocating for English Learners</a> <font id="br2">by Diane Staehr Fenner</font></li>`,
            year: 2014,
            month: 09,
            topic: ["Adult Non Fiction"],
            title: `Advocating for English Learners`
        },
        {
            html: `<li><a href="http://professionallyspeaking.oct.ca/june_2013/resources/reviews.html#feilding">The Art of Fielding</a> <font id="br2">by Chad Harbach</font></li>`,
            year: 2013,
            month: 06,
            topic: ["Adult Fiction"],
            title: `The Art of Fielding`
        },
        {
            html: `<li><a href="/publications/professionally_speaking/march_2014/Reviews_March_2014.html#assessment">Assessment in Perspective </a><font id="br2">by Clare Landrigan and Tammy Mulligan</font></li>`,
            year: 2014,
            month: 03,
            topic: ["Adult Non Fiction"],
            title: `Assessment in Perspective`
        }
    ]
};


var sortAlphabetical = function () {

    var listItemsAlpha = [];


    //sort by year
    bookReviewsByTitleDateTopic.books.sort(function (a, b) {
        return a.title - b.title;
    });

    //push
    for (i = 0; i < bookReviewsByTitleDateTopic.books.length; i++) {
        listItemsAlpha.push(bookReviewsByTitleDateTopic.books[i].html);
    }

    //display on site
    for (i = 0; i < bookReviewsByTitleDateTopic.books.length; i++) {
        document.querySelector("#booksList").innerHTML += listItemsAlpha[i];
    }

    console.log(listItemsAlpha)

};

var sortDate = function () {
    var listItemsDate = [];


    //sort by year
    bookReviewsByTitleDateTopic.books.sort(function (a, b) {
        return a.year - b.year;
    });

    //sort by month
    bookReviewsByTitleDateTopic.books.sort(function (a, b) {
        return a.month - b.month;
    });

    //push
    for (i = 0; i < bookReviewsByTitleDateTopic.books.length; i++) {
        listItemsDate.push(bookReviewsByTitleDateTopic.books[i].html);
    }

    //display on site
    for (i = 0; i < bookReviewsByTitleDateTopic.books.length; i++) {
        document.querySelector("#booksList").innerHTML += listItemsDate[i];
    }

    console.log(listItemsDate)
};

html

<button onclick="sortAlphabetical()">Alphabetical</button>
<button onclick="sortDate()">Date</button>

<div id="bookReviewsList">Book reviews by title, date and topic</div>
<div id="booksList"></div>

Answer 1

Вы делаете +=, даже не удаляя содержимое, поэтому оно просто добавляется. Кроме того, для строк вы не можете просто сделать a.title - b.title, вам нужно использовать что-то вроде localeCompare

var bookReviewsByTitleDateTopic = {
    books: [
        {
            html: `<li><a href="december_2018/reviews.html">A Cage Went in Search of a Bird</a> <font id="br2">by Cary Fagan Illustrated by Banafsheh Erfanian </font></li>`,
            year: 2018,
            month: 12,
            topic: ["Children's Fiction"],
            title: `A Cage Went in Search of a Bird`
        },
        {
            html: `<li><a href="December2013/Reviews_December_2013.html#academic">Academic Conversations</a> <font id="br2">by Jeff Zwiers and Marie Crawford</font></li>`,
            year: 2013,
            month: 12,
            topic: ["Adult Non Fiction"],
            title: `Academic Conversations`
        },
        {
            html: `<li><a href="/publications/professionally_speaking/march_2019/Reviews.html">Accessible Algebra</a> <font id="br2">By Anne m. Collins and Steven r. Benson</font></li>`,
            year: 2019,
            month: 03,
            topic: ["Adult Non Fiction"],
            title: `Accessible Algebra`
        },
        {
            html: `<li><a href="http://professionallyspeaking.oct.ca/june_2012/resources/reviews.aspx#aboriginal">Achieving Aboriginal Student Success</a> <font id="br2">by Pamela Rose Toulouse</font></li>`,
            year: 2012,
            month: 06,
            topic: ["Adult Non Fiction"],
            title: `Achieving Aboriginal Student Success`
        },
        {
            html: `<li><a href="september_2014/Reviews_September_2014.html#advocating">Advocating for English Learners</a> <font id="br2">by Diane Staehr Fenner</font></li>`,
            year: 2014,
            month: 09,
            topic: ["Adult Non Fiction"],
            title: `Advocating for English Learners`
        },
        {
            html: `<li><a href="http://professionallyspeaking.oct.ca/june_2013/resources/reviews.html#feilding">The Art of Fielding</a> <font id="br2">by Chad Harbach</font></li>`,
            year: 2013,
            month: 06,
            topic: ["Adult Fiction"],
            title: `The Art of Fielding`
        },
        {
            html: `<li><a href="/publications/professionally_speaking/march_2014/Reviews_March_2014.html#assessment">Assessment in Perspective </a><font id="br2">by Clare Landrigan and Tammy Mulligan</font></li>`,
            year: 2014,
            month: 03,
            topic: ["Adult Non Fiction"],
            title: `Assessment in Perspective`
        }
    ]
};


var sortAlphabetical = function () {

    var listItemsAlpha = [];


    //sort by year
    bookReviewsByTitleDateTopic.books.sort(function (a, b) {
        return a.title.localeCompare(b.title);
    });

    //push
    for (i = 0; i < bookReviewsByTitleDateTopic.books.length; i++) {
        listItemsAlpha.push(bookReviewsByTitleDateTopic.books[i].html);
    }

    //display on site
    document.querySelector("#booksList").innerHTML = listItemsAlpha.join('\n');

};

var sortDate = function () {
    var listItemsDate = [];


    //sort by year
    bookReviewsByTitleDateTopic.books.sort(function (a, b) {
        return a.year - b.year;
    });

    //sort by month
    bookReviewsByTitleDateTopic.books.sort(function (a, b) {
        return a.month - b.month;
    });

    //push
    for (i = 0; i < bookReviewsByTitleDateTopic.books.length; i++) {
        listItemsDate.push(bookReviewsByTitleDateTopic.books[i].html);
    }

    //display on site
    document.querySelector("#booksList").innerHTML = listItemsDate.join('\n');
};

<button onclick="sortAlphabetical()">Alphabetical</button>
<button onclick="sortDate()">Date</button>

<div id="bookReviewsList">Book reviews by title, date and topic</div>
<div id="booksList"></div>