JSFiddle - React, Tailwind, and code Playground

by Jan Hjørdie

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>  
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

var rels = {
    "Viola": {
        "Orsino": {
            "Olivia": {
                "Cesario": null
            }
        }
    }
};


VAST

 function deepGet(obj, props, defaultValue) {
        // If the property list is in dot notation, convert to array
        if (typeof props === "string") {
            props = props.split(".");
        }

        // In order to avoid constantly checking the type of the properties
        // we separate the real logic out into an inner function.
        var deepGetByArray = function (obj, propsArray, defaultValue) {
            // If we have reached an undefined/null property
            // then stop executing and return the default value.
            // If no default was provided it will be undefined.
            if (obj === undefined || obj === null) {
                return defaultValue;
            }

            // If the path array has no more elements, we've reached
            // the intended property and return its value
            if (propsArray.length === 0) {
                return obj;
            }

            // Prepare our found property and path array for recursion
            var foundSoFar = obj[propsArray[0]];
            var remainingProps = propsArray.slice(1);

            return deepGetByArray(foundSoFar, remainingProps, defaultValue);
        };      };

        
var sallyRel = deepGet(rels, ["Viola", "Harry", "Sally"], {});


console.log(sallyRel);