jqueryを使用して外部jsonファイルを読み取る相対パスメソッド

タイトルに表示されるようにjqueryで相対パスメソッドを使用してjsonファイルを読み込みたいとします。まず第一に、私はこの仕事の初心者であり、私が試したばかげたことかもしれません。jqueryを使用して外部jsonファイルを読み取る相対パスメソッド

私は外部のjsonファイルを持っていますが、私はこのファイルを自分のスクリプトに入れたいです。 jsonファイルは外部からのものでなければならず、開発後にsomereasonによって変更される可能性があり、プロセスによって規則的に変更されます。

ここはmy jsonファイルです。

{ 
    "revisiondate": "21 April 2016", 
    "documentname": "1658MC", 
    "department": "Sales", 
    "description": "Available", 
    "link": "href=1658MC.pdf" 
}, { 
    "revisiondate": "16 April 2016", 
    "documentname": "VCX16B", 
    "department": "Enginnering", 
    "description": "Not Available", 
    "link": "href=VCX16B.pdf" 
}, { 
    "revisiondate": "15 March 2016", 
    "documentname": "AB36F", 
    "department": "Custumer Services", 
    "description": "Not Available", 
    "link": "href=AB36F.pdf" 
}, { 
    "revisiondate": "12 Agust 2016", 
    "documentname": "FC25D", 
    "department": "Technical Support", 
    "description": "Not Available", 
    "link": "href=FC25D.pdf" 
}

そして、私はjQueryを使って、このローカルファイルを読み取ることができますどのように私のスクリプト

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    </head> 
    <body> 
     <table id="userdata" border="0.02"> 
       <th>Revision Date</th> 
       <th>Document Name</th> 
       <th>Department </th> 
       <th>Description</th> 
       <th>Link</th>    
     </table> 
    <script>  
    $.ready(function() {  
    myObjects = {}; 
     $.getJSON('deneme16.json', function(data) { 
     myObjects.myJson = data; 
      }); 
    $.each(data.person, function(i, person) { 
       var tblRow = "<tr><td>" + person.revisiondate + 
           "</td><td>" + person.documentname + 
           "</td><td>" + person.department + 
           "</td><td>" + person.description + 
           "</td><td><a target='_blank' href='" 
+ person.link.split('href=')[1] 
+"' >"+person.link.split('href=')[1] 
+"</a></td></tr>" 

       $(tblRow).appendTo("#userdata tbody"); 
      });  

     }); 
    </script> 
    </body> 
    </html>

でこのファイルを読むために、私のローカルファイルに保存され、このJSONファイル

C:.......\Desktop\Deneme16\Deneme161.json

？私はたくさんのタイトルを読んだが、ajax.requestについて話すいくつかのタイトルはparse.jqueryとsomeones talknigについて話している誰かが、セキュリティポーティックのために可能ではない。私はたくさんのことを試みましたが、ついにはそのコードを書くことに決めました。私は本当に混乱しており、私はこの問題を解決したい。誰かがこのコードをopareteに問題がどこにexplaşnすることができます

出典

2017-03-28 MCoskun60

ていますgetJSON、console.log（data）を使用してデータを取得しますか？ –

Surucundeki dosyalara javascript ile erisemezsin。ブラウザは、ブラウザで表示されます。 JSON.parse（jsonString）は、サーバー上のAjaxサーバーの保護を設定します。

出典

2017-03-28 13:18:14

Eyvallah。 Bulamadımhiçöörnekfelan。 Denicem yinebişeyler。 Saigol tavsiyeniçin。 – MCoskun60

$.ready(function() {  
    myObjects = {}; 

    $.getJSON('deneme16.json', function(data) { 

     myObjects.myJson = data; 

     //you cant acces data outside the getJSON function 
     $.each(data, function(i, person) { 
      var tblRow = "<tr><td>" + person.revisiondate + 
      "</td><td>" + person.documentname + 
      "</td><td>" + person.department + 
      "</td><td>" + person.description + 
      "</td><td><a target='_blank' href='" 
      + person.link.split('href=')[1] 
      +"' >"+person.link.split('href=')[1] 
      +"</a></td></tr>" 

      $("#userdata tbody").append(tblRow); 
     });  
    }); 

});

出典

2017-03-28 13:39:42

まずあなたのJSONが間違っている、それは配列（それはあなたのケースだ。私はそれhere修正している）のいずれかでなければなりませんか、それが唯一の親オブジェクトを持つ必要があります。 4つの親オブジェクトがあります。

第2に、getJSONリクエストからJSON応答を間違って繰り返しています。コールバック関数内で行う必要があります。そうしないと、反復コードは、データの反復を待つことなく実行されます。

以下のスニペットを確認してください。私はちょうどコンソールに値を取り出した。上記のコードを使用して、テーブルにデータを追加することができます。

また、ローカルのJSONファイルは、要求が '十字架の起源' エラーがスローされた場合は、この1のようないくつかのWebストレージにあなたのJSONをホストしてみてください - http://myjson.com

$(document).ready(function(){ 
 
    myObjects = []; 
 
     $.getJSON('https://api.myjson.com/bins/1djve3', function(data) { 
 
     myObjects = Object.values(data); 
 
     console.log("Objects in array " + myObjects.length); 
 
     
 
     $.each(myObjects, function(i, person) { 
 
       
 
       
 
     var $row = $('<tr>'+ 
 
     '<td>'+person.revisiondate+'</td>'+ 
 
     '<td>'+person.documentname+'</td>'+ 
 
     '<td>'+person.department+'</td>'+ 
 
     '<td>'+person.description+'</td>'+ 
 
     '<td>'+person.link.split("=")[1]+'</td>'+ 
 
     '</tr>');  
 

 
$('table> tbody:last').append($row); 
 
       
 
      }); 
 
      }); 
 
     
 

 
     });

table, th, td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
    </head> 
 
    <body> 
 
     <table id="userdata" border="0.02"> 
 
       <th>Revision Date</th> 
 
       <th>Document Name</th> 
 
       <th>Department </th> 
 
       <th>Description</th> 
 
       <th>Link</th>    
 
     </table> 
 
    <script>  
 
    
 
    </script> 
 
    </body> 
 
    </html>

出典

2017-03-28 13:53:26 mp77

あなたの訂正していただきありがとうございます。URLにjsonをアップロードすると、effectivetly使用することができますが、私はフィドルと私のコンピュータ上でそのコードを回すことができませんでした。 fiddle.netとこのページのスニペットの違いは何ですか？ – MCoskun60

あなたは何を意味しますか？私はフィドルと私のコンピュータでそのコードを回しませんでしたか？ – mp77

あなたのコメントにあるように、それは動作しません。 – MCoskun60

jqueryを使用して外部jsonファイルを読み取る相対パスメソッド

答えて

関連する問題