質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    16439questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6713questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jqeryでurlを取得し URLにマッチした場合配列でJSONデータをhtmlに書き出す

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 182

Lustill

score 1

jqeryでurlをlocationで取得し
URLにマッチした場合配列でJSONデータをhtmlに書き出す

URL取得し表示非表示はできたのですが、
配列と組み合わせる方法がわかりません。

■URL取得
url取得⇒hogeの場合htmlの#Area表示

■jsonデータをhtmlに書き出し
urlがhogeの場合⇒jsonからarea1のjsonデータ取得⇒htmlの#Areaにレンダリング

わかりずらく申し訳ないですが、
組み合わせる方法をアドバイスいただけませんか。
よろしくお願いします。

<script>
//url取得
var url = location.pathname;
  $(document).ready(function(){
    if(document.URL.match(url)) {
        $('#Area').show();
    } else{
      $('#Area').hide();
    }
});
//url取得

//html書き出し
  $(function () { 
    $.ajax({
      dataType: "json",
      url: "data.json",
      success: function (data) {
        $("#Area1 div").remove();
        area = data.area;
        var areadiv = $("<div>").attr('class', 'row');
        for (i = 0; i < 3; i++) {
          areadiv.append('<div><p>' +
            "<img src=" + area[i].img + "/>" +
            area[i].name + "</p>" +
            "<p>" + area[i].tel + "</p>" +
            "<p>" + area[i].mail + "</p></div>");
        }
        areadiv.appendTo("#Area");
      }
    });
  });
//html書き出し
</script>

<div id="Area"></div>
<style>
    #Area {
      display: none;
    }

  </style>
{    
    "area1":[
        {
            "name": "hoge1",
            "tel": "03-2444-xxxx",
            "mail": "makoto@example.com",
            "img" : "https://"
        },
        {
            "name": "hoge2",
            "tel": "03-4444-xxxx",
            "mail": "tanaka@example.com",
            "img" : "https:/"
                },
        {
            "name": "hoge3",
            "tel": "03-2222-xxxx",
            "mail": "hanako@example.com",
            "img" : "https://"
        }

    ],
    "area2":[
        {
            "name": "hoge4",
            "tel": "03-2444-xxxx",
            "mail": "makoto@example.com",
            "img" : "http"
        },
        {
            "name": "hoge5",
            "tel": "03-4444-xxxx",
            "mail": "tanaka@example.com",
            "img" : "https://"
        },
        {
            "name": "hoge6",
            "tel": "03-2222-xxxx",
            "mail": "hanako@example.com",
            "img" : "https://"
        }
    ]


```

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/06/21 14:54

    ajaxを実装するときはできればfailも実装し、エラーを明示的に拾う仕組みにされた方が良いです。 http://karashidaimyojin.com/jquery/ajax-ajax/

    キャンセル

  • kei344

    2018/06/21 17:14

    「配列と組み合わせる」とどのデータのどの部分をどうやって出力するつもりかをもう少し具体的に提示いただけませんか?

    キャンセル

  • kei344

    2018/06/21 17:32

    data.areaを3件出力するコードを書かれていますが、data.area1とかdata.area.area1とかデータ構造にあわせて処理すればよいだけでは。

    キャンセル

回答 1

checkベストアンサー

+1

jqeryでurlをlocationで取得

細かいようですが、location.pathnameは標準オブジェクトのプロパティなのでjQueryは関係ないと思います。
タイトルを読んで「???」となりました。

ソースを読むと、やりたいことは理解できましたので、es7でサクッと書いてみます。
なるべくコメントは書いたので、解説は省きます。
少し気になったのですが、<div class="row">はループの外でよかったですかね?

実際に使う場合はes5に書き直すか、babelでes5に変換してください。

    $(async()=>
    {
        /** 初期処理で非表示 */
        $(`#Area`).hide();

        /** マッチしなかった場合の後処理を定義 */
        const exit = function(){
            $(`#Area`).hide().empty();
        };

        /** json取得 */
        const data = await $.ajax({dataType: `json`, url: `data.json`});

        if( !!data === false ) return exit();

        /** 第一階層のキー一覧取得 */
        const keys = Object.keys(data);

        /** パス取得 */
        const pathname = location.pathname;

        /** パスと一致するキーを探す */
        const findKey = keys.find( key => pathname.includes(key) );

        if( !!findKey === false ) return exit();

        /** @type {{name:string,tel:string,mail:string,img:string}[]}} */
        const targetData = data[ findKey ];

        if( !!targetData === false ) return exit();

        /** テンプレート定義 */
        const template = {
                $row: $(`<div class="row">`),
                $item: $(`<div>
                            <p class="img"><img></p>
                            <p class="tel"></p>
                            <p class="mail"></p>
                        </div>`)
            };

        /** 掃除はしておく */
        $(`#Area`).empty();

        const $row = template.$row.clone(true);
        /** 処理開始 */
        targetData.forEach( item =>
        {
            /** テンプレートから複製してインスタンス取得 */
            const $item = template.$item.clone(true);

            /** データ投入 */
            $(`.img img`, $item).attr(`src`, item.img);
            $(`.tel`, $item).text(item.tel);
            $(`.mail`, $item).text(item.mail);

            /** $rowにぶら下げていく */
            $row.append($item);
        } );
        /** DOMに挿入 */
        $(`#Area`).append($row);

        /** 表示 */
        $(`#Area`).show();
    });

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/06 12:26

    javascript初心者なのでjqeryと一緒になってしまいました。
    サクッと回答ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16439questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6713questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。