. $ Erweitern JSON-Objekte mit unterschiedlichen Längen

Question

Ich habe zwei JSON-Objekte.

colJson:

{"MetaData": [{"FieldName":"No.","ThousandsSeparator":true},{"FieldName":"Mvmt","DecimalPlaces":0,"ThousandsSeparator":true,"CurrencySymbol":true},{"FieldName":"% Mvmt","DecimalPlaces":1}]} 

Mit einer Länge von 3.

rowJson:

{"MetaData": [{"BackgroundColour":"#A9A9A9","Bold":true}]} 

Mit einer Länge von 1

Was ich brauche, ist am Ende, wo rowJson wird auf jedes Element in der Spalte angewendet.

Allerdings, wenn ich versuchen Sie dies:

var jsonObj = {}; 

jsonObj = $.extend(true, colJson, rowJson); 

The BackGroundColour und Bold nur auf das erste Element in colJson angelegt bekommen.

Haben Sie Ideen, wie Sie BackgroundColour und Bold auf alle ColJson-Objekte anwenden können?

Danke.

Answer 1

Mein Vorschlag ist die Karte und Object.assign Funktionen zu verwenden:

window.onload = function() { 
 
    var colJson = {"MetaData": [{"FieldName":"No.","ThousandsSeparator":true},{"FieldName":"Mvmt","DecimalPlaces":0,"ThousandsSeparator":true,"CurrencySymbol":true},{"FieldName":"% Mvmt","DecimalPlaces":1}]}; 
 
    var rowJson = {"MetaData": [{"BackgroundColour":"#A9A9A9","Bold":true}]}; 
 

 
    var jsonObj = {"MetaData": colJson.MetaData.map(function(currVal, index, arr) { 
 
    return Object.assign(currVal, rowJson.MetaData[0]); 
 
    })}; 
 

 
    document.getElementById('result').textContent = JSON.stringify(jsonObj, 4, 4); 
 
}

<textarea id="result" style="width: 100%;height: 400px;"></textarea>