-1

I have a JSON file as data.json and I have an HTML file with JavaScript embedded in it. I want to access data from the JSON file in a simple HTML(file:///C:/Users/XYZ/Desktop/htmlpage.html) file and NOT in a server-client manner(http://....). I have tried following simple code to import JSON file.

<!DOCTYPE html>
<html>
<body>

<p>Access an array value of a JSON object.</p>

<p id="demo"></p>

<script type="text/javascript" src="F:/Folder/data.json">

var myObj, x;

x = data[0].topic;
document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

I have read this method of using 

<script type="text/javascript" src="F:/Folder/data.json">

on other StackOverflow Questions. But it is not working.

Please tell me the simplest way to access the data in the JSON file.

Shubham B.
  • 59
  • 1
  • 11
  • 6
    A JSON is not a javascript script. It's just a structured way to describe data. You cannot load it as its a javascript script. – YounesM Mar 08 '17 at 18:01
  • Searching 'open local files javascript' gave [this](http://stackoverflow.com/questions/41765457/local-javascript-cannot-open-local-file) and [this](http://stackoverflow.com/questions/38756968/open-local-files-in-javascript). – Sangbok Lee Mar 08 '17 at 18:03
  • Possible duplicate of [How can I get javascript to read from a .json file?](http://stackoverflow.com/questions/6711002/how-can-i-get-javascript-to-read-from-a-json-file) – driconmax Mar 08 '17 at 18:04
  • 1
    What are you using this in? If its in a browser its not possible. Browsers have strict security in this area that will not allow you to ask the machines files. If its in an app of some sort there might be a solution but it will likely depend on what your using this in? – rayepps Mar 08 '17 at 18:04

2 Answers2

0

You could try writing something like this in your JSON file in order to assign the data to a variable:

window.data = JSON.parse('insert your json string here');

You can then access window.data in your page's javascript. You can also omit window. and just assign and/or read from data, which is the same as window.data.

Perhaps a cleaner approach would be to use an AJAX request either with jQuery or vanilla Javascript, both approaches have many answers available on this site.

You could also look into a solution with jQuery.getJSON(): Loading local JSON file

Community
  • 1
  • 1
antoineMoPa
  • 854
  • 10
  • 20
-2

If you are able to use PHP for your desired task (accessing data from JSON file and doing some stuff with data) it will be easier to use PHP to open JSON files. You can use following code to access JSON files.

<?php
    $str = file_get_contents('data.json');
    $json = json_decode($str, true);
 ?>

Here $json will be the outermost object (if file starts with '{') / array (if file starts with '['). Then you can use it in a regular way.

Maybe some of you can think that why I'm posting PHP solution in Javascript question? But I found this very much easier than opening file in Javascript. So if you are allowed to use PHP go with that.

Shubham B.
  • 59
  • 1
  • 11