(JavaScript) Ajaxでデータを取得し,戻り値を設定

プログラミング初心者です.
JavaScriptでRESAS APIのデータを利用したコンテンツの開発を行っています.
Ajaxでデータを受け取る関数を呼び出し,受け取ったデータの値に対応した適切な処理を行い,その結果を戻り値とするプログラムを作成したいです.

発生している問題・エラーメッセージ

関数newgradu_serch内でJSONデータを戻り値として受け取ったあとの確認用のconsoleが反応していないです.また,pref_pointに返り値としたpointの値が格納されていないです.

該当のソースコード

Javascript
1function newgradu_serch(citynumber,pref_CityCode,pref_CityName,selpara){ 
2  var pref_point = new Array();
3   for(k = 0; k < pref_CityCode.length; k++){
4       if(pref_CityCode[k]){
5       pref_point[k] = get_population(citynumber,pref_CityCode[k],selpara[0]);
6       
7       console.log("%s %s",pref_CityName[k],pref_point[k]); //確認用
8       }
9   }
10 }
11 
12 function get_population(citynumber,pref_CityCode,selpara) {
13   $.ajax({
14     url:
15       "https://opendata.resas-portal.go.jp/api/v1/population/composition/perYear?cityCode="+ pref_CityCode + "&prefCode=" + pref_Code[citynumber],
16     type: "GET",
17     dataType: "JSON",
18     headers: {
19       "X-API-KEY": "~~~~~~~~~~~~~~~~~~~~~" // ここにAPIキー文字列を記述
20     },
21     async: "false",
22     success: function(data) {
23       
24         result_sec = data.result.data[1].data[8].value;  //データの受け取り
25     },
26     complete: function(){   //受け取った値によって違う結果をreturn
27       if(result_sec < 500){
28           point = 1*selpara;
29           return point;
30       }else
31       if(result_sec < 1000){
32            point = 2*selpara;
33            return point;
34       }else
35       if(result_sec < 1500){
36           point = 3*selpara;
37           return point;
38       }else
39       if(result_sec < 2000){
40           point = 4*selpara;
41           return point;
42       }else
43       if(result_sec < 2500){
44           point = 5*selpara;
45           return point;
46       }
47     }
48   });
49 }
50
51

##受け取るデータ

"message": ~~~,
    "result": {
        "boundaryYear": ~~~,
        "data": [{
            "label": "~~~",
            "data": [{
                "year": ~~~~,
                "value": ~~~~
            }, {
                "year": ~~~~,
                "value": ~~~~
            }, {
                "year": ~~~~,
                "value": ~~~~
            }, {
                "year": ~~~~,
                "value": ~~~~~
 
以下同じような内容

基本的な動作として関数newgradu_serch内で関数get_populationを呼び出しデータを受け取り,受け取ったデータの値に対応した値を配列pref_poinに格納,という動作をしたいです.

分からないことばかりで効率の悪いプログラムや手法を用いているかもしれませんが,回答していただけるとうれしいです.

行動規範の内容に同意します

回答2件

get_population関数にreturn文がないのが原因です。
$.ajaxメソッドのコールバックから参照可能なスコープの変数を用意して、その変数を返せばいいかと思います。

なお、ご存知かと思いますが、以下のとおりですのでご注意ください。

同期 XHR は非推奨の状態になりました。開発者は API から除去することが推奨されています。

同期および非同期リクエスト - Web API | MDN

投稿2018/11/30 05:26

Lhankor_Mhy

総合スコア36102

とりあえず

async: "false",

 async: false,

ただしこれをベースにやるのはajaxとしてどうかと思います

また、get_populationは戻り値がないのでは？

javascript
1function x(){ 
2  $.ajax({}).done(function(){return 1;}).complete(function(){return 2;});
3  return 3;
4}
5console.log(x());

コールバックでreturnしてもユーザー関数は戻り値として認識しません
もしやるんらDeferredしてあげてください

javascript
1function x(){ 
2  var def= $.Deferred();
3  $.ajax({}).done(function(){def.resolve(100)});
4  return def.promise();
5}
6$.when(x()).done(function(data){console.log(data)});