jsonデータのhtml出力について

Question

jQueryでjsonのデータをHTMLに出力ができない

jsonからスタッフのデータを取得してループで回して表示をしたいのですが、A店だけもしくはA店、B店両方の表示がされません。指定の方法が間違っているのかうまくいきませんでした。（下記コードはA店のみ表示を想定）
ご指導のほど宜しくお願い致します。

{
  "A店":[
    {
      "position":"部長",
      "name":"山田太郎",
      "img_url":"../img/shop/thm_takahashi_yoki.jpg"
    },
    {
      "position":"店長",
      "name":"山田次郎",
      "img_url":"../img/shop/thm_sasanuma.jpg"
    },
    {
      "position":"店長代理",
      "name":"山田三郎",
      "img_url":"../img/shop/thm_fujita.jpg"
    },
  "B店":[
    {
      "position":"部長",
      "name":"小川太郎",
      "img_url":"../img/shop/thm_takahashi_yoki.jpg"
    },
    {
      "position":"課長",
      "name":"小川次郎",
      "img_url":"../img/shop/thm_sasanuma.jpg"
    }
  }

<div id="staff">
  <ul>
    <!-- ここにデータ表示 -->
  <ul>
</div>

<script>
  $(function(){
    $.getJSON('./js/staff.json', function(staff_list){
      for(var i in staff_list){
       var h = '<li>' + '<p>' + staff_list[i][A店].name + '</p>' + '<p>' + 'staff_list[i][A店].position' + '</p>' + '</li>';
       $('#staff').append(h);
      }
    });
  });

Answer 1

{
 [
    "A店":[

そもそも、データがJSONとして成立していません。

Comments

[rinrin1137]

jsonファイルを編集しなおしたましたので宜しくお願い致します。

Answer 2

A店という変数をプロパティ添え字に当てる構文になってしまってます。
ブラケット記法を使うこの場合（JSONとか）文字列を当てます。
（また、変数使うのに、文字列になってしまってる箇所があったので、修正）

var h = '<li>' + '<p>' + staff_list[i]["A店"].name + '</p>' + '<p>' + staff_list[i]["A店"].position + '</p>' + '</li>';

Comments

[rinrin1137]

ご回答ありがとうございます。
上記のコードで試しましたが、表示されませんでした。
既存サイト自体の文字コードがEUC-JPを使用しているようなのですが、
jsonはUTF-8出なければならない？と記憶していたのですが、何か表示させる手段はありそうでしょうか？

[miyabi_pudding]

console.logなどで、
取得したJSONデータを確認してください。
また、エラーが出ていたら、
そのエラー文を質問に記載してください。

ブラウザの表示側だけ見てたら一生解決できません。

[miyabi_pudding]

あくまで構文にまだ不備があるだけです。
ただ、実際に取得できてるJSONの構造がわからないと、これ以上回答しようがありません。

とにかく、コンソールで様々変数の中身などを確認するようにして下さい。