如何通過從 Javascript 中的 JSON 文件獲取 boolean 值來設置已勾選的單選按鈕/復選框

Question

我正在創建一個帶有單選按鈕和復選框的表，該表使用腳本中 JSON 中的數據。 我可以使用以下方法從 JSON 調用其他數據：
${data[i].firstName}

但是，我不知道如何像這樣調用 boolean 值並將其設置在檢查列表/單選按鈕上：
'gender':{'male':true,'female':false,}

我希望能夠在頁面加載時將單選按鈕和檢查列表設置為已檢查/勾選並鎖定。
這是我難以放入 JSON 值（單選按鈕和清單）的代碼行：

 <td><input type="radio" name="rank"> Male 
     <input type="radio" name="rank"> Female 
 </td>

 <td>
     <input type="checkbox" id="eng">
     <label for="lang1"> English</label>
     <input type="checkbox">
     <label for="lang2"> Japanese</label>
     <input type="checkbox">
     <label for="lang3"> Chinese</label>
 </td>

HTML：

    <tr  class="bg-info">
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Birthday</th>
        <th>Gender</th>
        <th>Known Language</th>
    </tr>

    <tbody id="myTable">

Javascript：

var myArray = [
        {
        'id':"1",
        'firstName':'John', 
        'lastName':'Doe', 
        'birthday':'1990-05-07',
        'gender':{
          'male':true,
          'female':false,
        },
        'knownLanguage':[
          "English",
          "Japanese",
          "Chinese"
          ]
      },

        {
        'id':"2",
        'firstName':'Lina', 
        'lastName':'Art', 
        'birthday':'1994-08-05',
        'gender':{
          'male':false,
          'female':true,
        },
        'knownLanguage':[
          "English",
          "Japanese"
          ]
      },
    ]
    
buildTable(myArray)

    function buildTable(data){
        var table = document.getElementById('myTable')
    
        for (var i = 0; i < data.length; i++){
            var row = 
      
            `<tr>
                            <td>${data[i].id}</td>
                            <td>${data[i].firstName}</td>
                            <td>${data[i].lastName}</td>
              <td>${data[i].birthday}</td>
              <td><input type="radio" name="rank"> Male 
                  <input type="radio" name="rank"> Female 
              </td>
              <td>
                  <input type="checkbox" id="eng">
                  <label for="lang1"> English</label>
                  <input type="checkbox">
                  <label for="lang2"> Japanese</label>
                  <input type="checkbox">
                  <label for="lang3"> Chinese</label>
              </td>
                      </tr>`
       
            table.innerHTML += row


        }
    }
</script>  

Answer 1

您可以根據性別有條件地設置“選中”屬性。

在你的 buildTable function 中：

（針對復選框更新）

<td>
  <input type="radio" name="rank" ${data[i].gender.male ? 'checked' : ''}> Male 
  <input type="radio" name="rank" ${data[i].gender.female ? 'checked' : ''}> Female 
</td>

 <td>
     <input type="checkbox" id="eng" ${data[i].knownLanguage.includes('English') ? 'checked' : ''}>
     <label for="lang1"> English</label>
     <input type="checkbox" ${data[i].knownLanguage.includes('Japanese') ? 'checked' : ''}>
     <label for="lang2"> Japanese</label>
     <input type="checkbox" ${data[i].knownLanguage.includes('Chinese') ? 'checked' : ''}>
     <label for="lang3"> Chinese</label>
 </td>