Javascript object 內的展平數組

Question

PS 我嘗試了一些堆棧溢出，已經回答了有關在 object 中展平嵌套數組的問題，下面的問題中提到了它們。

我仍在努力清理陣列。 我設法使用以下方法填充空值和空值 arrays：

if (Array.isArray(elem[prop]) || typeof(elem[prop]) === 'object') {
  if (elem[prop].indexOf(null) !== -1 || elem[prop].length === 0) {
    // console.log(elem[prop], prop)
    elem[prop] = '';
  }
}

假設我有以下數組：

array = [
  {
    id: 123,
    name: 'Peter',
    phone: '',
    addresses: 
    [
      { 
        address1: 'Manchester, UK', address2: 'London, UK' 
      }, 
      { 
        address1: 'Liverpool, UK', address2: 'NY, USA' 
      }
    ]
  },
  {
    id: 124,
    name: 'Sara',
    phone: '',
    addresses: [{ address1: 'London, UK', address2: 'Paris, FR' }]
  }
];

我需要展平地址數組，所以最終的數組將如下所示：

array = [
  {
    id: 123,
    name: 'Peter',
    phone: '',
    addresses_address1: 'Manchester, UK',
    addresses_address2: 'London, UK'
  },
  {
    id: 124,
    name: 'Sara',
    phone: '',
    addresses_address1: 'London, UK',
    addresses_address2: 'Paris, FR'
  }
];

正如您所說，用戶 id = 123 的第一個嵌套數組添加為addresses_addres1和addresses_address2 ，第二個嵌套數組已被刪除：

{ 
  address1: 'Liverpool, UK', address2: 'NY, USA' 
}

由於命名，我刪除其他嵌套 arrays 的唯一原因。 無論如何，我使用concat.apply()從Stack Overflow 答案中嘗試了以下解決方案：

ngOnInit(){
  let props = [];
  var flattened = [];

  // Getting the properties of the array
  props = Array.from(new Set(this.array.flatMap(e => Object.keys(e), [])));
  // console.log(props)
  for (const elem of this.array){
    for (const prop of props) {
      if(Array.isArray(elem[prop])){
        flattened = [].concat.apply([],this.array);
      }
    }
  }
  console.log(flattened)
}

但控制台數組與原始數組相同。

然后我嘗試使用lodash ：

// Method 2 using lodash
for (const elem of this.array) {
  for (const prop of props) {
    if (Array.isArray(elem[prop])) {
      elem[prop] = _.flatten(elem[prop])
    }
  }
}
console.log(this.array)

但它不起作用，因為它只能像這樣在 arrays 上工作： [[1,2, 'abc'], ['x', True, 'z'], 11] 。

我嘗試使用本文中的 Vanilla JavaScript 來做到這一點：

//Method 3: Vanilla JavaScript
console.log(this.array.flat())

但也沒有結果。

我從這篇關於堆棧溢出的帖子中嘗試了關於部分展平 object 的答案：

//Method 4:
for (const elem of this.array) {
  for (const prop of props) {
    if (Array.isArray(elem[prop])) {
      const result = elem[prop].map(
      ({prop, ...rest}) => Object.assign(rest, ...Object.keys(prop).map(key => {[elem[prop]+"_"+prop] : elem[prop]})));
    }
  }
}
console.log(this.array)

也沒有結果。

這是一個堆棧閃電戰，描述了所有 4 種方法的問題。

Answer 1

你可以試試這個：

 array = [ { id: 123, name: 'Peter', phone: '', addresses: [{address1: 'Manchester, UK', address2: 'London, UK'}, { address1: 'Liverpool, UK', address2: 'NY, USA' }] }, { id: 124, name: 'Sara', phone: '', addresses: [{ address1: 'London, UK', address2: 'Paris, FR' }] } ]; let count = []; array.map(a => { a.addresses.map(b => { Object.keys(b).map((c, ind) => { count.push(1) a[c.slice(0, -1) + count.length] = Object.values(b)[ind] }) }) count = [] delete a.addresses; }) console.log(array)

Answer 2

與其他答案非常相似，但使用map()和傳播語法來復制每個迭代的 object 以避免改變原始數組，並利用解構來刪除地址屬性，然后再將其屬性應用於嵌套的 object 嵌套for...of的循環。

 const array = [{ id: 123, name: 'Peter', phone: '', addresses: [{ address1: 'Manchester, UK', address2: 'London, UK' }, { address1: 'Liverpool, UK', address2: 'NY, USA' },], }, { id: 124, name: 'Sara', phone: '', addresses: [{ address1: 'London, UK', address2: 'Paris, FR' }], },]; const flat_array = array.map(({ addresses, ...contact }) => { const _contact = {...contact }; let i = 1; for (const address_obj of addresses) { for (const address of Object.values(address_obj)) { _contact[`address_${i++}`] = address; } } return _contact; }); console.log(flat_array);

或者在flatMap() ed 地址數組上調用Object.fromEntries()並使用Object.assign()將其與原始聯系人復制/合並的稍微模糊的解決方案

 const array = [{ id: 123, name: 'Peter', phone: '', addresses: [{ address1: 'Manchester, UK', address2: 'London, UK' }, { address1: 'Liverpool, UK', address2: 'NY, USA' },], }, { id: 124, name: 'Sara', phone: '', addresses: [{ address1: 'London, UK', address2: 'Paris, FR' }], },]; const flat_array = array.map(({ addresses, ...contact }) => { let i = 1; const address_object = Object.fromEntries( addresses.flatMap((o) => Object.values(o).map((v) => [`address_${i++}`, v])) ); return Object.assign({}, contact, address_object); }); console.log(flat_array);