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

Question

###前提・実現したいこと
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

Answer 1

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

その原因は、配列に同じオブジェクト(連想配列)を何回も入れているからです。
配列の中にある全てのアイテムは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;
}

Comments

[cookie1123]

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

Answer 2

var tourismListItem = {};

↓↓↓

var tourismListItem = [];

として

tourismListItem[key] = value[n];

↓

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

のような処理ですかね

Comments

[cookie1123]

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