javascript - 过滤 JSON 数据并基于单选按钮创建可点击列表

Question

所以我之前的问题得到了回答，我正在尝试根据选择的单选按钮添加它。它现在不显示单选按钮或所选项目文本以外的任何内容。它将从另一个 JSON 数组创建一个可点击的列表项。最终目标是显示单选按钮选择项目，在生成列表时隐藏单选按钮，然后从列表中选择要从库存中添加/修改/删除的特定项目。这是我到目前为止所拥有的：

         const header = document.querySelector('header');
         const section = document.querySelector('section');
         const
            form              =  document.querySelector('#input4radio')
            , selectedItemChx =  document.querySelector('#selectedItem > em')
            ;

         const inventoryItems = 
           [ { "itemID": 0,  "itemName": "Ammo"          } 
           , { "itemID": 1,  "itemName": "Armor"         } 
           , { "itemID": 2,  "itemName": "Good"          } 
           , { "itemID": 3,  "itemName": "Potion"        } 
           , { "itemID": 4,  "itemName": "Ring"          } 
           , { "itemID": 5,  "itemName": "Rod"           } 
           , { "itemID": 6,  "itemName": "Scroll"        } 
           , { "itemID": 7,  "itemName": "Staff"         } 
           , { "itemID": 8,  "itemName": "Wand"          } 
           , { "itemID": 9,  "itemName": "Weapon"        } 
           , { "itemID": 10, "itemName": "Wondrous Item" } 
           ];     

         for (item of inventoryItems) {
            let newLabel = document.createElement('label');
            newLabel.innerHTML = `
               <input type="radio" name="inventoryItems" value="${item.itemID}"> 
               ${item.itemName}`

            form.appendChild(newLabel); 
         }
         form.oninput = e => {
            selectedItemChx.textContent = form.inventoryItems.value
               + ' --> '
               + inventoryItems.find(x=>x.itemID==form.inventoryItems.value).itemName
         }
                          
            const armorDetails = 
            [
            {"itemName":"Agile Half-Plate","itemDescription":"This style of half-plate is specially crafted in a manner that allows extra maneuverability for some physical activities. The armor check penalty for Climb checks and jump checks is only -4 (masterwork and mithral versions of this armor reduce this penalty as well as the normal penalty). In addition, unlike with most heavy armors, the wearer can still run at quadruple speed instead of triple speed.","itemCategory":"Heavy","itemWeight":55,"itemWeightCount":1,"itemLocation":"Armor","itemLocationPrior":0,"itemCost":850,"itemClass":"Armor","itemReference":"APG 179","itemQuantity":0,"itemContainer":0,"itemCapacity":0,"useInfo":{"itemSize":"Medium","itemBonus":8,"itemMaxDex":0,"itemACCheckPenalty":-7,"itemArcaneSpellFailure":40,"itemSpeed30":20,"itemSpeed20":15,"itemRunSpeed":3,"itemNotes":"","itemSpecial":""}},
            {"itemName":"Alkenstar Fortress Plate","itemDescription":"This dwarf-forged armor features layers of overlapping plates molded to deflect projectiles-especially those from firearms. Whenever you are the target of a ranged weapon attack that would ignore your armor bonus to AC, you add half the fortress plate&#39;s armor bonus (including enhancement bonuses) to your AC against that attack. This benefit does not apply to energy attacks or magical touch attacks such as rays. Because the armor is designed with dwarves in mind, If you have the dwarf&#39;s weapon familiarity racial trait, you increase this projectile-only bonus by 1. Fortress plate is incredibly bulky, and its armor category can&#39;t be reduced by any effect (including by special materials, such as mithral). Fortress plate includes gauntlets and a helm.","itemCategory":"Heavy","itemWeight":75,"itemWeightCount":1,"itemLocation":"Armor","itemLocationPrior":0,"itemCost":2100,"itemClass":"Armor","itemReference":"AA2 6","itemQuantity":0,"itemContainer":0,"itemCapacity":0,"useInfo":{"itemSize":"Medium","itemBonus":8,"itemMaxDex":0,"itemACCheckPenalty":-7,"itemArcaneSpellFailure":40,"itemSpeed30":20,"itemSpeed20":15,"itemRunSpeed":3,"itemNotes":"","itemSpecial":""}},
            {"itemName":"Banded Mail","itemDescription":"Banded mail is made up of overlapping strips of metal, fastened to a sturdy backing of leather and chain. The size of the metal plates, interconnected metal bands, and layers of underlying armor make it a more significant defense than similar armors, like scale mail or splint mail.","itemCategory":"Heavy","itemWeight":35,"itemWeightCount":1,"itemLocation":"Armor","itemLocationPrior":0,"itemCost":250,"itemClass":"Armor","itemReference":"CRB 150","itemQuantity":0,"itemContainer":0,"itemCapacity":0,"useInfo":{"itemSize":"Medium","itemBonus":7,"itemMaxDex":1,"itemACCheckPenalty":-6,"itemArcaneSpellFailure":35,"itemSpeed30":20,"itemSpeed20":15,"itemRunSpeed":3,"itemNotes":"","itemSpecial":""}},
            ];
            for (item of armorDetails) {
               var newList = document.createElement('LI');
               var t = document.createTextNode(${item.itemName});
               newList.appendChild(t);
               document.getElementById("myList").appendChild(newList);
            }

/* || general styles */

html {
  font-family: 'Roboto Mono', helvetica, arial, sans-serif;
}

body {
  width: 800px;
  margin: 0 auto;
}

h1, h2 {
  font-family: 'Roboto Mono', cursive;
}

/* header styles */

h1 {
  font-size: 4rem;
  text-align: center;
}

header p {
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
}

/* section styles */

section article {
  width: 33%;
  float: left;
}

section p {
  margin: 5px 0;
}

section ul {
  margin-top: 0;
}

h2 {
  font-size: 2.5rem;
  letter-spacing: -5px;
  margin-bottom: 10px;
}
#input4radio > label {
  display : block;
  margin  : .5em 1em; 
  cursor  : pointer;
  }

<html>
   <head>
      <meta charset="utf-8">
      <title>Add inventory item</title>
      <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <header>

      </header>
      <section>
         <form action="" id="input4radio"></form>

         <p id=selectedItem> selected item : <em></em></p>
      </section>
      <ol id="myList"></ol>
      <script>
      </script>
   </body>
</html>

标签： javascripthtmlcssarraysjson