javascriptで多次元配列のデータを上書きする方法は？

Question

私は内部の各配列が（ユーザーが入れた）すべてのユーザー情報の組み合わせである多次元配列を持っています

私は、ユーザーが自分の名前や電話番号などの情報を変更できるようにしたい、ユーザーが次回ログインすると、新しい情報が表示されます。

userListはJSONに保存されていますが、そこから変更を保存して読み込むことが考えられます。

例：

私の配列は

userList= JSON.parse(localStorage.getItem('userListLS') 
    if(userList == null) { 
userList = 

     [ 
     ['Isaac', 'Garth', 'IsaacG11@email.com', 'Mazda'] 
     ['Matthew', 'Miller', 'mmiller21@mail.com', 'Volvo'] 
     ] 
} 

を持っており、アイザックがログインしていると言うことができます、と彼はよう、IsaacG21@email.comに電子メールをガブリエルに彼の名前を変更し、変更したい場合新しい配列は次のようになります：

userList= [ 
     ['Gabriel', 'Garth', 'IsaacG21@email.com', 'Mazda'] 
     ['Matthew', 'Miller', 'mmiller21@mail.com', 'Volvo'] 
     ] 

これはどのように達成できますか？

JSとHTMLのみでお願いします。

Answer 1

最も簡単なアプローチは、直接インデックスセレクタを使用してデータを変更することであろう。

このアプローチではなく、望ましくない副作用をもたらすことができる新たな参照を返すの初期配列を変異させます。

function modifyData(data, userId, fieldId, newData) { 
 
    if(data[userId] && data[userId][fieldId]) { 
 
     data[userId][fieldId] = newData; 
 
    } 
 
    return data; 
 
} 
 

 
// example 
 
var userList= [ 
 
    ['Isaac', 'Garth', 'IsaacG11@email.com', 'Mazda'], 
 
    ['Matthew', 'Miller', 'mmiller21@mail.com', 'Volvo'] 
 
]; 
 
const FIELD_NAME_ID = 0; 
 
const USER_ID = 0; 
 

 
var modified = modifyData(userList, USER_ID, FIELD_NAME_ID, 'Morty') 
 

 
console.log('initial', userList); 
 
console.log('modified', modified);

不変のアプローチは、次のようになります。

function modifyData(data, userId, fieldId, newData) { 
 
    if(data && data[userId] && data[userId][fieldId]) { 
 
     var _data = data.slice(); 
 
     var _user = data[userId].slice(); 
 
     _user[fieldId] = newData; 
 
     _data[userId] = _user; 
 
     return _data; 
 
    } 
 
    return data; 
 
} 
 

 
// example 
 
var userList= [ 
 
    ['Isaac', 'Garth', 'IsaacG11@email.com', 'Mazda'], 
 
    ['Matthew', 'Miller', 'mmiller21@mail.com', 'Volvo'] 
 
]; 
 
const FIELD_NAME_ID = 0; 
 
const USER_ID = 0; 
 

 

 

 
var modified = modifyData(userList, USER_ID, FIELD_NAME_ID, 'Morty'); 
 

 
console.log('initial', userList); 
 
console.log('modified', modified);

しかし、あなたは、オブジェクトの辞書にあなたの構造を変更することを検討すべきである：

{ 
user1: { name: 'Isaac', lastName: 'Garth' /* ... */ } 
// ... 
} 

またはオブジェクトの配列（しかし、あなたは、アレイ内の適切なユーザーを見つけなければならない：

[ 
{ name: 'Isaac', lastName: 'Garth' /* ... */ } 
// ... 
] 

Answer 2

地図のために良いユースケース：変更するので、

const users = new Map(
    userList.map(
    ([first,name,email,car]) => [first, { first,name,email,car }] 
) 
); 

特定ユーザーのメール：

users.get("Isaac").email = "test @ gmail.com"; 

さらにいくつかの用途：

//set a whole user: 
users.set("Jack", { 
first:" Jack", 
name:"Daniels", 
email:"me@example.com", 
car:"VW" 
}); 

//get an array of users again 
userList = [...users.values()];