根據參數字符串值顯示JSON值

Question

任何幫助將不勝感激！

這是我迄今爲止所做的。

我有一個index.html頁面和一個notice-details.html頁面。在index.html頁面上，我有一個數據網格，並且顯示來自json文件的'title'。我將標題超鏈接到details.html，並添加了「數字」，因此每個標題href都是唯一的。在數據網格中的鏈接標題的數據模板看起來像這樣：

<a href="notice-details.html?id={{number}}">{{title}}</a> 

在通知-details.html頁我試圖捕捉查詢字符串參數，並顯示匹配的相關鍵值對'數字'在json數組中。因此，如果我在notice-details.html？id = 2012-01上登陸，我希望在該頁面上顯示與json中與2012-001相關的標題，獎勵索賠到期日，獎勵索賠表和日期。

我被困在如何匹配數字和只查詢匹配的內容。

JSON：

{ 
"notices": [ 
    { 
     "number": "2012-001", 
     "link": "google.com", 
     "title": "sample title", 
     "awardClaimDueDate": "", 
     "awardClaimForms": "", 
     "datePosted": "1/31/2012" 
    }, 
    { 
     "number": "2012-001", 
     "link": "google.com", 
     "title": "sample title", 
     "awardClaimDueDate": "", 
     "awardClaimForms": "", 
     "datePosted": "1/31/2012" 
    } 
    ] 
} 

JS：

function jsonParser(json){ 
$('#load').fadeOut(); 
$.getJSON('notices.json',function(data){ 

    // Parse ID param from url 
    var noticeParamID = getParameterByName('id'); 

    $.each(data.notices, function(k,v){ 
     var noticeNumber = v.number, 
      noticeTitle = v.title, 
      claimDueDate = v.awardClaimDueDate, 
      claimForms = v.awardClaimForms, 
      date = v.datePosted; 

      if(noticeParamID == noticeNumber){ 
       // how can I display content that matches the url param value (noticeURLNumber)? 
      } 
    }); 
}); 
} 
// get URL parameter by name 
function getParameterByName(name) { 
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
     results = regex.exec(location.search); 
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
} 

Answer 1

我會親自做可用第二JSON數據結構，使您可以根據該通知數，而不是查找必須像對待當前數據結構一樣遍歷一系列通知。舉例來說，如果你有JSON的結構是這樣的：

var noticeParamID = getParameterByName('id'); 
// get notice based on this id 
$.getJSON('noticesByID.json',function(data){ 
    var notice = data[noticeParamID]; 
    // do something with the notice 
    // let's say we are updating DOM element with id's the same as notice keys 
    for (propKey in notice) { 
     $('#'+propKey).html(notice[propKey]); 
    } 
} 

：

{ 
    "2012-001": { 
     "number": "2012-001", 
     "link": "google.com", 
     "title": "sample title", 
     "awardClaimDueDate": "", 
     "awardClaimForms": "", 
     "datePosted": "1/31/2012" 
    }, 
    "2012-002": { 
     "number": "2012-002", 
     "link": "yahoo.com", 
     "title": "another title", 
     "awardClaimDueDate": "", 
     "awardClaimForms": "", 
     "datePosted": "3/31/2012" 
    }, 
    ... 
} 

然後，你可以很容易地從JSON像這樣創建（假設這個新的JSON文件被稱爲noticesByID.json）的對象查找數據

您應該真的強烈地考慮這種方法，因爲您已經注意到您有1K +通知，如果沒有適當的數據結構來支持通過通知編號進行查找，您將不得不迭代查找您感興趣的通知。隨着迭代方法的越來越多的通知（它已經O（n）複雜性，其中n是通知的數量）。通過我在這裏介紹的方法，您將始終執行O（1）操作。

我還會開始考慮是否真的需要通過靜態JSON文件提供這些數據。這要求您下載整個文件，以便使用可以獲得單個記錄。這是在用戶界面中浪費了大量帶寬和潛在的響應滯後。如果你想要一個完全靜態的網站，也許你必須忍受這一點，或考慮製作一堆單獨的JSON文件（即2012-011.json），以儘量減少下載。如果您已經擁有一個動態網站或不反對動態網站，那麼您可以查看數據庫和其他可以簡化數據查找問題的事物。

每評論，這裏是對現有JSON轉換爲所需要的這種做法新JSON格式的建議：

var sourceJSON = '{"notices":...}'; // your source JSON 
var sourceObj = JSON.parse(sourceJSON); 
var notices = sourceObj.notices; 
var targetObj = {}; // the target object you will load notice data into 

// fill targetObj with data structure you want 
for(i = 0; i < notices.length; i++) { 
    // we use the `number` property of the notice as key 
    // and write the whole notice object to targetObj at that key 
    targetObj[notices[i].number] = notices[i]; 
} 

// create new JSON from targetObj 
newJSON = JSON.stringify(targetObj);