Question

早上好，我正在尝试从一堆数组中创建一个javascript对象数组。我希望每个对象看起来像这样。但是将数组元素作为属性。

{
'Miles':0
, 'Drain flush and refill cooling system' : false
, 'Lubricate chassis':false
, 'Replace automatic transaxle fluid and filter':false
, 'Replace engine air cleaner filter':false
, 'Replace engine oil':false
, 'Replace engine oil filter':false
, 'Replace spark plugs':false
, 'Rotate tires':false
, 'Inspect brake system':false
, 'Inspect drive axle boots':false
, 'Inspect engine accessory drive belt':false
, 'Inspect engine air cleaner filter':false
, 'Inspect engine cooling system hoses and clamps':false
, 'Inspect exhaust system':false
, 'Inspect fuel system':false
, 'Inspect spark plug wires':false
, 'Inspect steering system':false
, 'Inspect suspension system':false
, 'Inspect throttle system':false 
}

我想要使用一组值来设置这些属性值。与jQuery类似的东西扩展。使用新值覆盖默认值，除了使用数组而不是散列。实施例

    [7500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true].

有人能指出我正确的方向吗？我有50个像这样的数组或者我只是输入对象。我试图通过做某种类型的循环并创建一个对象数组来节省一点时间。最终，对象数组将在网页上驱动HTML表格。我很感激任何提示或技巧来实现这一目标。

干杯，
〜在圣地亚哥

Answer 1

如何：http://jsfiddle.net/vUg66/

function CarSpecs(arr) {
  for (var i=0; i < arr.length; i++) {
    this[ this.arrayMap[i] ] = arr[i];
  }
}

/** Array specifying the location of each key in the input array */
CarSpecs.prototype.arrayMap = [
  'Miles',
  'Drain flush and refill cooling system',
  'Lubricate chassis',
  'Replace automatic transaxle fluid and filter',
  'Replace engine air cleaner filter',
  'Replace engine oil',
  'Replace engine oil filter',
  'Replace spark plugs',
  'Rotate tires',
  'Inspect brake system',
  'Inspect drive axle boots',
  'Inspect engine accessory drive belt',
  'Inspect engine air cleaner filter',
  'Inspect engine cooling system hoses and clamps',
  'Inspect exhaust system',
  'Inspect fuel system',
  'Inspect spark plug wires',
  'Inspect steering system',
  'Inspect suspension system',
  'Inspect throttle system'
];


var input = [7500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true];

console.log(new CarSpecs(input));

你不需要CarSpecs对象，你可以只实现一个将数组转换为对象的函数，我认为CarSpecs构造函数虽然更性感。

function carArrayToObj(array) {
  var arrayMap =  [
      'Miles',
      'Drain flush and refill cooling system',
      'Lubricate chassis',
      'Replace automatic transaxle fluid and filter',
      'Replace engine air cleaner filter',
      'Replace engine oil',
      'Replace engine oil filter',
      'Replace spark plugs',
      'Rotate tires',
      'Inspect brake system',
      'Inspect drive axle boots',
      'Inspect engine accessory drive belt',
      'Inspect engine air cleaner filter',
      'Inspect engine cooling system hoses and clamps',
      'Inspect exhaust system',
      'Inspect fuel system',
      'Inspect spark plug wires',
      'Inspect steering system',
      'Inspect suspension system',
      'Inspect throttle system'
    ];
  var obj = {};
  for (var i=0; i<array.length) {
    obj[arrayMap[i]] = array[i];
  }
  return obj;
}

以下是我认为您应该做的事情

var intervals =[[7500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true], [15000,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true], [22500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true], [30000,false,true,false,true,true,false,false,true,false,true,true,true,true,true,true,false,true,true,true], [37500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true], [45000,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true], [52500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true], [60000,false,true,true,true,true,false,false,true,false,true,true,true,true,true,true,false,false,true,true], [67500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true], [75000,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true], [82500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true], [90000,false,true,false,true,true,false,false,true,true,true,true,true,true,true,true,false,true,true,true], [97500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true], [100000,true,true,false,true,true,false,true,true,false,false,true,true,true,true,true,true,true,true,true], [105000,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true], [112500,false,true,false,true,true,false,false,true,false,true,true,true,true,true,true,false,true,true,true], [120000,false,true,true,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true], [127500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true], [135000,false,true,false,true,true,false,false,true,false,true,true,true,true,true,true,false,true,true,true], [142500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true], [150000,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true]];

function createColumnArray(intervals) {
  var intervalSpecs = [];

  $.each(intervals, function(idx, arr){
    intervalSpecs.push(new CarSpec(arr))
  });
  return intervalSpecs;
}

来自SD的干杯！

Answer 2

关联数组不对键进行排序，使用另一个关联数组更新原始数组应该更安全。

您可以通过简单的循环轻松更新它：

for (var i in new_array)
    old_array[i] = new_array[i]

Answer 3

我不知道该案例的任何jQuery内置功能，但它不应该太难实现：

var arr = [];
$.each(yourobject, function(index, elem) {
    arr.push(elem);
});

JSON.stringify(arr);

Answer 4

我最终这样做了。我没有测试过，但是应该这样做。我希望jQuery有一个快捷方法。

function createColumnArray(){

var intervals = [
    [7500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true]
    , [15000,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true]
    , [22500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true]
    , [30000,false,true,false,true,true,false,false,true,false,true,true,true,true,true,true,false,true,true,true]
    , [37500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true]
    , [45000,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true]
    , [52500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true]
    , [60000,false,true,true,true,true,false,false,true,false,true,true,true,true,true,true,false,false,true,true]
    , [67500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true]
    , [75000,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true]
    , [82500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true]
    , [90000,false,true,false,true,true,false,false,true,true,true,true,true,true,true,true,false,true,true,true]
    , [97500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true]
    , [100000,true,true,false,true,true,false,true,true,false,false,true,true,true,true,true,true,true,true,true]
    , [105000,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true]
    , [112500,false,true,false,true,true,false,false,true,false,true,true,true,true,true,true,false,true,true,true]
    , [120000,false,true,true,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true]
    , [127500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true]
    , [135000,false,true,false,true,true,false,false,true,false,true,true,true,true,true,true,false,true,true,true]
    , [142500,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true]
    , [150000,false,true,false,true,true,false,false,true,false,false,true,true,true,true,true,false,true,true,true]
];

var oIntervals = [];

$.each(intervals, function(idx, elem){
    oIntervals.push(createInterval(elem));
});

return oIntervals;

}

function createInterval(props){
if(props.length == 20){
    return {
        'Miles': props[0]
        , 'Drain flush and refill cooling system' : props[1]
        , 'Lubricate chassis':props[2]
        , 'Replace automatic transaxle fluid and filter':props[3]
        , 'Replace engine air cleaner filter':props[4]
        , 'Replace engine oil':props[5]
        , 'Replace engine oil filter':props[6]
        , 'Replace spark plugs':props[7]
        , 'Rotate tires':props[8]
        , 'Inspect brake system':props[9]
        , 'Inspect drive axle boots':props[10]
        , 'Inspect engine accessory drive belt':props[11]
        , 'Inspect engine air cleaner filter':props[12]
        , 'Inspect engine cooling system hoses and clamps':props[13]
        , 'Inspect exhaust system':props[14]
        , 'Inspect fuel system':props[15]
        , 'Inspect spark plug wires':props[16]
        , 'Inspect steering system':props[17]
        , 'Inspect suspension system':props[18]
        , 'Inspect throttle system':props[19] 
    }
} 
return null;

}

Answer 5

我在这里参加派对已经迟到了，但我想提出一个不同的建议。

既然你说这个转换最终是为了推动HTML表的渲染，我建议完全跳过这一步。相反，使用像jQuery模板这样的模板引擎可以在一个步骤中正确渲染数组。

例如，给定这个数据数组：

var data = {
  values: [7500, false, true, false, true, true, false, false, true, false, false, true, true, true, true, true, false, true, true, true]
};

您可以使用这样的jQuery模板定义：

<script type="text/x-jquery-tmpl" id="template">
 <tr>
  <td>Miles</td>
  <td>${values[0]}</td>
 </tr>
 <tr>
  <td>Drain flush and refill cooling system</td>
  <td>${values[1]}</td>
 </tr>
 <tr>
  <td>Lubricate chassis</td>
  <td>${values[2]}</td>
 </tr>
 <tr>
  <td>Replace automatic transaxle fluid and filter</td>
  <td>${values[3]}</td>
 </tr>
 <tr>
  <td>Replace engine air cleaner filter</td>
  <td>${values[4]}</td>
 </tr>
 <!-- Etc... -->
</script>

通过使用此JavaScript（假设已包含jQuery和jQuery-tmpl）将数组呈现为表并将其注入到id为displayTable的空容器表中：

$('#template').tmpl(data).appendTo('#displayTable');

在这里进行演示，并对布尔渲染进行了改进：http://jsfiddle.net/bJfvh/

jQuery是否有任何可以获取属性值数组并将它们映射到json对象的实用程序？

5 个答案: