JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result"></div>

CSS

#result {
    font-family:arial
}

JavaScript

function Message(message) {
    $('result').insert('<div>' + message + '</div>');
}

var obj = {
    "array": [1, 2, 3],
    "boolean": true,
    "null": null,
    "number": 123,
    "object": {
        "a": "b",
        "c": "d",
        "e": "f",
        "complex_array1": [{
            "g": "h"
        }, {
            "bingo": "bongo"
        }, {
            "x": {
                "complex_array2": [{
                    "h": "a"
                }, {
                    "j": "k"
                }, {
                    "bingo": "bongo"
                }, {
                    "bango": "jango"
                }]
            }
        }]
    },
    "string": "Hello World"
};

var list = [{
    "h": "abci"
}, {
    "j": "123k"
}];

function walk(path,value) {
    var a = path.split('.');
    var context = obj;
    
    var i = 0;
    
    for (; i < a.size() - 1; i++) {
        context = context[a[i]];
    }

    context[a[i]] = value;

    Message('Expected value for complex_array2');
    Message('---------------------');
    Message(Object.toJSON(context));
}

Message('Original Value');
Message('---------------------');
Message(Object.toJSON(obj));
Message('=====================');
walk('object.complex_array1.2.x.complex_array2',list);
Message('=====================');
Message('Doesn\'t stick');
Message('---------------------');
Message(Object.toJSON(obj));