How to include a external JSON data file

support
#1

Hello there,
I’m very new in using Atom, and therefore I have a very easy question…:wink:
I have a html file with a javascript (VUE) in that reads a json file which is “hardcoded” in the html file itself,
Like this …

<script type="text/javascript">
      var App = new Vue({
          el: '#app',
          data:
          {
              "records": [
                  {
                      "id": "A45",
                      "fields": ........

…
…
lots of records follow here
…
and ending with

This is working fine, so there is nothing wrong with the javascript as such, but of course, I don’t like the raw data json file to be “hardcoded” in my html file.
Instead I would like to reference it, so I can using the same html file, with only changing the name of the json file. So I’m looking for a syntax something like (assuming rawdata.json is the name of the json data file that contains all the records and resides in the same directory of the html file)

%include rawdata.json. ??
or maybe
#incorporate rawdata.json ??
or … ???

IS this possible en how do I reference it ?
Thanks, any help appreciated.

1 Like
#2

This probably is not what you are looking for, but here is the answer provided by my brain, such as it is.

Can you link to the json file like this?

    <script type="text/javascript" src="relative/path/from/url/to/rawdata.json"></script>

or

    <script type="text/javascript" src="complete/url/to/rawdata.json"></script>

If the rawdata.json file is in a domain different from the html file, you have to deal with Same Origin Policy or the link is blocked.

Here is a more complicated way that has its uses, provided you have server side scripting available:

For instance, in php, here is a file called “embed_json_in_html_file.php”

<!doctype html>
<html  lang="en">
<head>
	<?php
	 require __DIR__.'/rawdata.json';
	 ?>
</head>
<body>
	This html file has json data in the head section.
</body>
</html>

In the directory with the php file, there is a file called “rawdata.json”

Viewed through the browser, this page looks like this:

image
image754×227 14.7 KB

To see the json, view page source:
image

#3

Thank you for your reply…
I’m not using php or any server side scripting
Just a plain static html file, in fact a table, where the rows are filled, coming from the json file.

        <table id="myTable"  class="item-2">

        <tr v-for="(item,index) in records" :key='item.id' >
           <td v-bind:id='item.fields.stylenr'>   {{ item['fields']['nr']}}{{ item['fields']['suffix']}}</td>
           <td v-bind:id='item.fields.stylename'> {{ item['fields']['name'] }}</td>
           <td id="AH"> </td>

       </tr>

                 </table>
    </div>
1 Like
#4

Can you link to the json file like this?

    <script type="text/javascript" src="relative/path/from/url/to/rawdata.json"></script>

or

    <script type="text/javascript" src="complete/url/to/rawdata.json"></script>
#5

That (vv-for="(item,index) in records" :key=‘item.id’ ) is dynamic. If it is inside an html file, I am thinking it might belong inside a script tag, part of vue.

This question is not so much about ATOM as vue. Might have better luck at https://forum.vuejs.org/

#6

I don’t see how this question is Atom-related, but I somehow feel like joining the discussion:

  1. I’d say it’s most common to fetch the data on runtime, at least when the data is constantly changing
const response = await fetch(url, options);
console.log(response.json());
  1. When using a bundler such as Rollup or Webpack, you can import JSON on build-time
import * as data from './data.json';
  1. You can inline JSON on your website
<script id="data" type="application/json">
  {"hello": "world"}
</script>

const data = JSON.parse(document.getElementById('data').innerHTML);
1 Like
#7

Thank you everyone, … I realise by now, that my question is indeed not related to Atom at all, but more a pure JavaScript question… my apologies.
The only thing I can do within Atom is a shortcut/ keystroke to incorporate a snippet text (ie. the json file);

1 Like
#8

You wrote this in reply to @danallen idea …

In fact I sometimes use PHP within Atom to dynamically inject scripts.
There is a package php-server which runs in localhost.
PHP can be used to dynamically generate css, js, json, svg and other formats. You do need to hack the /etc/mime.types file and I have types such as …
pcss, pjs, pjson, psvg (the prefix just refers to PHP)

And Apache config file for PHP.

Finally when the PHP serves the content a header is required.

1 Like