混乱的循环使用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>