javascriptの連想配列の中の子要素を、別の子要素形式の配列で上書きしたい

Question

javascriptの連想配列の中の子要素を、別の子要素形式の配列で上書きしたいですが、うまくできなくて困っています。

javascript gridライブラリでセルの編集を使用しています。
不明点はjavascriptの配列の処理方法なので、gridのことは省略します。

■元データ(rowVersion列を追加)

let currentRowData = [
    {
        id: 1, name: "A", values: [
            { id: 1, parentId: 1, name: "a", value: 1 , rowVersion: "xxx" }
        ]
    }
];

■　gridのセルをダブルクリックすると、childrenの入力を子画面で行います。
画面イメージ(ヘッダ追加)

---

name value
a □
b □
c □
[選択]

---

■　[選択]ボタンを押したとき、下記のscriptのような動きを想定していますが、うまくいかなく、どのように処理すれば良いでしょうか？
ただし、子画面で全てが入力しているとは限らないし、入力を消したものがnullになる場合もある。childrenのidが発行済みの場合もある。
※parentのidが0の時もありますが、それは質問の内容から省略します。

問題の原因はidがないものがあるのにfindを使っているので、もしかしたら
nameとvalue !== nullの2つの条件で取得しないといけないかもしれません。

// 例①のデータを変更、parentのidが1の時とした場合
let id = 1;

// 元データ(rowVersion列を追加)
let rowData = [
    {
        id: 1, name: "A", values: [
            { id: 1, parentId: 1, name: "a", value: 1, rowVersion: "xxx"}
        ]
    }
];

// 子画面で入力した変更データ(この入力データにrowVersion列はありません。)
let values = [
    { id: 1, parentId: 1, name: "a", value: 1 }, 
    { id: 0, parentId: 1, name: "b", value: 4 },
    { id: 0, parentId: 1, name: "c", value: null } // これは入力していないデータ
];

// childenのデータを更新
const newRowData = rowData.map((currentValue) => {
    // 例ではこのif文はid=1でtrueになります
    if (currentValue.id === id) {

        // valuesを、元データに上書きしたい
        let childrens = values.map((currentValue2) => {
            // 問題の原因はidがないからかも？
            const newValue = currentRowData.values.find(({ id }) => currentValue2.id === id);
            return newValue ?? currentValue2;
        }, []);

        currentValue2.values = childrens;
    }

    return currentValue;
});

仕様追加しました。
・parentのidと、childrensのchildrenのparentIdは紐づいてます。
・childrensのidとrowVersion列は元のデータを利用、新しく入力したchildrensのchildrenで1つずつ入力箇所のみ、上書きしなければならない

(追記)
以下のようなコードを考えてみました。間違っている個所があるかもしれませんが。
少し冗長になってしまったかもしれません。

let id = 1;

let rowData = [
    {
        id: 1, name: "A", values: [
            { id: 1, parentId: 1, name: "a", value: 1, rowVersion: "xxx"}
        ]
    }
];

let values = [
    { id: 1, parentId: 1, name: "a", value: 1 }, 
    { id: 0, parentId: 1, name: "b", value: 4 },
    { id: 0, parentId: 1, name: "c", value: null } // これは入力していないデータ
];

// childensのchildenでデータを更新
const newRowData = rowData.map((currentValue) => {
    // 例ではこのif文はid=1でtrueになります
    if (currentValue.id === id) {

        // valuesを、元データに上書きしたい
        let childrens = values.map((currentValue2) => {
            // find
            let findChildren = currentValue.values.find((element) => {
                return element.id === currentValue2.id && element.name === currentValue2.name;
            });

            // newChildrenを準備、 findChildrenがあれば差し替え
            let newChildren = { id: 0, parentId: id, name: null, value: null, rowVersion: null };
            findChildren ? (newChildren = findChildren) : null;
 
            // newChildrenを更新
            newChildren.name = currentValue2.name;
            newChildren.value = currentValue2.value;

            return newChildren;
        }, []);

        currentValue.values = childrens;
    }

    return currentValue;
}, []);

Answer 1

追記にきました自己解決した方法になります。

let id = 1;

let rowData = [
    {
        id: 1, name: "A", values: [
            { id: 1, parentId: 1, name: "a", value: 1, rowVersion: "xxx"}
        ]
    }
];

let values = [
    { id: 1, parentId: 1, name: "a", value: 1 }, 
    { id: 0, parentId: 1, name: "b", value: 4 },
    { id: 0, parentId: 1, name: "c", value: null } // これは入力していないデータ
];

// childensのchildenでデータを更新
const newRowData = rowData.map((currentValue) => {
    // 例ではこのif文はid=1でtrueになります
    if (currentValue.id === id) {

        // valuesを、元データに上書きしたい
        let childrens = values.map((currentValue2) => {
            // find
            let findChildren = currentValue.values.find((element) => {
                return element.id === currentValue2.id && element.name === currentValue2.name;
            });

            // newChildrenを準備、 findChildrenがあれば差し替え
            let newChildren = { id: 0, parentId: id, name: null, value: null, rowVersion: null };
            findChildren ? (newChildren = findChildren) : null;

            // newChildrenを更新
            newChildren.name = currentValue2.name;
            newChildren.value = currentValue2.value;

            return newChildren;
        }, []);

        currentValue.values = childrens;
    }

    return currentValue;
}, []);

Answer 2

それぞれのidとparentIdの関係を把握しかねますが
事前にparentId?がわかっているなら、そのままvaluesに新しいvaluesを代入すれば良いように思います。

const newRowData = rowData.map((currentValue) => {

	// 例ではこのif文はid=1でtrueになります
	if (currentValue.id === id) currentValue.values = values;

	return currentValue;
});

上書きしないデータ等をループで判別する必要があるなら、そのあたりの仕様の説明が必要かと思います。

Comments

[退会済みユーザー]

コメントありがとうございます。

単純にvaluesで上書きする方法はとれないです。
仕様の説明不足ですみませんが、仕様を追加しました。
・rowVersion列を追加
・parentのidと、childrensのchildrenのparentIdは紐づいてます。
・childrensのidとrowVersion列は元のデータを利用、新しく入力したchildrensのchildrenで1つずつ入力箇所のみ、上書きしなければならない

[webgoto]

提示頂いたコードでは現在、下記の値に上書きされていると思いますが、正しくはどのような値になる必要があるのでしょうか?

values: Array (3)
0: {id: 1, parentId: 1, name: "a", value: 1, rowVersion: "xxx"}
1: {id: 0, parentId: 1, name: "b", value: 4, rowVersion: null}
2: {id: 0, parentId: 1, name: "c", value: null, rowVersion: null}

[退会済みユーザー]

現在、下記になっていますが、行き違いであればすみません。
values: Array (3)
0: {id: 1, parentId: 1, name: "a", value: 1 }
1: {id: 0, parentId: 1, name: "b", value: 4}
2: {id: 0, parentId: 1, name: "c", value: null }

[webgoto]

すみません。その形になるのが正しいのですか？

[退会済みユーザー]

説明わかりにくくてすみません、下記のフローを想定してます。

■　最初のデータ
let rowData = [
{
id: 1, name: "A", values: [
{ id: 1, parentId: 1, name: "a", value: 1, rowVersion: "xxx"}
]
}
];

■　入力データ
let values = [
{ id: 1, parentId: 1, name: "a", value: 1 },
{ id: 0, parentId: 1, name: "b", value: 4 },
{ id: 0, parentId: 1, name: "c", value: null } // これは入力していないデータ
];

↓　rowDataのid=1のvaluesを入力データのvaluesで上書き

■　結果データ
rowData = [
{
id: 1, name: "A", values: [
{id: 1, parentId: 1, name: "a", value: 1, rowVersion: "xxx"}
{id: 0, parentId: 1, name: "b", value: 4, rowVersion: null}
{id: 0, parentId: 1, name: "c", value: null, rowVersion: null}
]
}
]

[webgoto]

yuchan01様の記載されてるコードで既に結果データはそのようになっているように思いますが違う部分がありますでしょうか。

[退会済みユーザー]

追記のコードでうまくいきました。ありがとうございました。
一旦、自己解決とさせて頂きます。