div配置を指定をしたい

Question

ありがとうございます。ありがとうございます。ありがとうございます。ありがとうございます。

Comments

[hentaiman]

少しずつconsole.log挟んで値を確認していってみましょう

[Zuishin]

https://teratail.com/questions/291432

[Zuishin]

複数アカウント指摘されて退会。

Answer 1

前質問

過去記事と自分のjsonデータの文法が少し違うから、動かないのでは。。。？
とも思ったりしたのですが、関係ないでしょうか。

JSON文法の件は、前質問で解決したのではなかったのでしょうか。

• JavaScript - JSONデータの文法について｜teratail

無言でベストアンサーを選んでいますが、回答を読んで何をどう解釈して解決したのですか。
経験上、何も反応がない場合は、十分に理解せずに質問をクローズしているケースが大半ですが、本当に十分に理解しているのでしょうか。

JavaScriptの解説サイト

JavaScriptは立ち位置が特殊な言語で、

• 古いブラウザもサポートする必要がある
• 後方互換性を捨てられず、洗練されていない旧来の仕様を排除できない
• 複数ブラウザで動作するよう辻褄の合う仕様とする必要がある
• 公式仕様書は英語のみ(最新の日本語訳は2020/09/11現在、存在しない)

日本語の解説サイトはそこそこあるものの、全てにおいて完璧に正しいサイトはまず存在していません。

• [JavaScript] WebブラウザでJavaScriptコードを実行するタイミング.md · GitHub

ECMAScriptなどの英語の仕様書を読む努力を怠らなければ問題は有りませんが、解読に時間が掛かります。

JSON.parse()

とはいえ、MDNは8-9割方は正解なので、そこを基盤として、自分自身で検証を進めて誤りを補正して、コーディングを行う人が大半かと思います。

• JSON.parse() - JavaScript | MDN

例外
解析する文字列が有効な JSON でない場合、SyntaxError 例外が発生します。

const jsonStr = `{
  "title": "タイトル",
  "text": {
    "menu": "タイトル",
    "menu1": "タイトル",
    "menu2": {}
  },
  "text1": {
    "menu3": "タイトル",
    "menu4": "タイトル",
    "menu5": {}
  },
  "text2": {
    "menu6": "タイトル",
    "menu7": {
      "menu8": {
        "menu9": "タイトル",
        "menu10": 120
      }
    }
  }
}`;

JSON.parse(jsonStr);

SyntaxErrorが発生しないので、このJSON文字列は文法的に正しいといえます。

あなたに必要なのは、正しい情報のサイトではなく、正しさを担保する手段です。
そういう目線でMDNを確認すれば、自分自身で検証することが出来ます。

Re: sadonnatakku さん

Answer 2

ありがたく思うなら解決していけ。複数アカウントがバレにくいように質問を削除するな。

ARP - jwosnwデータの文法について｜teratail
JavaScript - JSONデータをシンプルにHTMLに直したい。｜teratail

間違っているのは JSON ではなくスクリプトの方です。
前回の質問で確認した通り、JSON は間違っていません。

しかしながら、スクリプトに手を付けることなく JSON を書き換えることによって何らかの表示をしたいのであれば、二番目の追記のようにしてください。

$.getJSON("data.json", function(data) {
    for (var i in data) {
        $("#wrap").append(`${i}`);
    }
//   for (var i in data) {
//     var div = '<h5>' +
//       data[i].title +
//       '</h5>' +
//       '<div class="box">' +
//       '<ul class="inner-list">';
//     for (var j in data[i].text) {
//       div += '<li>' +
//         data[i].menu[j].menu +
//         '</li>';
//     }
//     div += '</ul>' +
//       '</div>';
//     $("#wrap").append(div);
//   }
});

以上のように書き換えたところ、次のように表示されました。

titletexttext1text2

御覧のように i は JSON のトップレベルオブジェクトのプロパティを示しています。
しかしそれをどのように直せば意図通りになるかは、元々の意図がこのスクリプトでは不明なのでわかりません。

次にサンプルを上げますから、それを見て何がしたかったかを把握する材料にしてください。

$(document).ready(function() {
    $.getJSON("data.json", function(data) {
        const toUl = element => {
            const result = $("<ul>");
            for ([key, value] of Object.entries(element)) {
                switch (typeof(value)) {
                    case "object":
                        result.append(toUl(value));
                        break;
                    default:
                        result.append($("<li>").append(value));
                        break;
                }
            }
            return result;
        };
        
        for ([key, value] of Object.entries(data)) {
            switch (typeof(value)) {
                case "string":
                    $("#wrap").append("<h5>").append(value);
                    break;
                case "object":
                    $("#wrap").append(toUl(value));
                    break;
            }
        }
    });
});

追記 実行結果

追記

もし仮に、スクリプトには一切手を加えることなく、JSON の構造をどのように変えてもいいからなにがしか表示できるようにしたいということであれば、次のものを試してください。

[
  {
    "title":"タイトル1",
    "text":[0, 1],
    "menu":[
      {"menu":"メニュー0"},
      {"menu":"メニュー1"}
    ]
  },
  {
    "title":"タイトル2",
    "text":[0, 1, 2],
    "menu":[
      {"menu":"メニュー0"},
      {"menu":"メニュー1"},
      {"menu":"メニュー2"}
    ]
  }
]

Answer 3

根本的に理解が足りてないことは承知の上ですが、ご教示頂きたい

処理を分けて考えます。工程が決まれば、作業の原因がわかります。

1. Ajax の応答

$(document).ready(function() {
  $.getJSON("data.json", function(data) {
    // Ajax の結果が data に渡される。
  });
});

1. 応答されたデータ（1. で受け取った data ）の確認

console.log() を活用して、データを確認（アクセス方法の再確認など）

var data = { /* omited */ }; // 開発者コンソールで試す等のとき
                             // ハードコードしてループ処理に集中する
for (var key in data) {
  let val = data[key];
  console.log( key, val );
};
/*
=> 
 title タイトル
 text {menu: "タイトル", menu1: "タイトル", menu2: {…}}
 text1 {menu3: "タイトル", menu4: "タイトル", menu5: {…}}
 text2 {menu6: "タイトル", menu7: {…}}
*/

※ val が文字列か、object かで切り分ける必要があるとわかる。
ご質問のコードに if や条件（三項）演算が、見当たらないので、この作業ができていないと分かる。

1. データ変換の方針を検討

for (var key in data) {
  let val = data[key];
  if( "string" === typeof val ) {

  }
  else {
    // 再帰処理を使うこともできそう？
  }
};

※ その他、Object.entries() で、key, val を簡単に取り出す方法なども思いつく。

1. HTMLへの挿し込み（HTML文書の動的編集）

1. JSON->HTMLの場合

innerHTML プロパティに文字列処理して操作。
2. JSON->DOMの場合
document.createElement()、 document.appendChild() などで操作。

---

面倒でも 2), 3) の作業を行うことで、目標到達がスムーズになります。

自分で使えそうなところを改変した

初心のうちは、反復処理はスクラッチで起こすくらいのほうが上達します。
2), 3) の作業で、少なからず「インプット」＆「アウトプット」が発生するため。