在Search App中用JSON数据交换JavaScript数组？

Question

Hello you wonderful people, I have an application in which the script search.js searches a JavaScript array and displays a list of results when a user enters a word into a search bar and the users presses enter. I am trying to switch the array for JSON data in a file artists.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);

I want to replace the artists array with JSON data below so I can search through this instead of the Array, I can load the JSON data fine but Im struggling with how to replace the array in the function. Any help will be much appreciated.

[
{
    "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"
},

]

Answer 1

You want to turn a class into a simple object, the best way is to add a method to the class like this:

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

then all you need to do to transform the Artist array to a JSON array is artists.map(function(a) { return a.toJson(); })