查找与元素ID匹配的数组键

时间:2017-05-26 15:50:58

标签: javascript jquery

我有一个对象是解析的json的结果:

{
 "AKH":{
   "name": "Amonkhet",
   "code": "AKH",
   "releaseDate": "2017-04-28",
   "border": "black",
   "block": "Amonkhet",
   "type": "expansion"
   "cards": [
  {
  "artist": "Min Yum",
  "cmc": 5,
  "colorIdentity": [
    "W"
  ],
  "colors": [
    "White"
  ],
  "manaCost": "{3}{W}{W}",
  "multiverseid": 426703,
  "name": "Angel of Sanctions",
  "number": "1",
  "power": "3",
  "rarity": "Mythic Rare",
  "subtypes": [
    "Angel"
  ],
  "toughness": "4",
  "type": "Creature — Angel",
  "types": [
    "Creature"
  ]
},
  "SHM" : {
   "name": "Shadowmoor",
   "code": "SHM",
   "magicCardsInfoCode": "shm",
   "releaseDate": "2008-05-02",
   "border": "black",
   "type": "expansion",
   "block": "Shadowmoor",
   "cards": [
{
  "artist": "Kev Walker",
  "colors": [
    "White"
  ],
  "manaCost": "{W}",
  "name": "Apothecary Initiate",
  "number": "1",
  "power": "1",
  "rarity": "Common",
  "subtypes": [
    "Kithkin",
    "Cleric"
  ],
  "toughness": "1",
  "type": "Creature — Kithkin Cleric",
  "types": [
    "Creature"
  ]
},

注意密钥与代码匹配......这种情况总是如此。

我使用名称和代码制作元素

setList += "<a href='#' onClick='setLinks(this.id)' id=" + setCode + ">" + setName + "</a> " + "<br>" 

我现在正在尝试创建一个将ID(setCode)与我对象中的Key相匹配的函数。

现在我有一个功能可以找到卡片名称并将它们全部列出:

function cardPop(listings){
  var cards = listings.cards;
  for (var i=0; i < cards.length; i++){
    var card = cards[i];
    cardNum = Object.keys(cards)
  }

  $.each(cards, function(cardNum, cardListing) {
    cardName = cardListing.name
    console.log(cardName)
  });
};

但实际上,我希望该卡片种群只能在列表中提供与所点击的链接相匹配的卡片。

function setLinks(clicked_id)
   if clicked_id == ?

我带着一堆东西走来走去......而且我很难过。我已经浏览了stackoverflow和全能的谷歌,但我很难写出我的问题以获得正确的结果。有些东西让我靠近没有雪茄。非常感谢任何帮助!

编辑:

@gvmani ..非常感谢您的帮助!这就是我最终的结果。不是最终产品,但现在工作!

 $(document).ready(function(){
  $.getJSON('https://api.myjson.com/bins/s7and', function (data) {
  json = data
  set_codes = Object.keys(data);
  for (var i=0; i < set_codes.length; i++){
  set = set_codes[i];
}
 $.each(data, function(set_codes, listings){
  setName = listings.name
  setCode = listings.code
  setPop(setCode, setName)
});
}); 
});  

//Set population
 function setPop(){
  var setList = "";
  setList += "<a href='#' onClick='setLinks(this.id)' id=" + setCode + ">" + setName + "</a> " + "<br>"
 $('.things').append(setList);
 };

 // Function to Generate Card List
 function setLinks(clicked_id){
  $.each(json, function(setCode, setListing) {
   $.each(setListing.cards,function(cardNum, cardListing){
    if(setListing.code === clicked_id){
    console.log(cardListing.name);
 }
 });
 });

}

1 个答案:

答案 0 :(得分:0)

根据评论发布更新。

&#13;
&#13;
var data =  {
 	"AKH": {
 		"name": "Amonkhet",
 		"code": "AKH",
 		"cards": [{
 			"name": "1"
 		}, {
 			"name": "2"
 		}]
 	},
 	"SHM": {
 		"name": "Shadowmoor",
 		"code": "SHM",
 		"cards": [{
 			"name": "3"
 		}, {
 			"name": "4"
 		}]
 	}
 }
 
 $(document).ready(function(){
 
 $.each(data, function(cardNum, cardListing) {
      
    $("<a href='#' onClick='setLinks(\""+cardNum+"\")' id=" + cardListing.code + ">" + cardListing.name + "</a> <br>").appendTo("#links");
    
  });



 });
 
 function setLinks(code){
 $("#cards").empty();
  $.each(data, function(cardNum, cardListing) {
    $.each(cardListing.cards,function(ind,card){
    if(cardListing.code === code){
    
    $("<a href='#'>" + card.name + "</a> <br>").appendTo("#cards");
    }
    });
  });

}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="links">

</div>
<div id="cards">
</div>
</body>
&#13;
&#13;
&#13;