連想配列をfor文で表示させたい

Question

下記のテキストファイルからfor文を使い
name:名前　val:ハンバーグ
name:分類　val:洋食
name:主成分　val:タンパク質

といったような感じで表示させていきたいのですが、下記の方法ではこの通りに表示されませんでした。どのようにやればできますでしょうか？

名前=ハンバーグ, 分類=洋食, 主成分=タンパク質
名前=寿司, 分類=和食, 主成分=炭水化物
名前=牛乳, 分類=飲み物, 主成分=カルシウム

   $(function(){
    $("#button").click(function(event){
      $.ajax({
        type: "GET",
        url: "text.php",
　　　　data: {val:null},
        dataType : "text"
      }).done(function(data){
	　var test = JSON.parse(data);
        window.addEventListener('DOMContentLoaded', ()=>{
    var data=test.split(/\n/).map(x=>{
      return x.split(", ").map(x=>{
        var y=x.split('=');
        return {name:y[0],val:y[1]};
      });
    }).reduce((x,y)=>x.concat(y));
    console.log(data);
  });
      }).fail(function(XMLHttpRequest, textStatus, errorThrown){
        alert(errorThrown);
      });
    });
  });

$text=file("name.txt");
$text_array = array();
foreach($text as $row){
$params = explode(",",$row);
$text_array[$params[0]] = $params[1];
}
$json = json_encode($text_array);
echo $json;

Comments

[yambejp]

textに入っているのが同じデータばかりだと応用がききません

[azuapricot]

test[key] の間違いじゃなくて・・・？

Answer 1

<script>
var str=`名前=ハンバーグ, 分類=洋食, 主成分=タンパク質
名前=寿司, 分類=和食, 主成分=炭水化物
名前=牛乳, 分類=飲み物, 主成分=カルシウム`;
window.addEventListener('DOMContentLoaded', ()=>{
  str.split(/\n/).forEach(x=>{
    x.split(", ").forEach(x=>{
      var y=x.split('=');
      var test=document.querySelector('.test');
      test.appendChild(document.createTextNode("name:"+y[0]+" val:"+y[1]));
      test.appendChild(document.createElement("br"));
    });
  });
});
</script>
<div class="test"></div>

ちなみにこうすると

var str=`名前=ハンバーグ, 分類=洋食, 主成分=タンパク質
名前=寿司, 分類=和食, 主成分=炭水化物
名前=牛乳, 分類=飲み物, 主成分=カルシウム`;
window.addEventListener('DOMContentLoaded', ()=>{
  var data=str.split(/\n/).map(x=>{
    return x.split(", ").map(x=>{
      var y=x.split('=');
      return {name:y[0],val:y[1]};
    });
  }).reduce((x,y)=>x.concat(y));
  console.log(data);
});

こんなデータが返ります

{ name: "名前", val: "ハンバーグ" }
{ name: "分類", val: "洋食" }
{ name: "主成分", val: "タンパク質" }
{ name: "名前", val: "寿司" }
{ name: "分類", val: "和食" }
{ name: "主成分", val: "炭水化物" }
{ name: "名前", val: "牛乳" }
{ name: "分類", val: "飲み物" }
{ name: "主成分", val: "カルシウム" }

textをfetch

仮にtextデータをfetchで呼んで処理する場合

• test.txt

名前=ハンバーグ, 分類=洋食, 主成分=タンパク質
名前=寿司, 分類=和食, 主成分=炭水化物
名前=牛乳, 分類=飲み物, 主成分=カルシウム

fetch('test.txt').then(res=>res.text()).then(str=>{
  var data=str.split(/\n/).map(x=>{
    return x.split(", ").map(x=>{
      var y=x.split('=');
      return {name:y[0],val:y[1]};
    });
  }).reduce((x,y)=>x.concat(y));
  console.log(data);
});

Comments

[nikuniku12]

phpでテキストファイルを取得しエンコードしたデータをjsでparseしたデータに、回答と同じようにやってみているのですがエラーも何も表示されません。。何故だかわからないでしょうか

[yambejp]

> phpでテキストファイルを取得しエンコードしたデータ

を、どうやっているか提示してください
ajax(fetch)でjson渡しとかしてますか？

[nikuniku12]

編集いたしました

[yambejp]

PHPの処理が基本ができてないのでこれはダメ
こんなデータを返してきています

{ "名前=ハンバーグ": " 分類=洋食", "名前=寿司": " 分類=和食", "名前=牛乳": " 分類=飲み物" }
まずはPHPの方をなんとかしてください