質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.64%

【JavaScript】連想配列をさらに配列に入れる

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 2,959

cookie1123

score 8

前提・実現したいこと

JavaScript初心者です。

JavaScriptとAjaxで、ローカルのCSVファイルを読み込もうとしています。
(CSVファイルは項目ごとにカンマ区切り、データごとに改行されています)
読み込んだテキストは、連想配列をさらに配列に入れた形式に変換しようとしています。

例)tourismList[{id:"1",name:"名前1",areaID:"エリア名1"・・・},{id:"2",name:"名前2",areaID:"エリア名2"・・・},・・・]

読み込んだテキストを連想配列に入れるところまではできたのですが、それをさらに配列に入れようとすると、配列の中身すべてが最終要素で上書きされて入ってしまいます。
document.getElementById("test").innerHTML += arrayT[i]['name']の段階ではきちんとすべての要素が出力できているので、arrayT[i]=tourismListItemのあたりが怪しいと思うのですが、いろいろ調べて試してみても改善できません。

似たような質問内容が過去にもあったのですが、そこでも解決できていないようでしたので改めて質問させていただきます。
修正方法ご存知の方、ご教示よろしくお願いいたします。

該当のソースコード

function csvToArray(path) {
    var csvData = new Array();    

    var data = new XMLHttpRequest();        
    data.open("GET", path, false);
    data.send(null);

    var getCsvData = data.responseText;
    csvData = getCsvData.split("\n");
    return csvData;
}

function arrayToTourismList(array){
    var arrayT = [];
    var tourismListItem = {};
    var headerLine = ['id','name','areaID','category','smallCategory','description','postalCode','address','tell','lat','lng','time','holiday','parking','accsess','fee'];

    for (var i = 1; i < array.length-1; i++) {
        var value = array[i].split(",");
        for(var n=0; n<value.length; n++){            
            var key = headerLine[n];
            tourismListItem[key] = value[n];
        }    
        arrayT[i]=tourismListItem;
        document.getElementById("test").innerHTML += arrayT[i]['name'] +"<br />";
    }
    return arrayT;
}

function initialize(){
    var CSVdata = csvToArray("tourist.csv");
    var tourismList = arrayToTourismList(CSVdata);
  ・・・(以降別処理)

試したこと

arrayT.push(tourismListItem)を試しましたがエラーにより配列に入りませんでした。
コンソールエラー:Uncaught TypeError: Cannot read property 'push' of undefined

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+4

配列の中身すべてが最終要素で上書きされて入ってしまいます。

その原因は、配列に同じオブジェクト(連想配列)を何回も入れているからです。
配列の中にある全てのアイテムは1つのオブジェクトを指しているため、そのオブジェクトが書き換えられると、配列の中身すべてが上書きされたように見えているわけです。

以下のように、毎回オブジェクトを作成してそれを配列に入れるコードを試してみてください。

function arrayToTourismList(array){
    var arrayT = [];
    var headerLine = ['id','name','areaID','category','smallCategory','description','postalCode','address','tell','lat','lng','time','holiday','parking','accsess','fee'];

    for (var i = 1; i < array.length-1; i++) {
        var tourismListItem = {}; // ●ここで毎回オブジェクトを作成
        var value = array[i].split(",");
        for(var n=0; n<value.length; n++){            
            var key = headerLine[n];
            tourismListItem[key] = value[n];
        }    
        arrayT[i]=tourismListItem;
        document.getElementById("test").innerHTML += arrayT[i]['name'] +"<br />";
    }
    return arrayT;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/14 11:11

    迅速な回答と分かり易い解説ありがとうございました!無事配列に格納することが出来ました。
    オブジェクトの取り扱いについて改めて勉強し直します。また何かあった際はよろしくお願いいたします。

    キャンセル

+3

var tourismListItem = {};

↓↓↓

var tourismListItem = [];


として

tourismListItem[key] = value[n];

if(typeof tourismListItem[i] ==="undefined"){
  tourismListItem[i]={}
}
tourismListItem[i][key] = value[n];

のような処理ですかね

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/14 11:17

    詳細なコードと迅速な回答ありがとうございました!配列への収め方に問題があったのですね。
    一行ずつしっかり勉強していきます。また質問があった際はよろしくお願いいたします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る