title: How to merge the key-value pairs of two json arrays? - Javascript
body: <p>I have two JSON arrays like this. I want to merge their keyvalue pairs. They are some items which are common in both while they are some items which are uncommon.</p>
  
  <pre><code>var jsonData1 = [
    {
      firstName: "Sam",
      age: "10"
    },
    {
      firstName: "John",
      age: "11"
    },
    {
      firstName: "Jack",
      age: "12"
    },
    {
      firstName: "Pam",
      age: "13"
    },
    {
      firstName: "Tom",
      age: "14"
    },
    {
      firstName: "Mitch",
      age: "15"
    }
  ];
  
  var jsonData2 = [
        {
          firstName: "Sam",
          city: "London"
        },
        {
          firstName: "John",
          city: "New York"
        },
        {
          firstName: "Jack",
          city: "Paris"
        },
        {
          firstName: "Pam",
          city: "Moscow"
        },
        {
          firstName: "Roger",
          city: "Shanghai"
        },
        {
          firstName: "Don",
          city: "Jakarta"
        }
      ];
  </code></pre>
  
  <p>As you can there are some firstName in 1st array which does not have city in 2nd array. Again there are some firstName  in 2nd array which does not have city in 1st array.</p>
  
  <p>I need to club these 2 array into one array, in case  a firstName does not have age or city it will be assigned '' (blank string).</p>
  
  <p>The new array will have 3 fields, there are some items which will be having values in 2 fields. They have a one field as blank string.</p>
  
  <p>I want to do this using Vanilla JS, I do not want to use Jquery, Lodash and Underscore.</p>