

表題の通りjsonデータをmonacaに表示させたいと思います。

MANP環境ではphpでjson_encodeして上手くMySQLデータをhtmlに反映できたのですが、  
そっくりそのままMonacaで試したところjsonデータが引っ張ってこれてない状況に陥りました。  
(json_encodeするphpファイルはサーバーにアップ済みです。)

▼ソースコード▼

[code]

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
    $.ajax({
      type: 'GET',
      url: 'http://○○△△.jp/json.php',
      dataType: 'json',
      success: function(json){
        var len = json.length;
        for(var i=0; i < len; i++){
          $("#a").append(json[i].id + ' ' + json[i].○○ + ' ' + json[i].△△ + '<br>');
        }
      }
    });
    </script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    
[/code]

* * *

2015/12/23/18:26  
回答からコードを書き換えました。

[code]

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
            <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
            <script src="components/loader.js"></script>
            <script src="components/monaca-jquery/jquery.js"></script>
            <link rel="stylesheet" href="components/loader.css">
            <link rel="stylesheet" href="css/style.css">
            <script>
            $.ready('deviceready',function(){
                //Ajax通信
                $.ajax({
                    type: 'GET',
                    url: 'http://○○△△.jp/json.php',
                    dataType: 'json',
                    success: function(json){
                        var len = json.length;
                        for(var i=0; i < len; i++){
                                  $("#a").append(json[i].id + ' ' + json[i].○○ + '<br>');
                        }
                    }
                    //下記を追加してどう言ったエラーが発生しているのか確認する
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        //ステータスコード：エラーに来る際はたいてい200以外
                        //今回の場合は正常なJSON以外でも此方に来る
                        console.log("XMLHttpRequest : " + XMLHttpRequest.status);
                        //実際のレスポンス
                        //出力された文字列がJSON形式にのっとっているか見る
                        console.log("textStatus : " + textStatus);
                        //どうしてエラーが発生したのかのメッセージ
                        console.log("errorThrown : " + errorThrown.message);
                    }
                });
            },false);
        </script>
    </head>
    <body>
    <div id="a"></div>
    </body>
    
[/code]


CC BY-SA 3.0
2015-12-23T07:20:54.547
20309
2016-10-16T15:27:16.463
2015-12-23T13:26:34.977
76
13775
question
php monaca mysql json
jsonデータをmonacaに表示させたい


考えられる原因として１つめは  
WhiteListの関係で接続できないのかもしれないので`index.html`のmetaに下記が追加されているか確認してください。

[code]

    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    
[/code]

2つ目はコールバックに`success`しかないので`error`も追加してみて何が悪いか切り分けてみてはいかがでしょうか？  
オプションの`dataType`に`json`が指定されているので、PHPのWARNINGなどが出力されていてjson構造を認識できないとエラーが発生します。  
この場合上記の受け方ですと`success`に入らないので応答が全くないかと思います。  
`dataType`外して`success`に入るか試してみてはいかがでしょうか？  
(※その場合`JSON.parse`でもエンコードできませんが)

* * *

**追記：15/12/24**  
`index.html`の全文って下記のような感じなるかと思うのですが、  
`loader.js`より前に記述すると`monaca`の機能をロードする前に走っちゃうのでおかしくなるかと  
あと、jqueryはmonacaのプラグインからインポート出来たりします(好みによるかと思いますが……)  
jQueryを使わない方向でイベントをセットしてみました。こちらでどうでしょうか？  
もしかしたらjQueryのロードよりも先にセットしているのやも？

PHP側

[code]

    <?php
        $outputs = array(
                        array("id"=>"dammy1", "optA"=>"test1-A", "optB"=>"test1-B"),
                        array("id"=>"dammy2", "optA"=>"test2-A", "optB"=>"test2-B"),
                        array("id"=>"dammy3", "optA"=>"test3-A", "optB"=>"test3-B"),
                        array("id"=>"dammy4", "optA"=>"test4-A", "optB"=>"test4-B"),
                        array("id"=>"dammy5", "optA"=>"test5-A", "optB"=>"test5-B"),
                        array("id"=>"dammy6", "optA"=>"test6-A", "optB"=>"test6-B"),
                        array("id"=>"dammy7", "optA"=>"test7-A", "optB"=>"test7-B"),
                        array("id"=>"dammy8", "optA"=>"test8-A", "optB"=>"test8-B"),
                        array("id"=>"dammy9", "optA"=>"test9-A", "optB"=>"test9-B"),
                        array("id"=>"dammy10", "optA"=>"test10-A", "optB"=>"test10-B")
                    );
        echo json_encode($outputs);
    ?>
    
[/code]

Monaca側

[code]

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
            <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
            <script src="components/loader.js"></script>
            <link rel="stylesheet" href="components/loader.css">
            <link rel="stylesheet" href="css/style.css">
            <script>
                document.addEventListener('deviceready',function(){
                    $("#a").append('on device ready.<br>');
                    //Ajax通信
                    $.ajax({
                        type: 'GET',
                        url: 'http://host_name/json.php',
                        dataType: 'json',
                        success: function(json){
                            var len = json.length;
                            for(var i=0; i < len; i++){
                                $("#a").append(JSON.stringify(json[i]) + '<br>');
                            }
                        },
                        //下記を追加してどう言ったエラーが発生しているのか確認する
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            //ステータスコード：エラーに来る際はたいてい200以外
                            //今回の場合は正常なJSON以外でも此方に来る
                            $("#a").append("XMLHttpRequest : " + XMLHttpRequest.status);
                            //実際のレスポンス
                            //出力された文字列がJSON形式にのっとっているか見る
                            $("#a").append("textStatus : " + textStatus);
                            //どうしてエラーが発生したのかのメッセージ
                            $("#a").append("errorThrown : " + errorThrown.message);
                        }
                    });
                },false);
            </script>
        </head>
        <body>
        <div id="a"></div>
        </body>
    </html>
    
[/code]

[![でも画像](https://i.stack.imgur.com/qB5ql.jpg)](https://i.stack.imgur.com/qB5ql.jpg)


CC BY-SA 3.0
2015-12-23T07:54:10.027
20310
2015-12-24T01:00:22.587
2015-12-24T01:00:22.587
20309
answer