2016-04-18 5 views
0

こんにちは、私はスクリプトsearch.jsがJavaScript配列を検索し、ユーザーが検索バーに単語を入力し、ユーザーがenterを押すと結果のリストを表示するアプリケーションがあります。私はファイルのartist.jsonでJSONデータの配列を切り替えようとしています。検索アプリケーションでJSONデータを使用してJavaScript配列をスワップしますか?

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

]

+0

です。単にjsonデータを 'artists'変数に入れることはできませんか? –

+0

AJAX https://developer.mozilla.org/en-US/docs/AJAX/Getting_Startedまたはhttp://api.jquery.com/jquery.ajax/で何か試してみてください。何か試してみると質問する。それを達成するための方法が多すぎるため、この質問は話題にはなりません。 –

+0

JavaScript配列を検索したくないので、JSONデータをAJAX経由で読み込み、その代わりに検索したいと思います。 – Reypoints

答えて

0

あなたが最良の方法は、このようなクラスにメソッドを追加することで、簡単なオブジェクトにクラスを有効にする:

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

次にあなたがする必要があるすべてアーティスト配列をJSON配列に変換する方法はartists.map(function(a) { return a.toJson(); })

関連する問題