时间戳

首页 > 解决方案 > 如何在 Javascript 中引用外部 JSON 文件作为变量

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

问题描述

这是一个搜索功能，如果您输入任一值（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"} }
]}

标签： javascriptjsonvariablessearch

解决方案

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

在那个答案中

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

“config”将是存储 json 的变量

推荐阅读