Как я могу получить некоторую ценность глубоко вложенного объекта?

Question

Существует два типа массивов, которые я должен создавать динамически.

data['fields']['title']

и

data['fields']['description']['html']

возвращает содержимое этой структуры:

{   
    "fields": {
        "title": "Headline",
        "description": {
            "html": "<p>description text</p>"
        }   
    },   
    "meta": {
        "id": "995915463198380032"   
    } 
}

Проблема "динамическая".

Я вызываю функцию и указываю путь через нее как "description>html".Я разделил строку на «описание» и «HTML».Но как мне теперь построить массив: data['fields']['description']['html']

Иногда существует уровень, более или менее похожий на «заголовок».Если я хочу вызвать title, массив будет выглядеть следующим образом: data['fields']['title']

Таким образом, содержимое и количество частей в массиве являются динамическими.

Я попробовал сам это:

function comfort_x(item_fields) {


var splitter = item_fields.split(">");
var content = new Array();

for (var i = 1; i < splitter.length; ++i) {
    content['splitter['+i+']'] = splitter[i];
}

data['fields'][splitter[0]][splitter[1]];

}

Спасибо за помощь.

Answer 1

/*
    Be careful! The function won’t return a new object, 
    but take a reference to the input object aka. alter 
    it and don’t deep-clone it.
*/
const myObject = {};

function setValueByKeypath(object, path, value, separator = ">") {
    path = path.split(separator);
    let currentPart = object;
    for (let i = 0, len = path.length; i < len; i++) {
        const key = path[i];
        const keyValue = (i === len - 1) ? value : {};
        if (typeof currentPart[key] === "undefined") {
            currentPart[key] = keyValue;
        }
        currentPart = currentPart[key];
    }       
}

setValueByKeypath(myObject, "fields>description>html", "<p>description text</p>");
console.log(myObject);

setValueByKeypath(myObject, "fields>title", "Headline");
console.log(myObject);

setValueByKeypath(myObject, "meta>id", "995915463198380032");
console.log(myObject);

Answer 2

Вы можете создать функцию, которая будет смотреть на уровень, который вы проходите.Вы можете просто split свой путь на > и уменьшить этот массив с помощью исходного ввода.

(data, path) => path.split(">").reduce((r, e) => r[e], data);

Вот пример.

var obj = {   
    "fields": {
        "title": "Headline",
        "description": {
            "html": "<p>description text</p>"
        }   
    },   
    "meta": {
        "id": "995915463198380032"   
    } 
}

var lookUp = (o, path) => path.split(">").reduce((r, e) => r[e], o);

console.log('fields: ', lookUp(obj, 'fields'))
console.log('fields>title: ', lookUp(obj, 'fields>title'))
console.log('fields>description>html: ', lookUp(obj, 'fields>description>html'))

Answer 3

Это работает с дополнительным обходным решением:

        switch (splitter.length) {
        case 0:
            item.innerHTML = data['fields'];
        break;
        case 1:
           item.innerHTML = data['fields'][splitter[0]];
        break;
        case 2:
            item.innerHTML = data['fields'][splitter[0]][splitter[1]];
        break;
        case 3:
            item.innerHTML = data['fields'][splitter[0]][splitter[1]][splitter[2]];

    }

возможно, у вас есть более разумное решение.