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? — Herohtar
– Herohtar, Commented Dec 26, 2018 at 18:41

ecstatic · Accepted Answer · 2018-12-26 22:31:14Z

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, 2018 at 22:31

answered Dec 26, 2018 at 18:40

ecstatic

1142 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Discover Over a year ago

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 - jsonlint.com. To make sure its correct.

ecstatic Over a year ago

@Discover what you want to do?

Discover Over a year ago

@elastic I want load external JSON file as variable for the search function

Discover Over a year ago

@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 - api.myjson.com/bins/6oj58

ecstatic Over a year ago

@Discover, though fake url returns response in json, I have updated code with your json url and selectors and it is working fine.

David B. · Accepted Answer · 2018-12-26 18:20:58Z

0

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

answered Dec 26, 2018 at 18:20

David B.

293 bronze badges

4 Comments

Discover Over a year ago

Just tried: var data = JSON.parse('jsonfilename.json'); Not working either.

Herohtar Over a year ago

@Discover You do that with the file content after you have loaded it, not with a file directly.

Discover Over a year ago

I'm not that good with Javascript, is it possible for you to provide the code snippet?

David B. Over a year ago

This will point you in the right direction. stackoverflow.com/questions/16991341/json-parse-file-path

Valentin Garcia · Accepted Answer · 2018-12-26 18:36:19Z

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, 2018 at 18:36

Valentin Garcia

4957 silver badges17 bronze badges

Collectives™ on Stack Overflow

How To Reference External JSON File In Javascript as Variable

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related