How To Reference External JSON File In Javascript as Variable

Question

This is a search function where if you input either values (1001, 1002, 1003)

Json record will be posted as list

Currently the Json Data is stored under Variable "data".

I want to have the ability to reference an external JSON file in the same folder as variable

so I am assuming something along the lines of:

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

However I tried a ton of variations and none of them work for.

Ideally, I'd like a solution without 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>

External 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"} }
]}

Possible duplicate of [How to read JSON file with fetch() in javascript?](https://stackoverflow.com/questions/51859358/how-to-read-json-file-with-fetch-in-javascript) — Herohtar, Dec 26 '18 at 18:41

score 0 · Answer 1 · answered Dec 26 '18 at 18:20

0

Retrieve your file as you would any text and utilize JSON.parse()

answered Dec 26 '18 at 18:20

David B.

29
3

Just tried: var data = JSON.parse('jsonfilename.json'); Not working either. – Discover Dec 26 '18 at 18:33
@Discover You do that with the file content *after* you have loaded it, not with a file directly. – Herohtar Dec 26 '18 at 18:38
I'm not that good with Javascript, is it possible for you to provide the code snippet? – Discover Dec 26 '18 at 18:53
This will point you in the right direction. https://stackoverflow.com/questions/16991341/json-parse-file-path – David B. Dec 27 '18 at 14:31

score 0 · Answer 2 · answered Dec 26 '18 at 18:36

0

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

in that answer

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

"config" would be the variable where the json is stored

answered Dec 26 '18 at 18:36

Valentin Garcia

485
6
17

ecstatic · Accepted Answer · 2018-12-26T22:31:14.203

0

here's a working example:

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>

edited Dec 26 '18 at 22:31

answered Dec 26 '18 at 18:40

ecstatic

114
1
9

Just added the external data.json to the question above for reference. And I've replaced var data with you snippet and its not working for me. I validated the JSON here - https://jsonlint.com/. To make sure its correct. – Discover Dec 26 '18 at 18:57
@Discover what you want to do? – ecstatic Dec 26 '18 at 19:02
@elastic I want load external JSON file as variable for the search function – Discover Dec 26 '18 at 19:05
@elastic Thanks so much for this! However, I noticed that the fake url is an XML file. I tried it several JSON files both locally and with an external link and it still does not work for me. This is the JSON file URL - https://api.myjson.com/bins/6oj58 – Discover Dec 26 '18 at 21:20
@Discover, though fake url returns response in json, I have updated code with your json url and selectors and it is working fine. – ecstatic Dec 26 '18 at 22:33

How To Reference External JSON File In Javascript as Variable

3 Answers3