Как ссылаться на внешний файл JSON в Javascript как переменную - PullRequest
0 голосов
/ 26 декабря 2018

Это функция поиска, в которой, если вы введете любое из значений (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"} }
]}

Ответы [ 3 ]

0 голосов
/ 26 декабря 2018

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

в этом ответе

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

"config" будет переменной, в которой хранится json

0 голосов
/ 26 декабря 2018

вот рабочий пример:

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>
0 голосов
/ 26 декабря 2018

Получите ваш файл, как любой другой текст, и используйте JSON.parse ()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...