javascript - 排序、切换和显示从对象数组生成的数组

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>