jQuery是否具有可以接受屬性值數組並將其映射到json對象的實用程序？

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表。 我感謝完成此操作的任何提示或技巧。

干杯，
〜ck在聖地亞哥

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將數組呈現為表並將其注入ID為displayTable的空容器表中（假設已經包含jQuery和jQuery-tmpl）：

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

在這里工作的演示，同時也改進了布爾渲染： http : //jsfiddle.net/bJfvh/