首頁猿問在 Javascript...

在 Javascript 中更改對象的嵌套屬性

JavaScript

SMILET 2022-10-13 16:45:38

具有這種形式的對象：const myObj = { 'firstA': { 'secondC': [1,2,3], 'secondD': [4,5,6], }, 'firstB':{ 'secondE': [0,0,0], 'secondF': [1,1,1], },}我正在訪問其子數組之一，例如secondC.在這種情況下，應用程序使用appValue = myObj.firstA.secondC.值secondC、和位于下拉列表中secondD，因此用戶可以單擊其中一個，應用程序必須重新加載新數據。secondEsecondF如果未指定“中間”節點，有沒有辦法獲得該值？（在下拉列表中沒有firstAor firstB）

查看完整描述

3 回答

慕勒3428872

TA貢獻1848條經驗獲得超6個贊

您還必須跟蹤中間鍵，例如

{

"secondC":"fristA",

"secondD":"fristA",

}

然后，當用戶從下拉列表中選擇時，您可以在映射中查找并知道中間鍵。如果每次都搜索，您可以創建一次此映射并將其用作緩存。

這是生成子鍵和中間鍵之間映射的代碼：

const myObj = {

'firstA': {

'secondC': [1,2,3],

'secondD': [4,5,6],

'firstB':{

'secondE': [0,0,0],

'secondF': [1,1,1],

}

const mapping = Object.keys(myObj).reduce((acc,key)=>{

const subKeys = Object.keys(myObj[key]);

for(const subkey of subKeys){

acc[subkey] = key

}

return acc

},{})

console.log(mapping)

反對回復 2022-10-13

嚕嚕噠

TA貢獻1784條經驗獲得超7個贊

你可以使用一個函數Object.entries來迭代你的對象并找到你正在尋找的鍵：

const myObj = {

'firstA': {

'secondC': [1,2,3],

'secondD': [4,5,6],

'firstB':{

'secondE': [0,0,0],

'secondF': [1,1,1],

}

// Let's say the user selected "secondE"

let key = "secondE";

// Now find it:

let [mid, midValue] = Object.entries(myObj).find(([mid, midValue]) => key in midValue);

console.log(mid, key, midValue[key]);

反對回復 2022-10-13

天涯盡頭無女友

TA貢獻1831條經驗獲得超9個贊

您可以將對象轉換為平面對象，然后改用它：

const myObj = {

'firstA': {

'secondC': [1, 2, 3],

'secondD': [4, 5, 6],

'firstB': {

'secondE': [0, 0, 0],

'secondF': [1, 1, 1],

};

const $select = document.querySelector('select');

const $pre = document.querySelector('pre');

const options = Object.entries(myObj)

.reduce((res, [key, obj]) => ({...res, ...obj}), {});

Object.keys(options).forEach(key => {

const $option = document.createElement('option');

$option.value = key;

$option.innerText = key;

$select.appendChild($option);

});

$select.addEventListener('change', e => {

const key = e.target.value;

const value = key ? JSON.stringify(options[key]) : '';

$pre.innerHTML = value;

});

<option>-- Select a property --</option>

</select>

反對回復 2022-10-13

3 回答
0 關注
231 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 Javascript 中更改對象的嵌套屬性

在 Javascript 中更改對象的嵌套屬性

3 回答

添加回答