轉換對象的數組對象

的陣列的結構不同，如何打開這個數據集轉換對象的數組對象

file = 
[ 
{ 
DeviceName: 'DeviceName1', 
counter1: '85%', 
counter2: '87%', 
counter3: '75%', 
counter4: '63%' }, 
{ 
DeviceName: 'DeviceName2', 
counter1: '85%', 
counter2: '87%', 
counter3: '75%', 
counter4: '63%' 
} 
]

這個

data = [ 
     { 
     key: "Device1", 
     color: "#51A351", 
     values: 
      [  
      { x : "counter1", y : '85%' }, 
      { x : "counter2", y : '87%' }, 
      { x : "counter3", y : '75%' }, 
      { x : "counter4", y : '63%' } 
      ] 
     }, 
     { 
     key: "Device2", 
     color: "#BD362F", 
     values: 
      [  
      { x : "counter1", y : '85%' }, 
      { x : "counter2", y : '87%' }, 
      { x : "counter3", y : '75%' }, 
      { x : "counter4", y : '63%' } 
      ] 
     } 
    ];

這是我嘗試

file.map(function(d,i){return {key:d.DeviceName,color:i}})

但這隻能讓我走得這麼遠：

[ { key: 'DeviceName1', color: 0 }, 
    { key: 'DeviceName2', color: 1 } ]

來源

2016-01-07 HattrickNZ

而且哪裏的顏色從何而來？ – adeneo

連接'file'的單個元素與'data'的單個元素的邏輯是什麼？這裏沒有什麼是非常明確的：'color'屬性來自'data'的什麼地方？ 'file'元素中的'DeviceName'和'data'中的'key'之間有什麼關係？（只需編輯''Name''子字符串？）您是否總是期待'file'元素中有四個'counter *'屬性？ –

它用於構建圖形，因此每個設備需要使用不同的顏色。我希望能夠爲顏色創建另一個陣列。希望儘可能使其具有動態性，因此希望它能夠處理N個計數器，並且這些計數器也都可以具有通俗名稱。 – HattrickNZ

首先定義顏色來自哪裏。然後你就可以循環/減少（使用Object.keys（））的對象的屬性，構建values陣列：

var colors = ["#51A351", "#BD362F"]; 

var result = file.map(function(item, i) { 
    var values = Object.keys(item).reduce(function(r, key) { 
     return key == 'DeviceName' ? r : r.concat({ x: key, y: item[key] }); 
    }, []); 
    return { 
     values: values, 
     key: item.DeviceName, 
     color: colors[i] 
    }; 
}); 
console.log(result);

來源

2016-01-07 21:56:45 madox2

tks認爲這看起來是部分，讓我只是消化它。 – HattrickNZ

這是你想要的嗎？

file.map(function(d,i){ 
return { 
key:d.DeviceName, 
color:d.color, 
values: [{ 
x: 'counter1', y: d.counter1 
},{ 
x: 'counter2', y: d.counter2 
},{ 
x: 'counter3', y: d.counter3 
},{ 
x: 'counter4', y: d.counter4 
}]} 
})

來源

2016-01-07 21:52:35

除了'd.color'將會是'undefined'，因爲原始數據中沒有任何'color'屬性。 –

確實。但由於原始數據中沒有「顏色」，我們無法真正映射它。 :-) –

該解決方案與正則表達式移動counter1，...到陣列的正確的地方數組的索引。

var file = [{ DeviceName: 'DeviceName1', counter2: '87%', counter1: '85%', counter3: '75%', counter4: '63%' }, { DeviceName: 'DeviceName2', counter1: '85%', counter2: '87%', counter3: '75%', counter4: '63%' }], 
 
    data = file.map(function (a, i) { 
 
     var o = { 
 
      key: a.DeviceName.split('Name').join(''), 
 
      color: ['#51A351', '#BD362F'][i], 
 
      values: [] 
 
     }; 
 
     Object.keys(a).filter(function (b) { 
 
      return /^counter\d+$/.test(b); 
 
     }).forEach(function (c) { 
 
      o.values[c.match(/\d+/) - 1] = { x: c, y: a[c] }; 
 
     }) 
 
     return o; 
 
    }); 
 
document.write('<pre>' + JSON.stringify(data, 0, 4) + '</pre>');

來源

2016-01-07 22:22:28

轉換對象的數組對象

回答

相關問題