JQuery $.each() - 努力获取对象的键值对

Posted 2023-03-16

【中文标题】JQuery $.each() - 努力获取对象的键值对

【英文标题】：JQuery $.each() - struggling to get key value pairs of object

【发布时间】：2017-02-15 18:18:28

【问题描述】：

我有以下对象：

var business_challenges =[title: 'Business Challenges', [digital_trans: 'Digital Transformation', agile_mobile:'Agile & Mobile Working always_on',  always_on:'Always on Infrastructure', connect_protect: 'Connect & Protect', cost_cutting:'Cost Cutting/Maximise Investment', improving_cust: 'Improving Customer Engagement' ]];
var business_divisions = [title: 'Business Divisions',[SMB:'SMB', DCS:'DCS', DPS:'DPS']];
var filters = $.merge(business_divisions, business_challenges); 

我正在尝试遍历对象以获取键：值对，但我正在苦苦挣扎。 Key 值是数字而不是关联数组键，并且值是一个对象。我已经尝试嵌套另一个 $each 但这不起作用。

有人可以帮忙吗？我是否需要更改 filters 对象的组合方式？

var filter_html = '<ul>';
        //var filtersJSON = $.parseJSON(filters);
        $.each(filters, function(i, data) 
            var filter_title = data.title;  //THIS WORKS

            filter_html = filter_html+filter_title;
            $.each(data, function(key, val) 
                filter_html = filter_html+'<li><input type="checkbox" value="'+ key +'">'+ val.key +'</li>';  //THIS DOESNT WORK

            );

        );
        filter_html = filter_html+ '</ul>';


        $('#filterControls').html(filter_html);

【问题讨论】：

那个数据结构很奇怪。你控制它的来源吗？

是的，如果需要，我可以更改它。这是我第一次尝试在 javascript 中组合关联数组/对象。我更习惯 php 所以有点困惑！

我认为你应该使用$.extend() i.p.o. $.merge().

那么您当前的问题是您需要另一个嵌套循环来迭代每个子数组中的子数组，合并或扩展会使事情变得更加复杂

建议你回到源头并以更一致的方式构建它。

【参考方案1】：

为了

获取键：值对 您可以测试每个循环中的每个元素。

确实，对象过滤器包含对象和对象数组。

对于数组元素，您可以通过以下方式获取当前对象值：

var key = Object.keys(val)[0];  // get the key name
var value = val[key];   // from the key name you can get the value

这是因为数组中的每个对象都有不同的属性名称。

sn-p：

var business_challenges = [title: 'Business Challenges', [digital_trans: 'Digital Transformation', agile_mobile: 'Agile & Mobile Working always_on', always_on: 'Always on Infrastructure', connect_protect: 'Connect & Protect', cost_cutting: 'Cost Cutting/Maximise Investment', improving_cust: 'Improving Customer Engagement']];
var business_divisions = [title: 'Business Divisions', [SMB: 'SMB', DCS: 'DCS', DPS: 'DPS']];
var filters = $.merge(business_divisions, business_challenges);
var filter_html = '<ul>';
$.each(filters, function (i, data) 
  if (Object.prototype.toString.call(data) === '[object Array]') 
    $.each(data, function (key, val) 
      var key = Object.keys(val)[0];
      var value = val[key];
      filter_html = filter_html + '<li><input type="checkbox" value="' + key + '">' + value + '</li>';
      console.log('Object N. ' + key + ': ' + JSON.stringify(val));
    );
   else 
    filter_html = filter_html + data.title;
  

);
filter_html = filter_html + '</ul>';


$('#filterControls').html(filter_html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="filterControls"></div>

【参考方案2】：

试试$.each(myObject, function(keyName, keyValue)

var myObject = 
  string: 'someText',
  number: 123321,
  array: [1, 2, 3, 4]
;

$.each(myObject, function(keyName, keyValue) 
  console.log(keyName + ': ' + keyValue);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>