Як об'єднати декілька масивів jsons в один масив хреста з sub масивом в JavaScript?

У мене є два масиви json:

 1) 
   [
    {
     "userId": 9
    },
    {
      "userId": 14
     }
    ]

 2) 
   [{"role": "1", "group": "3"}, {"role": "1", "group": "2"}] 

Я хотів би об'єднати два масиви наступним чином: Чи можна мати рішення за допомогою JavaScript?

[
 {"userId":9,"role":"1","group":"2"},
 {"userId":14,"role":"1","group":"2"}
 {"userId":9,"role":"1","group":"3"},
 {"userId":14,"role":"1","group":"3"}
] 

Я намагався використати let , однак я не міг знайти спосіб маніпулювати перемиканням піддіапазону:

let arr1 = [{"userId": 9}, {"userId": 14}];
let arr2 = [{"role": "1", "group": "3"}, {"role": "1", "group": "2"}];

let result = arr1.map(o => Object.assign(o, ...arr2));

console.log(result);
return result;

Результат, який я отримав із попередньою реалізацією, такий:

[{"userId":9,"role":"1","group":"2"},{"userId":14,"role":"1","group":"2"}] 

Однак, я хотів би отримати такий результат:

[
 {"userId":9,"role":"1","group":"2"},
 {"userId":14,"role":"1","group":"2"}
 {"userId":9,"role":"1","group":"3"},
 {"userId":14,"role":"1","group":"3"}
]
1
У вас є JSON або у вас є об'єкти JavaScript? Якщо це не JSON (прочитайте опис тегу json ), чи не могли б ви вилучити тег і слово з запитання?
додано Автор trincot, джерело

6 Відповіді

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

var a = [{
    "userId": 9
  },
  {
    "userId": 14
  }
]

var b = [{
  "role": "1",
  "group": "3"
}, {
  "role": "1",
  "group": "2"
}]

console.log(
  b.map(z=>a.map(x=>({...x, ...z}))).flat()
)
</div> </div>

4
додано
Це добре. Це занадто погано flat() ще не підтримується в Node або Edge.
додано Автор Mark_M, джерело

Щоб досягти очікуваного результату, використовуйте нижче опцію циклічного переходу через два масиви

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

 var x = [
    {
     "userId": 9
    },
    {
      "userId": 14
     }
    ]

 var y = [{"role": "1", "group": "3"}, {"role": "1", "group": "2"}] 
 let result = []
 
y.forEach((v, i) =>{
  x.forEach((y,i) => result.push({...v, ...y}))
})

console.log(result);
</div> </div>

codepen - https://codepen.io/nagasai/pen/pxvzOG?editors=1010

1
додано

Інше рішення, використовуючи для циклу

let arr1 = [{ "userId": 9 }, { "userId": 14 }]
let arr2 = [{"role": "1","group": "3"}, {"role": "1","group": "2" }] 
let result = [];
for (let group of arr2) {
  for (let user of arr1) [
    result.push(Object.assign({}, group, user))
  ]
}
console.log(JSON.stringify(result))
//output is: 
// [
//  {"role":"1","group":"3","userId":9},
//  {"role":"1","group":"3","userId":14},
//  {"role":"1","group":"2","userId":9},
//  {"role":"1","group":"2","userId":14}
// ]

Приклад Stackblitz

1
додано

Можна використовувати мікшер reduction і map , щоб зварити його до одного масиву об'єктів.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

let data = [{
    "userId": 9
  },
  {
    "userId": 14
  }
]

let metaData = [{
  "role": "1",
  "group": "3"
}, {
  "role": "1",
  "group": "2"
}];

let dataReducer = data.reduce((acc, curr) => {
	let metadataReducer = metaData.map((val) => {
  	   return {
    	      ...curr,
              ...val
           };
         }, []);
  
  return [...acc, ...metadataReducer];
}, []);

console.log(dataReducer)
</div> </div>

0
додано

Тут короткий підхід для довільного підрахунку масивів об'єктів.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

var array1 = [{ userId: 9 }, { userId: 14 }],
    array2 = [{ role: "1", group: "3" }, { role: "1", group: "2" }],
    result = [array1, array2]
        .reduce((a, b) =>
            a.reduce((r, v) =>
                r.concat(b.map(w => Object.assign({}, v, w))), []));

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
</div> </div>

0
додано

Ви можете переглядати два масиви, подібні до цього, і натиснути об'єднані значення на результат :

arr1.forEach(e => {
  arr2.forEach(e2 => {
    result.push(Object.assign({}, e, e2));
  });
});

Котрий також може бути написаний на ОДИННІ ЛІНІЇ:

arr1.forEach(e => arr2.forEach(e2 => result.push(Object.assign({}, e, e2))));

<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

const arr1 = [{
    "userId": 9
  },
  {
    "userId": 14
  }
];

const arr2 = [{
  "role": "1",
  "group": "3"
}, {
  "role": "1",
  "group": "2"
}];

const result = [];

arr1.forEach(e => {
  arr2.forEach(e2 => {
    result.push(Object.assign({}, e, e2));
  });
});

console.log(result);
</div> </div>

0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram