<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h4>Get result:</h4>
    <pre id="get"></pre>
    <h4>Set result:</h4>
    <pre id="set"></pre>
    <h4>Add result:</h4>
    <pre id="add"></pre>
    <h4>Remove result:</h4>
    <pre id="remove"></pre>
    <script src="script.js"></script>
  </body>

</html>
const data = { 
      "store": {
        "book": [ 
          { "category": "reference",
            "author": "Nigel Rees",
            "title": "Sayings of the Century",
            "price": 8.95
          },
          { "category": "fiction",
            "author": "Evelyn Waugh",
            "title": "Sword of Honour",
            "price": 12.99
          }
        ],
        "bicycle": {
          "color": "red",
          "price": 19.95
        }
      }
    }
    
const path = 'store.book.0.price';

function get(object, path, defaultValue) {

    if (object === null || path === null) { return defaultValue }

    if (!Array.isArray(path)) {
      path = path.split(/\/|\.|\>/)
    }

    function find(object) {
      while(path.length > 1) {
        object = object[path.shift()];
      }
      return object[path.shift()];
    }
    
    let result = find(object);
    
    if (result !== null) { return result }
    else { return defaultValue }

  }
  
function set(object, path, value, defaultValue) {

    if (object === null || path === null || value === null) { return defaultValue }

    if (!Array.isArray(path)) {
      path = path.split(/\/|\.|\>/)
    }

    function find(object) {
      while(path.length > 1) {
        object = object[path.shift()];
      }
      object[path.shift()] = value
    }

    find(object)
    
    if (object !== null) { return object }
    else { return defaultValue }

  }

function add(object, path, value, defaultValue) {

    if (object === null || path === null || value === null) { return defaultValue }

    if (!Array.isArray(path)) {
      path = path.split(/\/|\.|\>/)
    }

    function find(object) {
      while(path.length > 1) {
        object = object[path.shift()];
      }
      let key = path.shift()
      object[key] = Object.assign(value, object[key]);
    }

    find(object)
    
    if (object !== null) { return object }
    else { return defaultValue }

  }
  
function remove(object, path, key, defaultValue) {

    if (object === null || path === null || key === null ) { return defaultValue }

    if (!Array.isArray(path)) {
      path = path.split(/\/|\.|\>/)
    }

    function find(object) {
      while(path.length > 1) {
        object = object[path.shift()];
      }
      delete object[key]
    }

    find(object)
    
    if (object !== null) { return object }
    else { return defaultValue }

  }

let get_result = get(data, path);
document.getElementById('get').innerHTML = JSON.stringify(get_result);

let set_result = set(data, path, 10.00);
document.getElementById('set').innerHTML = JSON.stringify(set_result, null, '   ');

let add_result = add(data, path, { high: 2.00, low: 1.25 })
add_result = add(data, path, { medium: 1.6 })
document.getElementById('add').innerHTML = JSON.stringify(add_result, null, '   ');

let remove_result = remove(data, path, 'author')
document.getElementById('remove').innerHTML = JSON.stringify(remove_result, null, '   ');

/* Styles go here */