1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

∞_00002 | 【Javascript】オブジェクト⇒配列の変換関数

Last updated at Posted at 2019-10-02

2日連続更新!!
自分でほめていきます(=゚ω゚)ノ

今日はJavascriptでオブジェクトを配列に、配列をオブジェクトに変換する汎用性の高めな関数を書き残し

業務中にSharepoint上にwebサイト構築の依頼があり 、
描画内容をEWA(web上でExcelをいじる機能)に張り付けてダウンロード
したいという要望。既存のサイトで実装経験があり、コピペ&修正で実装が完了したのですが

✖  関数内で、そのサイト特有の固定値が入ったまま
✖ オブジェクト→配列 の変換処理で 配列名やインデックスがべた書き

別サイトに使いまわせない専用ソースとなっていてムズムズ...
ソースやコンソール画面で挙動をウォッチしやすいオブジェクトで基本的に処理をしつつ、
必要に応じて配列変換して利用する
 ※ 実装環境 >> ブラウザ:IE8 OS:windows10 (2019/10/03追記)

今後、そのような流れが増える予想なので今のうちに汎用化しておくに越したことはない!!
ということで作った関数の備忘録
(2019/10/03 17:40 バグ対応に伴い、修正)

objArray.js
var input={
    "00001":{userId:1234567,    userNm:"ほげ一郎",    country:"北海道"},
    "00002":{userId:2234567,    userNm:"ふが次郎",    country:"東京"},
    "00003":{userId:3334567,    userNm:"ごう三郎",    country:"滋賀"}
};
var output = [];


function objToArray( inputObject ){
    var outputArray=[];
    var i = 0;
    var j;

    for ( key1 in inputObject ){
       j=0;
       outputArray[i]= [];
       
       for ( key2 in inputObject[key1] ){
           outputArray[i][j] = inputObject[key1][key2];
           j++;
       }
       i++;
    }
    return outputArray;
}

output = objToArray(input);
console.log(output);//→[[1234567,ほげ一郎,北海道],[2234567,ふが次郎,東京][3334567,ごう三郎,滋賀]]

メインの処理の中では、オブジェクトを使用して
ユーザIDでデータ問い合わせをしたり、ページ上でデータの上書き更新をし
Excelに張り付けるときだけ上記の関数に投げて二次元配列にしてから、
EWAの貼り付け関数に渡せるので、対象オブジェクトの増減、プロパティの増減も気にせず
実行可能に(・ω・)

<修正前ソース>

objArray.js
var input={
    00001:{userId:1234567,    userNm:"ほげ一郎",    country:"北海道"},
    00002:{userId:2234567,    userNm:"ふが次郎",    country:"東京"},
    00003:{userId:3334567,    userNm:"ごう三郎",    country:"滋賀"}
};
var output;

function objToArray( inObj ){
    var outputArr=[];
    var i = 0, j = 0;
    var key2 = Object.keys(inObj)

//オブジェクトのキーの繰り返し
    for ( key in inObj ){
//キーのループを利用して配列に格納
       outArr[i]=inObj[key];
    }
    i++;
    return outArr;
}

for( i in input){
    output.push(objToArray(i));
}
output;//→[[1234567,ほげ一郎,北海道],[2234567,ふが次郎,東京][3334567,ごう三郎,滋賀]]


1
1
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?