javascript - 根据参数字符串值显示 JSON 值

Question

任何帮助将不胜感激!

这是我到目前为止所做的事情。

我有一个index.html页面和一个notice-details.html页面。在 index.html 页面上，我有一个数据网格，并且显示 json 文件中的“标题”。我将标题超链接到details.html，并添加了“数字”，因此每个标题href 都是唯一的。数据网格中链接标题的数据模板如下所示:

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

在 notification-details.html 页面上，我 try catch 查询字符串参数并显示与 json 数组中的“数字”匹配的关联键值对。因此，如果我登陆 notification-details.html?id=2012-01，我想在该页面上显示标题、奖励 claim 到期日期、奖励 claim 表格以及与 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 结构如下:

{
    "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):

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]);
    }
}

您应该认真考虑这种方法，因为您已经注意到您有 1K+ 条通知，如果没有适当的数据结构来支持按通知编号查找，您将必须迭代才能找到您感兴趣的通知。您的使用迭代方法获得的通知越多，性能就会继续变得更差(它的复杂度为 O(n)，其中 n 是通知的数量)。使用我在这里介绍的方法，您将始终执行 O(1) 操作。

我还会开始考虑您是否真的需要通过静态 JSON 文件提供这些数据。这要求您下载整个文件，以便使用时可以访问单个记录。这会浪费大量带宽，并且 UI 中可能存在响应延迟。如果您想要一个完全静态的网站，也许您必须忍受这一点，或者考虑制作一堆单独的 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);