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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

JavaScript

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

jQuery

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

Q&A

0回答

558閲覧

javascriptのundefinedにハマってしまっています

toshifum

総合スコア1

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2020/07/18 14:16

#index.html function plot_to_map(){ plot_marker=new L.GeoJSON.AJAX("http://127.0.0.1:8000/world/geojson/", { onEachFeature:function(feature,layer){ if(feature.properties){ var popupString="<div class='popup'><a href='javascript:show_facility_detail(" + feature.properties.pk + ")'>" + feature.properties.evacuation_site + "</a></div>"; layer.bindPopup(popupString); } } }); mymap.addLayer(plot_marker); } function show_facility_detail(id){ var facility_url="http://127.0.0.1:8000/world/" + id; console.log(id); $.getJSON(facility_url,function(data){ var detailrow=data.properties.evacuation_site }); }

urls

1 2from django.urls import path 3from world import views 4from django.conf.urls import include, url 5 6app_name='world' 7 8urlpatterns=[ 9 path('',views.index,name='index'), 10 path('world/geojson/api',views.GeojsonAPIView.as_view(),name='geojson_view'), 11 path('world/geojson/',views.index_serialized,name='geojson_view'), 12 path('world/geojson/<int:id>/',views.return_facility_detail,name='aaa'), 13 url(r'^world/(?P<pk>\d+)$', views.return_facility_detail, name='detail_facility'), 14]

views

1def return_facility_detail(request,pk): 2 evacuation=Evacuation.objects.get(id=pk) 3 serialized=EvacuationSerializer(evacuation,many=True) 4 content=JSONRenderer().render(serialized.data) 5 return HttpResponse(content)

以上がコードです。
index.htmlのjavascriptの所の
<a href='javascript:show_facility_detail(" + feature.properties.pk + ")'>"
この部分でshow_facility_detail関数を呼び出して、それぞれのpkをshow_facility_detail(id)に入れて使いたいです。
そしてpkごとに詳細画面を返せるようになったらなと思っています。

今の状態で実行すると、リンクをクリックしたときに、GEThttp://127.0.0.1:8000/world/undefined 404 (Not Found)
とエラーが出てしまいます。
うまくpkが渡せていないような気がします。

どなたか分かる方教えていただきたいです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

FrontEnd_Japan

2020/07/18 14:28

feature.properties.pk の値はコンソールログで確認した時に期待値は返却されていますか?
toshifum

2020/07/19 00:08

undefinedとなっており、返却されていないと思います。 feature.properties.pkの他にもいろいろ試したのですが、jsonの中身的にこれであってるかなと思っています。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問