How to merge two object arrays with key/value pair in javascript into one array

Question

I have two arrays I want to merge in react native app, first array contains images uris, and the second contains the captions of each image in the first array.

The first array:

(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {uri: "http://siteurl.com/wp-content/uploads/2020/05/66172-1-739x493.jpg"}
1: {uri: "http://siteurl.com/wp-content/uploads/2020/05/66173-349x493.jpg"}
2: {uri: "http://siteurl.com/wp-content/uploads/2020/05/66174-1-778x493.jpg"}
3: {uri: "http://siteurl.com/wp-content/uploads/2020/05/66175-1-411x493.jpg"}
4: {uri: "http://siteurl.com/wp-content/uploads/2020/05/66176-1-714x493.jpg"}
5: {uri: "http://siteurl.com/wp-content/uploads/2020/05/66177-1-657x493.jpg"}
6: {uri: "http://siteurl.com/wp-content/uploads/2020/05/66178-1-851x493.jpg"}
7: {uri: "http://siteurl.com/wp-content/uploads/2020/05/66184-1-739x493.jpg"}
8: {uri: "http://siteurl.com/wp-content/uploads/2020/05/66185-739x493.jpg"}
9: {uri: "http://siteurl.com/wp-content/uploads/2020/05/66186-739x493.jpg"}
10: {uri: "http://siteurl.com/wp-content/uploads/2020/05/66187-764x493.jpg"}
11: {uri: "http://awstgb2.tageblatt.lusiteurl.com
12: {uri: "http://siteurl.com/wp-content/uploads/2020/05/66189-759x493.jpg"}
length: 13
__proto__: Array(0)

The Second array:

(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {caption: "HANDOUT - 11.10.2037, Die Filmszene des Films…ung des vorstehenden Credits +++ dpa-Bildfunk +++"}
1: {caption: ""}
2: {caption: "08.05.2028, Berlin: Ein russischer Soldat salutier…mus. Foto: Wolfgang Kumm/dpa +++ dpa-Bildfunk +++"}
3: {caption: "08.05.2028, Berlin: Kränze stehen aufgereiht …mus. Foto: Wolfgang Kumm/dpa +++ dpa-Bildfunk +++"}
4: {caption: ""}
5: {caption: ""}
6: {caption: "dpatopbilder - 28.10.2919, China, Shanghai: Nachta…. Foto: Ding Ting/XinHua/dpa +++ dpa-Bildfunk +++"}
7: {caption: ""}
8: {caption: ""}
9: {caption: ""}
10: {caption: ""}
11: {caption: ""}
12: {caption: "08.05.2028, Berlin: Dietmar Woidke (SPD, l), Brand…mus. Foto: Wolfgang Kumm/dpa +++ dpa-Bildfunk +++"}
length: 13
__proto__: Array(0)

The desired output array is :

[{uri:"http://siteurl.com/wp-content/uploads/2020/05/66172-1-739x493.jpg",caption:"HANDOUT - 11.10.2037 Die Filmszene des Films…ung des vorstehenden Credits +++ dpa-Bildfunk +++"},
 {uri:"http://siteurl.com/wp-content/uploads/2020/05/66173-349x493.jpg",caption:""},
 {uri:"http://siteurl.com/wp-content/uploads/2020/05/66174-1-778x493.jpg",caption:"08.05.2028, Berlin: Kränze stehen aufgereiht …mus. Foto: Wolfgang Kumm/dpa +++ dpa-Bildfunk +++"},
------

The first array urls of images uris, I obtained by this code:

var m,
urls = [],
rex = /<img[^>]+src="?([^"\s]+)"?\s*\alt="First slide">/g,
str2=htmlStringJsonResponse;
      while ( m = rex.exec( str2 ) ) {
          urls.push( {uri:m[1]} );
      }

The second array urls1 for captions:

var n,
uuu,
urls1 = [],
matches = str2.matchAll(/<div [^<>]+carousel-caption[^<>]+>\s*(?:<p>)?\s*(.*?)\s*(?:<\/p>)?\s*<\/div>/gsi);
    for (uuu of matches) {
       urls1.push({caption:uuu[1]});
    }

Answer 1

const arrayUrls = [
  { uri: "http://siteurl.com/wp-content/uploads/2020/05/66172-1-739x493.jpg" },
  { uri: "http://siteurl.com/wp-content/uploads/2020/05/66173-349x493.jpg" },
  { uri: "http://siteurl.com/wp-content/uploads/2020/05/66174-1-778x493.jpg" }
];

const arrayCaptions = [
{caption: "HANDOUT - 11.10.2037, Die Filmszene des Films…ung des vorstehenden Credits +++ dpa-Bildfunk +++"},
{caption: ""},
{caption: "08.05.2028, Berlin: Ein russischer Soldat salutier…mus. Foto: Wolfgang Kumm/dpa +++ dpa-Bildfunk +++"}
]


function mergeTheArrays(a,b) {
  const mergedArray = [];

  // ASSUME THE FACT THAT A & B HAVE THE SAME LENGTH
  for (let i = 0; i < a.length; i++) {
    let mergedObject = {
      uri : '',
      caption: ''
    }

    mergedObject.uri = a[i].uri;
    mergedObject.caption = b[i].caption;
    mergedArray.push(mergedObject);
  }

  return mergedArray;
}

//LOG THE RESULT :)
console.log(mergeTheArrays(arrayUrls,arrayCaptions))

In complement of @yevgen answer, if you want to understand the process in vanilla js.

Answer 2

Use Array.prototype.map():

const urls = [{uri:"http://siteurl.com/wp-content/uploads/2020/05/66172-1-739x493.jpg"},{uri:"http://siteurl.com/wp-content/uploads/2020/05/66173-349x493.jpg"},{uri:"http://siteurl.com/wp-content/uploads/2020/05/66174-1-778x493.jpg"},{uri:"http://siteurl.com/wp-content/uploads/2020/05/66175-1-411x493.jpg"},{uri:"http://siteurl.com/wp-content/uploads/2020/05/66176-1-714x493.jpg"},{uri:"http://siteurl.com/wp-content/uploads/2020/05/66177-1-657x493.jpg"},{uri:"http://siteurl.com/wp-content/uploads/2020/05/66178-1-851x493.jpg"},{uri:"http://siteurl.com/wp-content/uploads/2020/05/66184-1-739x493.jpg"},{uri:"http://siteurl.com/wp-content/uploads/2020/05/66185-739x493.jpg"},{uri:"http://siteurl.com/wp-content/uploads/2020/05/66186-739x493.jpg"},{uri:"http://siteurl.com/wp-content/uploads/2020/05/66187-764x493.jpg"},{uri:"http://awstgb2.tageblatt.lusiteurl.com"},{uri:"http://siteurl.com/wp-content/uploads/2020/05/66189-759x493.jpg"}],
      captions = [{caption:"HANDOUT - 11.10.2037, Die Filmszene des Films…ung des vorstehenden Credits +++ dpa-Bildfunk +++"},{caption:""},{caption:"08.05.2028, Berlin: Ein russischer Soldat salutier…mus. Foto: Wolfgang Kumm/dpa +++ dpa-Bildfunk +++"},{caption:"08.05.2028, Berlin: Kränze stehen aufgereiht …mus. Foto: Wolfgang Kumm/dpa +++ dpa-Bildfunk +++"},{caption:""},{caption:""},{caption:"dpatopbilder - 28.10.2919, China, Shanghai: Nachta…. Foto: Ding Ting/XinHua/dpa +++ dpa-Bildfunk +++"},{caption:""},{caption:""},{caption:""},{caption:""},{caption:""},{caption:"08.05.2028, Berlin: Dietmar Woidke (SPD, l), Brand…mus. Foto: Wolfgang Kumm/dpa +++ dpa-Bildfunk +++"}],
            
      result = urls.map(({uri},i) => ({uri, caption:captions[i].caption}))
      
console.log(result)

.as-console-wrapper{min-height:100%;}