Question

这是一个搜索功能，如果您输入两个值（1001、1002、1003）

Json记录将作为列表发布

当前，Json数据存储在变量“数据”下。

我希望能够引用与变量位于同一文件夹中的外部JSON文件

所以我假设一些类似的事情：

var data = loadJson('jsonfilename.json');

但是我尝试了很多变体，但都没有用。

理想情况下，我想要一个没有Jquery的解决方案

<!DOCTYPE html>
<html>
 <head>
  <title>Webslesson Tutorial | Search HTML Table Data by using JQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 </head>
 <body>
	 <input id="searchBox" type="text" />
<button id="button">
Search
</button>
<div>
<ul>
</ul>
</div> 
	 <script>
		 
	 var data = [

		 
{ "type": "Feature", "properties": {
  "RANK_BY_CD": "26",
  "CDUID": "1001"} },
		 
{ "type": "Feature", "properties": {
  "RANK_BY_CD": "212",
  "CDUID": "1002"} },
		 
{ "type": "Feature", "properties": {
	"RANK_BY_CD": "248",
	"CDUID": "1003"} }
];

$(document).ready(function(){
  $("#button").click(function (any_function_variable_name) {
    
      var searchId = String($('#searchBox').val());
 
      
      data.forEach(function (any_function_variable_name) {
        
        if(any_function_variable_name.properties.CDUID == searchId){
          
          $("ul")
          .append('<li> <strong>CDUID: </strong>' + any_function_variable_name.properties.CDUID)
		  .append('<li> <strong>RANK_BY_CD: </strong>' + any_function_variable_name.properties.RANK_BY_CD);
           
        }
      });
  });
}); 
	 </script>
 </body>
</html>

外部JSON-data.json

{
"type": "FeatureCollection",
"features": [	 
{ "type": "Feature", "properties": {
  "RANK_BY_CD": "26",
  "CDUID": "1001"} },
		 
{ "type": "Feature", "properties": {
  "RANK_BY_CD": "212",
  "CDUID": "1002"} },
		 
{ "type": "Feature", "properties": {
	"RANK_BY_CD": "248",
	"CDUID": "1003"} }
]}

Answer 1

像处理任何文本一样检索文件，并使用JSON.parse（）

Answer 2

https://stackoverflow.com/a/39855320/8061731

在那个答案

import config from '../config.json';

“ config”将是存储json的变量

Answer 3

这是一个工作示例：

var data = [];

        $(document).ready(function () {
        $("#button").click(function (any_function_variable_name) {
            var searchId = String($('#searchBox').val());
            data.features.forEach(function (any_function_variable_name) {
                if (any_function_variable_name.properties.CDUID == searchId) {
                    $("ul")
                     .append('<li> <strong>CDUID: </strong>' + any_function_variable_name.properties.CDUID)
                     .append('<li> <strong>RANK_BY_CD: </strong>' + any_function_variable_name.properties.RANK_BY_CD);
                }
            });
        });
    });

        function getdata() {
            var xmlhttp = new XMLHttpRequest();
            var url = "https://api.myjson.com/bins/6oj58";
            //var data = [];
            xmlhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    data = JSON.parse(this.responseText);
                }
            };
            xmlhttp.open("GET", url, true);
            xmlhttp.send();
        }

        getdata();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="searchBox" type="text" />
    <button id="button">
        Search
    </button>
    <div>
        <ul></ul>
    </div>

如何在Javascript中将外部JSON文件作为变量引用

3 个答案: