在搜索应用程序中用JSON数据交换JavaScript数组

Swapping a JavaScript array with JSON data in a Search App?

本文关键字：数据 交换 JavaScript 数组 JSON 搜索 应用程序      更新时间：2023-09-26

大家好，我有一个应用程序，脚本search.js在其中搜索JavaScript数组，并在用户在搜索栏中输入单词并按下回车键时显示结果列表。我正在尝试将数组切换为artists.JSON.文件中的JSON数据

function Artist(image, title, link) {
    this.image = image;
    this.title = title;
    this.link = link;
}
var artists = []
artists.push(new Artist("image", "item1", "1.html"));
artists.push(new Artist("image", "item2", "2.html"));
artists.push(new Artist("image", "item3", "3.html"));
artists.push(new Artist("image", "item4", "4.html"));
artists.push(new Artist("image", "item5", "5.html"));
artists.push(new Artist("image", "item6", "6.html"));
var searchBox = document.querySelector("#search");
searchBox.focus();
function doSearch(event) {
    var msg = document.querySelector("#msg");
    var artistList = document.querySelector("#artist-list");
    artistList.innerHTML = "";
    var searchTerm = searchBox.value.trim().toLowerCase();
    msg.innerHTML = "";
    if (event.keyCode === 13) {
        if (searchTerm === "") {
            msg.innerHTML = "You didn't enter anything";
            msg.classList.add("error");
        } else {
            var count = 0;
            for (var i = 0; i < artists.length; i ++) {
                if (artists[i].title.toLowerCase().search(searchTerm) !== - 1) {
                    artistList.innerHTML += "<li><a href='artists/" + artists[i].link + "'>" + artists[i].title + "<a/></li>";
                    count ++;
                }
//else if()
            }
            msg.innerHTML = "For " + searchTerm + ". We found " + count + " results.";
            msg.classList.remove("error");
        }
    }
}
searchBox.addEventListener("keyup", doSearch, false);
var msgTxt = document.querySelector("#msg");
var artistList = document.querySelector("#artist-list");
var searchBox = document.querySelector("#search");
msgTxt.innerHTML = "";
searchBox.value = "";
searchBox.addEventListener("keyup", doSearch, false);

我想在下面用JSON数据替换艺术家数组，这样我就可以搜索这个数组而不是数组，我可以很好地加载JSON数据，但我很难在函数中替换数组。任何帮助都将不胜感激。

[
{
    "image":"image1",
    "title":"title1",
    "link":"link1"
},
{
    "image":"image2",
    "title":"title2",
    "link":"link2"
},
{
    "image":"image3",
    "title":"title3",
    "link":"link3"
},
{
    "image":"image4",
    "title":"title4",
    "link":"link4"
},
{
    "image":"image5",
    "title":"title5",
    "link":"link5"
},

]

如果想把一个类变成一个简单的对象，最好的方法是向类中添加一个方法，如下所示：

Artist.prototype.toJson=function() {
  return {
    image:this.image,
    title:this.title,
    link:this.link
  }
}

那么将Artist数组转换为JSON数组所需要做的就是artists.map(function(a) { return a.toJson(); })

相关文章：