混亂的循環使用jQuery

Question

對象數組

我的數據是這樣，

var menuItems = { 
    "titles":[ 
     { 
     "title_id":"Chief Information Officer (CIO)", 
     "title_name":"Chief Information Officer (CIO)" 
     }, 
     { 
     "_title_id":"Chief Technology Officer (CTO)", 
     "title_name":"Chief Technology Officer (CTO)" 
     } 
    ], 
    "skills":[ 
     { 
     "skill_id":1000185, 
     "skill_name":"ITSoftware Development" 
     }, 
     { 
     "skill_id":1000186, 
     "skill_name":"Network Security" 
     } 
    ] 
}; 

我想遍歷所有數據和附加價值來選擇框選項的值和名稱。因此，對於測試我使用jQuery的下面，

$.each(menuItems, function (key, value) { 
     { 
      if (key == "titles") { 
       $.each(value, function (key1, value1) { 

        for(k in value1) { 
         $('.title-append').append($('<option>', { 
               value: value1[k], 
               text: value1[k] 
         })); 

        } 
       }) 
      } 
     } 
     }); 

HTML代碼：

<select name="position" class="form-control title-append" id="position"><option value="">Select..</option></select> 

所有的值都在選擇框中追加兩次。我被困在這裏，我嘗試了不同的情況，但似乎沒有任何工作。 jQuery有什麼問題嗎？

Answer 1

由於您只處理標題，你應該只迭代menuItems.titles而不是整個menuItem對象：

menuItems.titles.forEach(function(title) { 
    $('.title-append').append($('<option>', { 
     value: title.title_id, 
     text: title.title_name, 
    })); 
}); 

Answer 2

只要簡化您的疊代的JSON，

你遍歷特定的鍵「標題」，通過提供它作爲你想迭代它的數組直接遍歷它。

$.each(menuItems['titles'], function(key, value) { 
    $('.title-append').append($('<option>', {value: value['title_id'],text: value1['title_name']})); 
}); 

Answer 3

你不需要有內部的循環，因爲你的值1對象已經將有2對象和你的每個將循環它4，嘗試這種方式..

 

 
$(function(){ 
 
    var menuItems = { 
 
     "titles":[ 
 
      { 
 
      "title_id":"Chief Information Officer (CIO)", 
 
      "title_name":"Chief Information Officer (CIO)" 
 
      }, 
 
      { 
 
      "title_id":"Chief Technology Officer (CTO)", 
 
      "title_name":"Chief Technology Officer (CTO)" 
 
      } 
 
     ], 
 
     "skills":[ 
 
      { 
 
      "skill_id":1000185, 
 
      "skill_name":"ITSoftware Development" 
 
      }, 
 
      { 
 
      "skill_id":1000186, 
 
      "skill_name":"Network Security" 
 
      } 
 
     ] 
 
    }; 
 

 
    $.each(menuItems, function (key, value) { 
 
      { 
 
       if (key == "titles") { 
 
        $.each(value, function (key1, value1) { 
 
          $('.title-append').append($('<option>', { 
 
                value: value1.title_id, 
 
                text: value1.title_name 
 
          })); 
 
        }) 
 
       } 
 
if (key == "skills") { 
 
        $.each(value, function (key1, value1) { 
 
          $('.student-append').append($('<option>', { 
 
                value: value1.skill_Id, 
 
                text: value1.skill_name 
 
          })); 
 
        }) 
 
       } 
 
      } 
 
      }); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="position" class="form-control title-append" id="position"><option value="">Select..</option></select> 
 
<select name="Students" class="form-control student-append" id="Students"><option value="">Select..</option></select>

Answer 4

沒有必要的jQuery：

var menuItems = { 
 
    "titles": [{ 
 
     "title_id": "Chief Information Officer (CIO)", 
 
     "title_name": "Chief Information Officer (CIO)" 
 
    }, 
 
    { 
 
     "title_id": "Chief Technology Officer (CTO)", // <-- you had a typo in this key 
 
     "title_name": "Chief Technology Officer (CTO)" 
 
    } 
 
    ], 
 
    "skills": [{ 
 
     "skill_id": 1000185, 
 
     "skill_name": "ITSoftware Development" 
 
    }, 
 
    { 
 
     "skill_id": 1000186, 
 
     "skill_name": "Network Security" 
 
    } 
 
    ] 
 
}; 
 

 
// retrieve the select 
 
var dropdown = document.getElementById('position'); 
 

 
// iterate over array 
 
menuItems['titles'].forEach(obj => { 
 
    var option = document.createElement('option'); // create a new option 
 
     option.value = obj.title_id;    // set the value attribute 
 
     option.textContent = obj.title_name;  // set what's displayed 
 
    dropdown.appendChild(option);     // attach to document 
 
});

<select name="position" class="form-control title-append" id="position"> 
 
    <option value="">Select..</option> 
 
</select>