:: Stay Weird :: 我是Ter

- Keywords -

1. 將JSON從外部導入／使用本機的JSON

2. 使用JSON的資料

此文章為記錄菜鳥coding歷程，若能提點還請各路大神回覆～

在最一開始還沒決定要用JSON方式紀錄題庫時，我想到的問題是「如果要做比對，是不是要在後端儲存資料，以便前端將資料傳向後端做比對？」

後來經提點，才知道只要用JSON方式做資料儲存與處理，接下來使用 JS／jQuery 就能做簡單比對了。

問題一：如何將JSON檔從外部導入／使用本機的JSON（參考對策：玩具烏托邦：用 jQuery 無痛讀檔、顯示 ）

（在非常新手的狀態中，拿去餵狗的關鍵字真的是無奇不有，雖然知道 Stack Overflow 會有很多相類似的問題，不過我實在是不確定我的問題到底出在哪......）

由於整個程式在使用時會大量更動JSON的資料，所以選參考對策中的第二種方式來讀Local的JSON。

衍伸問題：

1. 為什麼我怎樣都抓不到JSON？

注意連結網址或JSON資料類型有沒有錯。（新手常出現的問題，哭）

2. 為什麼我開了localhost，做的更動都沒有反應？

要注意快取。

3. $.ajax 跟 $.getJSON 同樣能做到，那麼要選哪個？

尚未參透，但目前看來 $.ajax 能控制得比較多（像是傳輸類型要是get還是post），但像此次在做的無需考慮資料保密等，所以我直接使用 $.getJSON 。呼叫未來的自己在未來能夠好好解釋這些差別。

最後輸出：

    $.getJSON("js/test.json", function(result){
        vocaData = result;
        init();
    });

問題二：JSON導入後，如何使用資料？

最初我在上述的程式碼前面宣告了一個var名為vocaData，作為getJSON後將資料裝進去的變數，結果在外部叫vocaData的時候出現undefined，貌似只能在getJSON裡面動用資料，因此我剛開始還把接下來所有程式碼全部寫在getJSON裡面（掩面），即使我知道這是一件又蠢又醜的事情，但我還能怎麼辦～～～～～

結果就如上所見的程式碼中，我在讀到JSON之後把result帶入vocaData中，又直接呼叫了另一個function init();

在inti()裡，我可以使用變數 vocaData 的資料，進而完成後續的功能。

光是要把本地JSON導入與使用，就讓我的頭腦燃燒了好幾天，老實說我很怕一直找「解決方法」反而會變成囫圇吞棗，知其然而不知其所以然。但是沒辦法，只有碰到問題的時候才會去思考問題的本身是什麼，如果現在的觀念有錯，就希望未來的我有一天能夠回頭來為現在的我好好解答。

還有，其實剛開始我的code非常地亂，還好有個大神男友不厭其煩教我做code review...