Javascriptで扱う連想配列のあれこれ(GET / CREATE系)

はじめに

連想配列であんなことやこんなことをしたい人向けのきじになります。
バックエンドで整形して返すのが一番ですが、javascriptで処理したいという方は参考までに。

(GET系)連想配列から特定の値を含む配列を取得

index.js

var array = [
    {id:1, name:"hoge",price:3000, status:1},
    {id:2, name:"test",price:300, status:1},
    {id:3, name:"hello",price:1500, status:1},
    {id:4, name:"world",price:3000, status:2},
    {id:5, name:"hoge",price:200, status:1},
    {id:6, name:"test",price:400, status:1},
    {id:7, name:"hoge",price:4000, status:2}
];

// １つの検索条件で取得
var select_id = 3;
const callback = item => item.id == select_id; // 検索条件
var result = array.filter(item => callback(item)); 
console.log(result); // {id:3, name:"hello",price:1500, status:1}



// 複数の検索条件で取得
var select_name = "hoge";
var select_price = 1000;
const callback = item => item.name == select_name && item.price >= select_price;
var result = array.filter(item => callback(item)); 
console.log(result); 
// {id: 1, name: "hoge", price: 3000, status: 1} {id: 7, name: "hoge", price: 4000, status: 2}



// 配列内のインデックスを取得(単体)
var select_id = 4;
const index = array.findIndex(item => item.id === 4);
console.log(index); // 3 



// 配列内のインデックスを取得(複数)
var select_name = "hoge";
var result = [];
var exam_array = array;
for (var i = 0; i < exam_array.length; i++){
    var index = exam_array.findIndex(item => item.name == select_name); // 複数条件は&&でつなげる
    if(index != -1){
        console.log(index);
        result.push(index);
        exam_array.splice(index,1,"");
    } else {
        console.log("complete");
        break;
    }
}
console.log(result); // [0, 4, 6]

(CREATE系)配列に新しい値を追加

index.js

var array = [
    {id:1, name:"hoge",price:3000, status:1},
    {id:2, name:"test",price:300, status:1},
    {id:3, name:"hello",price:1500, status:1},
    {id:4, name:"world",price:3000, status:2},
    {id:5, name:"hoge",price:200, status:1},
    {id:6, name:"test",price:400, status:1},
    {id:7, name:"hoge",price:4000, status:2}
];



// 配列の最後に追加
var new_data = {'id':7, 'name':"new_data",'price':5000, 'status':1};
array.push(new_data);
console.log(array); // (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]


// 配列の最後に追加(auto_inclement版)
var last_id = array[array.length -1].id;
var new_data = {'id':last_id + 1, 'name':"new_data",'price':5000, 'status':1};
array.push(new_data);
console.log(array); // (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] <- id:8のitem


// 任意の場所に値を追加(ユニークじゃなくてもいい場合)
var put_position = array[5 - 2]; // 前から5番目に追加したい場合,先に4番目の配列(直前の配列)を取得する
var put_id = put_position.id; 
var new_data = {'id':put_id + 1, 'name':"new_data",'price':5000, 'status':1};
array.splice(put_id,0,new_data);
console.log(array);
// ...{id: 4, name: "world", price: 3000, status: 2}
// {id: 5, name: "new_data", price: 5000, status: 1}
// {id: 5, name: "hoge", price: 200, status: 1}
// {id: 6, name: "test", price: 400, status: 1}...



// 任意の場所に値を追加(後の値が自動調整版)
var put_position = array[5 - 2]; // 前から5番目に追加したい場合,先に２番目の配列(直前の配列)を取得する
var put_id = put_position.id; // 直前の配列のidを取得する
var new_data = {'id':put_id, 'name':"new_data",'price':5000, 'status':1};
array.splice(put_id,0,new_data);

var exam_array = array;
const new_index = exam_array.findIndex(item => item.id === new_data.id);
var before_array = exam_array.slice(0,new_index + 1);
var adjust_array = exam_array.slice(new_index + 1, exam_array.length);
for(var j = 0; j < adjust_array.length; j++){
    adjust_array[j].id = adjust_array[j].id + 1;
}

var update_array = before_array.concat(adjust_array);
array = update_array;
console.log(array);

// ...{id: 4, name: "world", price: 3000, status: 2}
// {id: 5, name: "new_data", price: 5000, status: 1}
// {id: 6, name: "hoge", price: 200, status: 1}
// {id: 7, name: "test", price: 400, status: 1}
// {id: 8, name: "hoge", price: 4000, status: 2}...

次回はDELETEとUPDATEも紹介します。