JavaScript：根据 object 属性中的空间拆分数组中的对象

Question

In JavaScript, let's say I have an array like this:

[{display:"Foo"},{display:"Bar", field: {"Baz"}},{display:{"Baz Foo"}},{display: "Foo Bar", field: "Bar"}]

and want to convert it into this:

[{display:"Foo"},{display:"Bar", field: {"Baz"}},{display:{"Baz"}},{display:{"Foo"}},{display: "Foo", field: "Bar"},{display: "Bar", field: "Bar"}] .

In other words, split the objects that contain space in the display field into two objects and keep the field property as it is.

I feel like it should be some simple solution to this, but I just don't get it right. Does anyone know how I can achieve this?

Answer 1

try this

const arr = [{display:"Foo"},{display:"Bar", field: "Baz"},{display:"Baz Foo"},{display: "Foo Bar", field: "Bar"}]

const newArr = arr.reduce((acc, cur) => {
  const { field, display } = cur
  const newObjs = display.split(" ").map(dis => ({ display: dis, field }));
  acc = acc.concat(newObjs)
  return acc
}, [])

Answer 2

This works:

 const input = [ {display:"Foo"}, {display:"Bar", field: "Baz"}, {display:"Baz Foo"}, {display:"Foo Bar", field: "Bar"} ] const output = input.map((entry) => entry.display.split(/\s+/g). map((part) => ({...entry, display: part})) ).flat() console.log(output)

Note that split(/\s+/g) splits at one or more white-spaces, eg "hello world" results in ["hello", "world"] . If you do not want this, change to split(" ") , the result would then be ["hello", "", "", "", "world"]