Merge two arrays together in Javascript by comparing and pairing corresponding elements

Question

Merge two arrays together in Javascript by comparing and pairing corresponding elements

Dealing with two arrays here. One comes from an API and the other is fetched from Firebase. Both contain a common key, which is the TLD as illustrated below.

API Array

[
 {
  "TLD" : "com",
  "tld_type": 1,
 },
  "TLD" : "org",
  "tld_type" : 1,
 }
]

Firebase Array

[
  {
    "TLD" : "com",
    "register_price" : 14.99
  },
  {
    "TLD" : "org",
    "register_price" : 15.99
  }
]

The goal is to merge these arrays into one cohesive array like this:

[
    {
        "TLD" : "com",
        "tld_type" : 1,
        "register_price" : 14.99
    },
    {
        "TLD" : "org",
        "tld_type" : 1,
        "register_price" : 15.99
    }
]

I've tried using concact after some online research but it doesn't seem to consider the key while matching elements. Any thoughts on how to achieve this?

javascript arrays firebase

Answer 1

Answer №1

To combine data from two arrays and create a new object with corresponding keys and values, you can utilize the map function. This will generate a new array of objects containing the merged information.

let api = [{
    "tld": "com",
    "tld_type": 1,
  },
  {
    "tld": "org",
    "tld_type": 1,
  }
]
let fb = [{
    "TLD": "com",
    "register_price": 14.99
  },
  {
    "TLD": "org",
    "register_price": 15.99
  }
]

let k = api.map(function(item, index) {
  let obj = {};
  obj.tld = item.tld;
  obj['tld_type'] = item['tld_type'];
  obj['register_price'] = fb[index]['register_price']
  return obj;

});
console.log(k)

Answer 2

To combine data from two arrays and create a new object with corresponding keys and values, you can utilize the map function. This will generate a new array of objects containing the merged information.

let api = [{
    "tld": "com",
    "tld_type": 1,
  },
  {
    "tld": "org",
    "tld_type": 1,
  }
]
let fb = [{
    "TLD": "com",
    "register_price": 14.99
  },
  {
    "TLD": "org",
    "register_price": 15.99
  }
]

let k = api.map(function(item, index) {
  let obj = {};
  obj.tld = item.tld;
  obj['tld_type'] = item['tld_type'];
  obj['register_price'] = fb[index]['register_price']
  return obj;

});
console.log(k)

Answer 3

Answer №2

When facing this type of issue, there is no one-size-fits-all solution. One approach is to iterate through all elements and add a register_price property if it exists in the firebase array. A concise way to do this is:

let combined = apiArray.map(ele=>{
    let matchedElement = fbArray.find(e => e.TLD === ele.tld)
    if(matchedElement != undefined) ele.register_price = matchedElement.register_price
    return ele
})

If you need to merge all properties, not just register_price:

let combined = apiArray.map(ele=>{
    let matchedElement = fbArray.find(e => e.TLD === ele.tld)
    if(matchedElement != undefined) {
       let mergedObject = Object.assign(ele, matchedElement)
       return mergedObject
    }else{
       return ele
    }
})

Answer 4

When facing this type of issue, there is no one-size-fits-all solution. One approach is to iterate through all elements and add a register_price property if it exists in the firebase array. A concise way to do this is:

let combined = apiArray.map(ele=>{
    let matchedElement = fbArray.find(e => e.TLD === ele.tld)
    if(matchedElement != undefined) ele.register_price = matchedElement.register_price
    return ele
})

If you need to merge all properties, not just register_price:

let combined = apiArray.map(ele=>{
    let matchedElement = fbArray.find(e => e.TLD === ele.tld)
    if(matchedElement != undefined) {
       let mergedObject = Object.assign(ele, matchedElement)
       return mergedObject
    }else{
       return ele
    }
})

Merge two arrays together in Javascript by comparing and pairing corresponding elements

Answer №1

Answer №2

Similar questions

Deleting items from an array in ReactJS

Utilizing AngularJS to make an API call with $http method and handling a

Ways to effortlessly activate an angular directive once the page has been fully loaded

IIFE and the Twitter share button are a powerful duo

Remove elements generated by the .after method with Jquery

Troubleshooting: Ruby on Rails and Bootstrap dropdown issue

Concealing scroll bars while still maintaining the ability to scroll by using overflow:scroll

Assistance Required in Turning Down Trade Requests on Steam That Involve Losing items

Setting up the current user's location when loading a map with Angular-google-maps

Is there a missing X-AppEngine-Region in the headers of the AppEngine application?

Using httpRequest to handle binary data in JavaScript

Should I use graphite or make multiple AJAX calls for querying data?

What is the best method to make an email address distinct?

What is the best way to pass my request data to my $scope variable?

performing a GET request directly from a <script> element in the index.html file

What could be causing my jQuery function to not correctly update the class as specified?

Storing a multi-dimensional array in PHP efficiently

Extract a property from a JSON object

Build a nested block containing a div, link, and image using jQuery or vanilla JavaScript

Uncovering design elements from Material UI components