我们如何将对象内的嵌套数组转换为一个用逗号分隔的串联字符串值？答案

【问题标题】：How can we transform a nested array inside an object into one concatenated string value separated by commas?我们如何将对象内的嵌套数组转换为一个用逗号分隔的串联字符串值？
【发布时间】：2020-07-15 11:37:27
【问题描述】：

我有以下示例数组：

mainArray = [
    {id: 15475, name: 'Ali', gender: 'Male', addresses: [
      {address1: 'Lebanon'}, 
      {address2: 'USA'}]
    },
    {id: 15475, name: 'Emily', gender: 'Female', addresses: [
      {address1: 'UK'}, 
      {address2: 'France'}]
    },
];

我需要将其转换为：

mainArray = [
    {id: 15475, name: 'Ali', gender: 'Male', addresses: 'Lebanon, USA'},
    {id: 15475, name: 'Emily', gender: 'Female', addresses: 'UK, France }
];

在这种情况下，我将mainArray 的一个元素内的所有嵌套数组添加到一个字符串值中。

到目前为止，我所做的是，我提取了mainArray 的键名：

extractedIndexes = ['id', 'name', 'gender', 'addresses'];

并创建了一个循环来检查mainArray 中每个元素的类型，如果它是一个对象，我会将嵌套数组的值连接到一个字符串中：

for (const idx of this.extractedIndexes) {
  console.log(idx)
  this.mainArray.forEach((elem) => {
    let newItem = '';
    if (typeof (elem[idx]) == 'object') {
      elem[idx] = Object.keys(elem[idx]).forEach((key) => {
        console.log(elem[idx][key])
        // Add it to the field
      })
      console.log(elem[idx])
    }
  })
}
console.log(this.mainArray)

console.log(elem[idx][key]) 这一行总是返回以下内容：

{address1: "Lebanon"}

{address2: "USA"}

{address1: "UK"}

{address2: "France"}

注意这里address1和address2是简单的例子，因为我的真实数据包含多个嵌套数组，每个都有不同的新键名。

我尝试执行以下操作：

if (typeof (elem[idx]) == 'object') {
  elem[idx] = elem[idx].toString().split(',')
  // Add it to the field
  console.log(elem[idx])
}

但它返回了[Object, Object]。

那么如何将嵌套数组转换为单个串联字符串值？

这是stackblitz。

【问题讨论】：

标签： javascript arrays angular multidimensional-array

【解决方案1】：

只需使用map 并使用Object.values 从对象中获取值：

mainArray.map(({addresses, ...rest}) => ({...rest, addresses: 
    addresses.map(s => Object.values(s)).join(', ')}) );

一个例子：

let mainArray = [
    {id: 15475, name: 'Ali', gender: 'Male', addresses: [
      {address1: 'Lebanon'},
      {address2: 'USA'}]
    },
    {id: 15475, name: 'Emily', gender: 'Female', addresses: [
      {address1: 'UK'},
      {address2: 'France'}]
    },
];

const result = mainArray.map(({addresses, ...rest}) => ({...rest, addresses: addresses.map(s => Object.values(s)).join(', ')}) );
console.log(result);

如果不知道key是否为数组，可以尝试使用reduce方法：

const result = mainArray.reduce((a, c)=> {
  for (const key in c) {
      if (Array.isArray(c[key]))
        c[key] = c[key].map(s => Object.values(s)).join(', ');
  }
  a.push(c);
  return a;
},[])
console.log(result);

一个例子：

let mainArray = [
    {id: 15475, name: 'Ali', gender: 'Male', addresses: [
      {address1: 'Lebanon'},
      {address2: 'USA'}]
    },
    {id: 15475, name: 'Emily', gender: 'Female', addresses: [
      {address1: 'UK'},
      {address2: 'France'}]
    },
];

const result = mainArray.reduce((a, c)=> {
  for (const key in c) {
      if (Array.isArray(c[key]))
        c[key] = c[key].map(s => Object.values(s)).join(', ');
  }
  a.push(c);
  return a;
},[])
console.log(result);

【讨论】：

它不适用于我不知道键名可能是什么的通用数组。在这里，您假设只有一个字段addresses。我在同一个堆栈闪电战中添加了一个函数，你能检查一下吗？

【解决方案2】：

如果键以address 开头并且值不是对象，则可以使用递归函数获取适用于任何嵌套结构的地址并获取值。

const data =[{"id":15475,"name":"Ali","gender":"Male","addresses":[{"address1":"Lebanon"},{"address2":"USA"}]},{"id":15475,"name":"Emily","gender":"Female","addresses":[{"address1":"UK"},{"address2":"France"}]}]

const flat = (data, prev = '') => {
  let sep = prev ? ', ' : ''
  let result = '';

  for (let i in data) {
    if (typeof data[i] == 'object') {
      result += flat(data[i], prev + result)
    } else if (i.startsWith('address')) {
      result += sep + data[i]
    }
  }

  return result
}

const result = data.map(({
    addresses,
    ...rest
  }) =>
  ({ ...rest,
    addresses: flat(addresses)
  }))


console.log(result)

【讨论】：

【解决方案3】：

    {id: 15475, name: 'Ali', gender: 'Male', addresses: [
      {address1: 'Lebanon'}, 
      {address2: 'USA'}]
    },
    {id: 15475, name: 'Emily', gender: 'Female', addresses: [
      {address1: 'UK'}, 
      {address2: 'France'}]
    },
];<br>

function toString(arro) {
  return arro.reduce(
    (acc, rec) => {
      return [...acc, Object.values(rec)]
    }, []
  ).join(',')
}

const res = mainArray.map(
  it => {
    return Object.keys(it).reduce(
      (acc, item) => {
        if (typeof it[item] === 'object') {
          return {...acc, [item]: toString(it[item])}
        }
        return {...acc, [item]: it[item]}
      }, {}
    )
  }
)```

【讨论】：