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

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

ただいまの
回答率

90.76%

  • JavaScript

    15350questions

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

  • jQuery

    6342questions

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

  • JSON

    1067questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

  • SVG

    92questions

    SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

  • ASP.NET MVC Framework

    55questions

    ASP.NET MVC Frameworkは、MVCパターンをベースとした、マイクロソフトのウェブアプリケーション開発用のフレームワークです。

json形式のデータを取得しデータに合わせてsvgの色を編集したい

解決済

回答 1

投稿 編集

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

sanezane

score 42

実現性のサンプルを作成中です。
実現のイメージはあるのですが製造未経験のため引き出しが皆無です。
ご協力をお願いします。
OS:windows7
開発環境:visualstudio2017
言語:c#
フレームワーク:asp.net MVC Framework
DB:Postgresql

 やりたいことと実現イメージ

ajax処理。
データベースに定義されている各パーツフィールドのtrue:falseの情報を一定周期でjson形式で取得し値に応じて、対応するパーツの絵(svg)の色(fill)を動的に切替えたい。
今回は変更ボタンを押した際に変更する。

 データの形式

Test.json 

    {
      "judge1": true,
      "judge2": false,
      "judge3": true
    }

 現状(ロード時)

下図は上記のjsonファイルをhttpのGETで取得し、load時に*age(表示1)と*name(表示2)を取得し表示したものになります。*(1 jsonデータ修正したので対応してません。
※urlの部分を自分のローカルで実現したいが実現方法がわからない。

イメージ説明

 現状のコード(クライアント)

  $(function () {
            $('#btn1').click(
                function () {
                    $("out6").html("データ取得");



               //   $(window).load(function () {
               //$("#sample").html("テストを行います");

                    //1.$.ajaxメソッドで通信を行う
                    // dataでは、フォームの内容をserialize()している
                    // →serialize()の内容は、cs1=custom1&cs2=custom2
                    $.ajax({
                        url: 'http://www.json-generator.com/api/json/get/cggIIAmKnC?indent=2',
                        type: 'GET',
                        datatype: 'json',
                        //2. doneは通信に成功したときに実行される処理
                        //引数のdata1は通信で取得したデータ
                        //引数のtextstatusは通信結果のステータス
                        //引数のjqzXHRは、XMLHttpRequestオブジェクト
                    }).done(function (data1, textStatus, jqXHR) {
                        $("#out1").html(jqXHR.status);
                        $("#out2").html(textStatus);

                        //3. キーを指定して値を表示
                        console.log(data1);
                        $("#out4").html(data1["judge1"]);
                        //取得したageのvalueをrectのid='PA_1'へ設定する
                        //$(function () {
                        //   var age = $('#PA_1').val(data1[0]["age"]);
                        //    if (age.val > 41) {
                        //        console.log('赤')
                        //    } else {
                        //        console.log('緑')
                        //    }
                        //});




                        //4.オブジェクトをjson形式の文字列に変換
                        var data2 = JSON.stringify(data1);
                        console.log(data2);//コンソールへjson形式で表示

                        //5.json形式の文字列をオブジェクトにし、キーを指定して値を表示
                        //キーを指定して値(/www.json-generator.com/api/json/)を表示
                        var data3 = JSON.parse(data2);
                        $("#out5").html(data3["judge2"]);

                        //6. failは、通信に失敗したときに実行される
                    }).fail(function (jqXHR, textStatus, errorThrown) {
                        $("#out1").html(jqXHR.status); //jqXHR.statusを表示
                        $("#out2").html(textStatus);   //textStatusを表示
                        $("#out3").html(errorThrown);  //errorThrownを表示

                        //7. always は 成功、失敗に関わらず実行

                    }).always(function () {
                        $("#out6").html("complete"); //表示3

                    });

                });
        });

 現状(変更ボタン押下時)

 $(function () {

            document.getElementById("change").addEventListener("click", function () {

                    var poly = document.getElementById("myPoly"); // 多角形(ポリゴン)
                    poly.setAttribute("fill", "#00ff00"); // 緑色で塗りつぶす
                    poly.setAttribute("stroke", "blue");    // 青色の線にする
                }, true);

        });

 ★のsvg

<h6 id="sample">sample</h6>
<p>jqXHR.statusを表示:<span id="out1"></span></p>
<p>textStatusを表示:<span id="out2"></span></p>
<p>errorThrownを表示:<span id="out3"></span></p>
<p>表示1(out4):<span id="out4"></span></p>
<p>表示2(out5):<span id="out5"></span></p>
<p>表示3(out6):<span id="out6"></span></p>

<form>
                <input type="button" id="change" value="変更">
            </form>
            <svg>
                <polygon id="myPoly" fill="#FFF000" stroke="#FF0000" points="72.278,58.394 78.338,91.04 48.74,75.993 19.565,91.844 24.729,59.045 0.639,36.196 33.428,30.972 47.715,1 62.814,30.57 95.734,34.895 " />
            </svg>


svgのidとjsonで取得したkeyとvalueを結びつけるところ?で詰まっています。そもそもその前にやることがありますでしょうか。
ご教授をお願いいたします。

 サーバサイドのコードがさっぱり

[HttpGet]
        public ActionResult AjaxTest()
        {
            if (Request.IsAjaxRequest())
            {

                //ここに書く処理が整理できない
            }
            return Content("Ajax通信以外のアクセスはできません。");
        }




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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • SurferOnWww

    2018/05/29 11:54

    普通に ASP.NET MVC でのストーリーを想像すると、SQL Server 等の DB のテーブルに true / false の情報を含むフィールドがあって、それを Ajax で取得して表示するというようなことになるかと思うのですが、そのような感じで、ある程度具体的なストーリーを書けないでしょうか? そうしてもらえると、話が通じやすいと思いますので。

    キャンセル

  • sanezane

    2018/05/29 11:58

    ありがとうございます!そうですね!もう少し具体的になるよう修正します。

    キャンセル

  • SurferOnWww

    2018/05/29 14:06

    JSON 文字列を書き換えたようですが、配列にする意味があるのですか? なければ見直してください。あと、コードが最初の質問のままで、変更された JSON 文字列と全くつじつまが合わず、余計混乱を招きます。新しい JSON 文字列に合わせて書き直してください。

    キャンセル

回答 1

checkベストアンサー

+1

新しい JSON 文字列に合わせてコードを書き直してくださいとお願いしたのですが、無理なようですので、新しい JSON 文字列をベースにサンプルを書いておきます。

SVG の色を変更するところまでは書いてませんが、アクションメソッドを jQuery ajax で要求して、返ってきた JSON 文字列から judge1 ~ 3 の値を取得するところまでは書きましたので、あとはこれを拡張してください。 

(1) JSON 文字列を返すアクションメソッドは以下のようにします。

public ActionResult AjaxTest()
{
    if (Request.IsAjaxRequest())
    {
        // DB から取得するとのことだが、その DB が不明なので、とりあえず
        // Judge1, Judge2, Judge3 というプロパティを持つ匿名クラスを作る
        var data = new { Judge1 = true, Judge2 = false, Judge3 = true };

        return Json(data, JsonRequestBehavior.AllowGet);
    }

    return Content("AJAX を使った非同期呼び出ししかできません。");
}

(2) 上記のアクションメソッドを要求すると以下の JSON 文字列が返ってきます。

{"Judge1":true,"Judge2":false,"Judge3":true}

(3) ボタンクリックで取得するとのことなので、html は以下のようにしてみました。ボタンクリックで JavaScript の showJudgeResults メソッドが呼び出されます。

<input id="Button2" type="button" value="button" onclick="showJudgeResults()" /><br />
<div id="judgeResult"></div>

(4) JavaScript は以下のようにします。上記 (3) のボタンクリックで showJudgeResults メソッドが起動されると、jQuery ajax を利用して上記 (1) のアクションメソッドが呼び出されます。応答の JSON 文字列は JavaScript オブジェクトにパースされ、.done(function (data) ... の data に代入されます。それを $('#judgeResult').append( ... で上記 (3) の div 要素内に書き込みます。

function showJudgeResults() {
    $.ajax({
        type: 'GET',
        url: '/Customer/AjaxTest'
    })
    .done(function (data) {
        $('#judgeResult').empty();
        $('#judgeResult').append(
            '<p>' + data.Judge1 + ', ' + data.Judge2 + ', ' + data.Judge3 + '</p>');
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
        $('#judgeResult').text('textStatus: ' + textStatus +
          ', errorThrown: ' + errorThrown);
    })
}


(5) 上記 (4) の $('#judgeResult').append( ... で書き込んだ結果の div 要素は以下のようになります。

<div id="judgeResult">
    <p>true, false, true</p>
</div>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/29 18:49

    大変丁寧に回答いただきましてありがとうございます!!
    1つ質問させてください。urlの指定で出てきたCustomerの意味を教えて下さい!localで実行するときの指定化何かなのでしょうか。調べても出てこなかったのでお願いします。

    キャンセル

  • 2018/05/29 19:08

    説明不足だったようですみません。Customer はコントローラーの名前です。/Customer の / の意味にも注意してください。

    キャンセル

  • 2018/05/29 19:22

    いま動作確認行ってみたのですが、「 url: '/Ajax/AjaxTest'(url: '/コントローラ名/アクション名')」で実行したところボタンが出る前に【"Ajaxを使った非同期呼び出ししかできません。"】が出るのですが何が考えられますでしょうか。確認したのは、ご教授いただいたコントローラをデフォルトのreturn View()へ変更して試したところボタンは出現しました。

    キャンセル

  • 2018/05/29 19:32

    そんなことを言われてもあなたが書いたコードがどうなっているか分からない第三者には分かりません。たぶん、ボタンクリック以外にもアクションメソッドを Ajax を使わず呼び出す何かがあるのではないかということが想像できるぐらいです。前にそんなこと言ってませんでしたか? 聞く前に少し考えてみませんか?

    キャンセル

  • 2018/05/29 19:52

    なるほど!!ボタンを設置しているViewを呼ぶ際にAjaxTestアクションメソッドを呼んでしまっていました。
    MVCもよく理解していませんでしたので、大変ありがたいお時間をありがとうございました!!

    キャンセル

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

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

関連した質問

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

  • JavaScript

    15350questions

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

  • jQuery

    6342questions

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

  • JSON

    1067questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

  • SVG

    92questions

    SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

  • ASP.NET MVC Framework

    55questions

    ASP.NET MVC Frameworkは、MVCパターンをベースとした、マイクロソフトのウェブアプリケーション開発用のフレームワークです。