オブジェクトの値が正しく

Question

を更新されていない、次のように私は、オブジェクトを持っている：

{ 
"headerSection": { 
    "text": "Some Text", 
    "color": "red", 
    "fontSize": "12px", 
    "backgroundColor": "#000", 
    "textAlign": "left" 
    } 
} 

は、私は、ユーザーがすなわち14px, 16px .. 20px異なるフォントサイズを選択することができますドロップダウンリストを持っています。私は私がそのためのように、私の上記の目的にfontSizeの値を変更したい、このドロップダウンの変更イベントの場合：上記console.log出力に

$('#font-size-ddl').change(function() { 
    var value = $(this).val(); 
    headerObj.fontSize = value; 
    console.log(JSON.stringify(headerObj)); 
}); 

です：

{ 
"headerSection": { 
    "text": "Some Text", 
    "color": "red", 
    "fontSize": "12px", 
    "backgroundColor": "#000", 
    "textAlign": "left" 
}, 
"fontSize": "20px", 
} 

ことができる誰かしてください私が間違っていることを教えてください。

Answer 1

headerSectionfontSizeプロパティを更新する必要があります。

は、あなたのケースでは、あなたのheaderObjオブジェクトのプロパティfontSize世話コンパイラは、それはそれを発見し、あなたのオブジェクトの新しいプロパティを作成しないでください。

let headerObj={ 
 
"headerSection": { 
 
    "text": "Some Text", 
 
    "color": "red", 
 
    "fontSize": "12px", 
 
    "backgroundColor": "#000", 
 
    "textAlign": "left" 
 
    } 
 
} 
 

 
$('select').change(function() { 
 
    var value = $(this).val(); 
 
    headerObj.headerSection.fontSize = value; 
 
    console.log(JSON.stringify(headerObj)); 
 
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option value="20px">20px</option> 
 
    <option value="30px">30px</option> 
 
</select>

Answer 2

私はfontSizeプロパティが不適切に追加されていることを、あなたの出力を見た後、信じています。

headerSectionに追加するには、この操作を行う必要があります。

$('#font-size-ddl').change(function() { 
    var value = $(this).val(); 
    headerObj.headerSection.fontSize = value; // like this 
    console.log(JSON.stringify(headerObj)); 
}); 

Answer 3

$('#font-size-ddl').change(function() { 
    var value = $(this).val(); 
    headerObj.headerSection.fontSize = value; 
    console.log(JSON.stringify(headerObj)); 
}); 

あなたがにconsole.log

Answer 4

から見ることができるようにあなたは、ネストされたオブジェクトを持って、headerObj代わりのheaderObj.headerSectionに値を追加しています。ネストされていないオブジェクトは次のようになります

{ 
"text": "Some Text", 
"color": "red", 
"fontSize": "12px", 
"backgroundColor": "#000", 
"textAlign": "left" 
} 

代わりに、別のオブジェクトを指す "headerSection"というプロパティを持つ外部オブジェクトがあります。データ構造を変更しない場合は、コードを変更して内部プロパティにアクセスする必要があります。このようなもの

$('#font-size-ddl').change(function() { 
    var value = $(this).val(); 
    headerObj["headerSection"]["fontSize"] = value; 
    console.log(JSON.stringify(headerObj)); 
}); 

Answer 5

[OK]をクリックするだけで少し変更する必要があります。

$('#font-size-ddl').change(function() { 
    var value = $(this).val(); 
    headerObj.headerSection.fontSize = value; // See here. 
    console.log(JSON.stringify(headerObj)); 
});