Question

非常感谢任何帮助！

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

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

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

在notice-details.html页面上我试图捕获查询字符串参数并显示与json数组中的“number”匹配的关联键值对。因此，如果我登陆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结构如下：

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

根据参数字符串值

1 个答案: