.jsonファイルを変数javacriptにロードする

Question

自分のコンピュータにランダムな.jsonファイルを読み込むことができるPHPプログラムを作成しました。表示するファイルを選択すると、選択した.jsonファイルからデータが取得されます。最初は、変数に置き換えられたデフォルトのファイルを使用しました。ここではPHPのコードは次のとおりです。これは私が下記のjavascriptの例の前に何をしたかである

$json_file = file_get_contents($_REQUEST["filename"]); 

$jfo = json_decode($json_file, true); 

：

<?php 

$uploaddir = 'uploads/'; 

$uploadfile = $uploaddir . basename($_FILES['file']['name']); 
$file_test = explode('.', $_FILES['file']['name']); 
$file_ext= strtolower(end($file_test)); 

$expensions = array(".json"); 

     if(in_array($file_ext,$expensions)=== false){ 
      $errors[]="extension not allowed, please choose a DBC or an XML file."; 
     } 

if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) { 
    echo "<div style='font-size: 150%;'>". "File is valid, and was successfully uploaded.\n"."</div>"; 

} else { 
    echo "<div style='font-size: 150%;'>". "Oops, It seems you haven't uploaded a file ! Please make sure you have selected a .json file\n "."</div> <br>"; 
    echo "<div style='font-size: 150%;'>". "Returning to Home...\n "."</div>"; 
    header("Refresh: 3,URL=upload_file.php"); 
    exit(); 
} 

echo basename($_FILES['file']['name']); 

?> 

<?php 

header("Refresh: 2,URL=json_content_extended.php?filename=".$uploadfile); 
exit(); 

?> 

別のファイルには、私が要求された値を宣言したコードが含まれています。上記の例をjavascriptに再作成してデフォルトの.jsonファイルをロードしたところ

私はファイル名を手動で入力しましたが、変更したいファイルをロードしたいと思います。

$(document).ready(function() { 
    $.getJSON("file.json", function(json) { 
     var tr; 
     for (var i = 0; i < json.messages.length; i++) { 
      var details = json.messages[i]; 
      for (var j = 0; j <= details.signals.length; j++) { 
       tr = $('<tr/>'); 
       tr.append("<td>" + details.signals[j].start_bit + "</td>"); 
       tr.append("<td>" + details.signals[j].comment + "</td>"); 
       tr.append("<td>" + details.signals[j].bit_length + "</td>"); 
       tr.append("<td>" + details.signals[j].factor + "</td>"); 
       tr.append("<td>" + details.signals[j].offset + "</td>"); 
       tr.append("<td>" + details.signals[j].is_big_endian + "</td>"); 
       tr.append("<td>" + details.signals[j].is_signed + "</td>"); 
       tr.append("<td>" + details.signals[j].name + "</td>"); 
       $('#table_1').append(tr); 
      } 
     } 
    }); 
}); 

上記の例では、私のjavascriptファイルの一部です： はここに私のコードです。 これは私が得る出力されます：

Output

絵があなたにfile.jsonの内容を示しています。どういうわけか、ファイル名の代わりに変数を設定する可能性があるのだろうかと思います。私はPHPの例と同じことをしたいと思いますが、今回はJavaScriptで行います。

Answer 1

はい、それは可能である：

$(document).ready(function() { 
    var filename = 'file.json'; 
    $.getJSON(filename, function(json) { 
     var tr; 
     for (var i = 0; i < json.messages.length; i++) { 
      var details = json.messages[i]; 
      for (var j = 0; j <= details.signals.length; j++) { 
       tr = $('<tr/>'); 
       tr.append("<td>" + details.signals[j].start_bit + "</td>"); 
       tr.append("<td>" + details.signals[j].comment + "</td>"); 
       tr.append("<td>" + details.signals[j].bit_length + "</td>"); 
       tr.append("<td>" + details.signals[j].factor + "</td>"); 
       tr.append("<td>" + details.signals[j].offset + "</td>"); 
       tr.append("<td>" + details.signals[j].is_big_endian + "</td>"); 
       tr.append("<td>" + details.signals[j].is_signed + "</td>"); 
       tr.append("<td>" + details.signals[j].name + "</td>"); 
       $('#table_1').append(tr); 
      } 
     } 
    }); 
}); 

ユーザーがファイル名を入力します：

$(document).ready(function() { 
    var filename = prompt("The file name of the JSON file to load:") 
    $.getJSON(filename, function(json) { 
     var tr; 
     for (var i = 0; i < json.messages.length; i++) { 
      var details = json.messages[i]; 
      for (var j = 0; j <= details.signals.length; j++) { 
       tr = $('<tr/>'); 
       tr.append("<td>" + details.signals[j].start_bit + "</td>"); 
       tr.append("<td>" + details.signals[j].comment + "</td>"); 
       tr.append("<td>" + details.signals[j].bit_length + "</td>"); 
       tr.append("<td>" + details.signals[j].factor + "</td>"); 
       tr.append("<td>" + details.signals[j].offset + "</td>"); 
       tr.append("<td>" + details.signals[j].is_big_endian + "</td>"); 
       tr.append("<td>" + details.signals[j].is_signed + "</td>"); 
       tr.append("<td>" + details.signals[j].name + "</td>"); 
       $('#table_1').append(tr); 
      } 
     } 
    }); 
}); 

Answer 2

var filename= 'file.json'; 

$.getJSON(filename, function(json) {}); 

Answer 3

はい。

const filename = prompt("The file name of the JSON file to load:") 
$(document).ready(function() { 
$.getJSON("file.json", function(json) { 

優れたユーザー・インターフェースは、テキスト入力と関連し、ボタンのクリックに代わりの$(document).readyにあなたの無名関数を結合してHTMLフォームを持っているだろう：あなたはへの最初の3行を変更することができます。フォームには、サーバーにリクエストを送信するためのフォームは表示されません。 $.getJSONはサーバーからJSONファイルをダウンロードします。

Answer 4

ファイル名に変数を作成するにはJavaScriptで、あなたの好みの言語でその変数をロードし、それを使用してください：

$(document).ready(function() { 
    var myFile = 'mydynamicfile.json'; 
    $.getJSON(myFile, function(json) { 
     var tr; 
     for (var i = 0; i < json.messages.length; i++) { 
      var details = json.messages[i]; 
      for (var j = 0; j <= details.signals.length; j++) { 
       tr = $('<tr/>'); 
       tr.append("<td>" + details.signals[j].start_bit + "</td>"); 
       tr.append("<td>" + details.signals[j].comment + "</td>"); 
       tr.append("<td>" + details.signals[j].bit_length + "</td>"); 
       tr.append("<td>" + details.signals[j].factor + "</td>"); 
       tr.append("<td>" + details.signals[j].offset + "</td>"); 
       tr.append("<td>" + details.signals[j].is_big_endian + "</td>"); 
       tr.append("<td>" + details.signals[j].is_signed + "</td>"); 
       tr.append("<td>" + details.signals[j].name + "</td>"); 
       $('#table_1').append(tr); 
      } 
     } 
    }); 
});