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

不需要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>

Answer 2

由于您只处理标题，因此您应该只迭代menuItems.titles而不是整个menuItem对象：

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

Answer 3

简化你对json的迭代，

只要您对特定的键标题进行迭代，就可以通过将其作为要迭代的数组进行迭代来直接迭代它。

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

Answer 4

你不需要内部for循环，因为你的value1对象已经有2个对象，而你的每个对象将循环它为4，试试这种方式..

＆＃13;

   

 $(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
                           }));
                    })
                }
            }
            });
    })

＆＃13;

<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>

＆＃13;

使用jQuery循环对象数组的困惑

4 个答案: