JSFiddle - React, Tailwind, and code Playground

by harishanchu

HTML

<div>
  part1name: <span id="part1name"></span>
</div>
<div>
  part2quantity: <span id="part2quantity"></span>
</div>
<div>
  part3name1: <span id="part3name1"></span>
</div>

JavaScript

var someObject = {
    'part1' : {
        'name': 'Part 1',
        'size': '20',
        'qty' : '50'
    },
    'part2' : {
        'name': 'Part 2',
        'size': '15',
        'qty' : '60'
    },
    'part3' : [
        {
            'name': 'Part 3A',
            'size': '10',
            'qty' : '20'
        }, {
            'name': 'Part 3B',
            'size': '5',
            'qty' : '20'
        }, {
            'name': 'Part 3C',
            'size': '7.5',
            'qty' : '20'
        }
    ]
};

var part1name = "part1.name";
var part2quantity = "part2.qty";
var part3name1 = "part3[0].name";

function getValueByDotNotation(obj, path) {
 return new Function('_', 'return _.' + path)(obj);
}

document.getElementById('part1name').innerHTML = getValueByDotNotation(someObject, part1name);
document.getElementById('part2quantity').innerHTML = getValueByDotNotation(someObject, part2quantity);
document.getElementById('part3name1').innerHTML = getValueByDotNotation(someObject, part3name1);