匹配來自兩個單獨的JSON feed的值

Question

我正在一個由多個JSON提要AAAX驅動的項目。 我使用一個提要創建一個類別列表，該列表過濾了第二個提要中的文章。

我的第一個供稿看起來像這樣：

"value": [
    {
        "Id": "1ca44b5b-06ab-63fa-8375-ff00000b3273",
        "Title": "Safety",
    }, ...
]

我的第二個提要看起來像這樣：

value": [
    {
        "Id": "30b94b5b-06ab-63fa-8375-ff00000b3273",
        "Title": "Test article",
        "Body": "Test content",
        "topics": [
            "1ca44b5b-06ab-63fa-8375-ff00000b3273"
        ],
    }, ...
]

第一個供稿是主題列表，第二個供稿是由這些主題標記的一組文章。 我可以匹配用於過濾的GUID，但問題是由於第二個提要的限制，我無法將標題“安全”添加到文章中。 出於多種原因，我需要此標題，主要是樣式設計以及將標題推送到頁面URL。

我正在嘗試找到最好的方法來使其動態化。 基本上，我想根據我的第一個提要找到將GUID與第二個提要中的標題相關聯的最佳方法。

這是我提取兩個提要的方式：

Feed 1：

$('.category-filters').each(function(){
    var $this = $(this);

    $.ajax({
        method:"GET",
        url: '/api/stories/flat-taxa?$filter=TaxonomyId%20eq%20dca84b5b-06ab-63fa-8375-ff00000b3273',
        data: { format:'json'},
        context:$this
    }).success(function(data){

        var category = data.value;
        var filter = [];

        for (i = 0; i < category.length; i++) { 
            $this.append('<li><input type="checkbox" id="' + category[i].Id + '"><label for="' + category[i].Id + '">' + category[i].Title + '</label></li>');
        } 
    });
});

提要2：

function storyCards(){

    $.ajax({ 
        method:"GET",
        url: url,
        data: { format:'json' },
        context:$('.story-cards')
    }).success(function(data){ 
        var story = data.value;

        for (i = 0; i < story.length; i++) { 
            $('.story-cards').append('<li class="item card-item"><div class="card"><div class="content"><h2>' + story[i].Title + '</h2>' + story[i].Summary + '</div><div class="card-footer"><a class="button" href="' + story[i].UrlName + '">' + story[i].ButtonText + '</a></div></div></li>');
        }
    }); 
}

希望這是有道理的，如果需要，樂意提供更多詳細信息。

Answer 1

進行一些循環，然后將主題標題添加到以下文章中：

  var obj1 = {
  "value": [{
    "Id": "1ca44b5b-06ab-63fa-8375-ff00000b3273",
    "Title": "Safety",
  }]
};

var obj2 = {
  "value": [{
    "Id": "30b94b5b-06ab-63fa-8375-ff00000b3273",
    "Title": "Test article",
    "Body": "Test content",
    "topics": [
      "1ca44b5b-06ab-63fa-8375-ff00000b3273"
    ],
  }]
};

$.each(obj2.value, function(i, v) {
  $.each(obj1.value, function(index, val) {
    if (v.topics[0] == val.Id) {
      obj2.value[i]['TopicName'] = val.Title;

    }
  });
});
console.log(obj2);

演示： https : //jsfiddle.net/jrdn27rf/

在這種情況下，您可以執行以下操作：

函數storyCards（）{

$.ajax({ 
    method:"GET",
    url: url,
    data: { format:'json' },
    context:$('.story-cards')
}).success(function(data){ 
    var story = data.value;

    for (i = 0; i < story.length; i++) { 
        var categoryTitle = $('label[for="'+story[i].topics[0]+']"').text();
        $('.story-cards').append('<li class="item card-item"><div class="card"><div class="content"><h2>' + story[i].Title + '</h2>' + story[i].Summary + '</div><p>'+categoryTitle +'</p><div class="card-footer"><a class="button" href="' + story[i].UrlName + '">' + story[i].ButtonText + '</a></div></div></li>');
    }
}); 

}

Answer 2

似乎是共享字典的好地方，您可以在其中將GUID與標題進行匹配。

//dynamically set the titles
var guid2title = {}
//titles is the array of titles/GUID in your post
for (var i = 0; i < titles.length; i++){
   guid2title[titles[i]["Id"]] = titles[i]["Title"];
}

//items is the json array of articles in your post
for (var i = 0; i < items.length; i++){
    items[i].titles = []; //used later to save to the object
    for (var j = 0; j < items[i].topics.length; j++){
       var GUID = items[i].topics[j];
       var title = guid2title[GUID];

       //attach it to your item for later use
       items[i].titles.push(title);

    }

}