parseしたデータからキーと値を抜き出したい

Question

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

$fp=fopen("test.txt","r");
while(($data=fgetcsv($fp,1024))!==false){
  $tmp=&$datas[];
  foreach($data as $x){
    $y=explode("=",$x);
    $tmp[trim($y[0])]=trim($y[1]);
  }
}
unset($tmp);
fclose($fp);
print json_encode($datas,JSON_UNESCAPED_UNICODE);

  $(function(){
     $("#button").click(function(event){
       $.ajax({
         type: "GET",
         url: "test.php",
         data: {val:null},
         dataType : "text"
       }).done(function(data){
           var test = JSON.parse(data);
           for (var key in data){
         $("#parse").append('キー:'+key + ':値:' + data[key]+ "<br/>");
        }
       }).fail(function(XMLHttpRequest, textStatus, errorThrown){
         alert(errorThrown);
       });
     });
   });

parseしたデータから　
キー：名前　値：ハンバーグ
キー：分類　値：洋食
キー：主成分　値：カルシウム
といったようにしたいのですが。膨大なキーと値が表示されます。どのようにすればよいですか？

php単体で実行、parse前に表示を行うと
[{"名前":"ハンバーグ","分類":"洋食","主成分":"タンパク質"},{"名前":"寿司","分類":"和食","主成分":"炭水化物"},{"名前":"牛乳","分類":"飲み物","主成分":"カルシウム"}]
こうなりました

Comments

[m.ts10806]

php単体実行したときはどうなるのでしょうか。
またJavaScript側でdoneで受け取っている変数dataをparse前にコンソール出力すると何が出ますか？

[m.ts10806]

そのデータは必ずその状態ですか？表のヘッダーをつけるということにはならないのでしょうか。そのほうが分かりやすく早い気がします

Answer 1

まだ終わってなかったのですね・・・

$(function(){
  $("#button").click(function(event){
    $.ajax({
    type: "GET",
    url: "test.php",
    data: {val:null},
    dataType : "json"
    }).done(function(data){
      data.forEach(function(x){
        Object.entries(x).forEach(y=>{
          $("#parse").append('キー:'+y[0]+':値:' +y[1]+"<br/>");
        });
      });
    }).fail(function(XMLHttpRequest, textStatus, errorThrown){
      alert(errorThrown);
    });
  });
});

• test.phpはjsonを返してくれる仕組みなのですからdataTypeはjsonにします
• 戻り値dataは配列ですからまず普通にfor（もしくはforEach）で回します
• オブジェクトから組み合わせを抜き出すのでObject.entriesを利用します

textから直接

$(function(){
  $("#button").click(function(event){
    $.ajax({
    type: "GET",
    url: "test.txt",
    data: {val:null},
    dataType : "text"
    }).done(function(data){
      var datas=[];
      for(var i of data.split("\n")){
        for(var j of i.split(",")){
          var k=j.split("=").map(x=>x.trim());
          $('#parse').append('キー:'+k[0] + ':値:' + k[1]+ "<br/>");
        }
      }
    }).fail(function(XMLHttpRequest, textStatus, errorThrown){
      alert(errorThrown);
    });
  });
});

Comments

[nikuniku12]

ありがとうございます。もう一つお聞きしたいのですが、
}).done(function(data){
$("#test").text(data);
と追加しencodeした値をjsで表示させようとするとobjectとしか表示されなくなってしまったのですが、どうすれば表示させられるかわからないでしょうか？

[yambejp]

dataがjson型でとったなら
$('#text').text(JSON.stringify(data));
としてください

[nikuniku12]

ありがとうございます。