JavaScript

var dataJSON = {
  "Name": "Group1",
  "Description": "Test Desc",
  "Countries": [
    { 
      "Id": "188b985",
      "Name": "USA",
      "states": [
        { 
          "state": "California",
          "stateNumber": 1,
          "neighbouringStates": [ "Oregon", "Neveda" ]
        }, {
          "state": "North Carolina",
          "stateNumber": 9,
          "neighbouringStates": [ "Virginia", "Georgia" ]
        } 
      ]
    }, {
      "Id": "218b985",
      "Name": "Canada",
      "states": [
        { 
          "state": "Alberta",
          "stateNumber": 21,
          "neighbouringStates": [ "British Columbia", "British Columbia" ]
        }, {
          "state": "Ontario",
          "stateNumber": 92,
          "neighbouringStates": [ "Manitoba", "Quebec" ]
        }
      ]
    }
  ] 
};

var excludeKeys = ["Id", "stateNumber"];

Looking for help with

making a copy of the dataJSON By eliminating the keys from excludeKeys collection.
iterate recursively/loop through dataJSON to a single object with all the nested keys and values.
After flatten, the keys should be something like this

{ 
  "Name": "Group1",
  "Description": "Test Desc",
  "Countries1/Id": "188b985",
  "Countries1/Name": "USA"
  "Countries1/states1/state": "California",
  "Countries1/states1/stateNumber": 1,
  "Countries1/states1/neighbouringStates": [ "Oregon", "Neveda" ],
  "Countries1/states2/state": "North Carolina",
  "Countries1/states2/stateNumber": 9,
  "Countries1/states2/neighbouringStates": [ "Virginia", "Georgia" ],
  "Countries2/Id": "218b985",
  "Countries2/Name": "Canada",
  "Countries2/states1/state": "Alberta",
  "Countries2/states1/stateNumber": 21,
  "Countries2/states1/neighbouringStates": [ "British Columbia", "British Columbia" ],
  "Countries2/states2/state": "Ontario",
  "Countries2/states2/stateNumber": 92,
  "Countries2/states2/neighbouringStates": [ "Manitoba", "Quebec" ]
};

document.getElementById("email").value = email;

document.getElementById("calender_number").selectedIndex = value.toString();
document.getElementByValue("calender_number").selectedIndex = value.toString();
$('#calender_number').val(value.toString());

$('#calender_number').val(value.toString());

const hamburger = document.getElementsByClassName('hamburger')[0]
const menu = document.getElementsByClassName('menu')[0]
hamburger.addEventListener('click', () => {
menu.classList.toggle('active')
})

<nav class="navbar">
    <div class="logo">MY LOGO</div>
    <a class="hamburger" >
      
      
      
    </a>
    <div class="menu">
        <ul> 
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#donate">Donate</a></li>
          <li><a href="#download">Download</a></li>
          <li><a href="#howto">How</a></li>
          <li><a href="#reports">Reports</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
</nav>

    <label class="control-label">Phone</label>
    {{masked-input mask='(999) 999-9999'
                   value=model.Address.Phone
                   input-format='regex'
                   input-filter='\(*[0-9]{3}\) [0-9]{3}-[0-9]{4}'
                   input-filter-message='Phone number is not valid.'
                   class='form-control phone masked'
                   maxlength="14"}}
</div>

export default () => {
    IMS.registerComponent("masked-input", {
        tagName: 'input',
        attrParams: ['required', 'title', 'name', 'placeholder'],
        loaded: false,
        prop: Ember.observer(
            'required',
            'title',
            'name',
            'placeholder',
            'value',
            function () {
                var scope = this;
                $(this.element).val(Ember.get(scope, 'value'));
                var stamp = new Date();
                if (Ember.get(scope, 'loaded') == true) {

                    var element = $(this.element);
                    var attrs = Ember.get(this, 'attrParams');
                    attrs.forEach(function (attr) {
                        var value = Ember.get(scope, attr);
                        if (value == '' | value == null) {
                            element.removeAttr(attr);
                        } else {
                            element.attr(attr, value);
                        }
                    })
                }
            }),
        observeMask: Ember.observer('mask', function () {
            var scope = this;
            $(this.element).inputmask({
                mask: Ember.get(scope, 'mask')
            });
        }),
        didInsertElement: function () {
            var scope = this;

            setTimeout(function () {
                var value = Ember.get(scope, 'value');
                var element = $(scope.element);
                var change = function () { Ember.set(scope, 'value', element.val()); }
                element.val(Ember.get(scope, 'value'));
                element.attr('type', 'text');
                element.change(change);
                // element.keypress(change);
                Ember.set(scope, 'loaded', true);
                scope.observeChanges();
                element.inputmask({
                    mask: Ember.get(scope, 'mask')
                });

                element.attr('input-format', Ember.get(scope, 'input-format'));
                element.attr('input-filter', Ember.get(scope, 'input-filter'));
                element.attr('input-filter-message', Ember.get(scope, 'input-filter-message'));

            }, 250);
        }
    })
}

My assignment asks for this step that I mentioned in the title, but I have 3 days trying to make it,
I don't know how to do it.here is my code in GitHub:- 
https://github.com/HamzaSamiHussein/BusMall/tree/busMall