Advantages of using JSON files over JS modules to store data

2021-01-11 05:10 luek baja imported from Stackoverflow

We all know you can store data in JSON files, like this:

{
  data: "this is the data",
}

then make an AJAX request or use fetch to retrive it:

fetch("data.json").then(data => {
  data = data.json();  
  console.log(data);
});

But, you can use JavaScript modules to store data aswell:

export default {
  data: "this is the data",
};

then import it:

import data from "./data.js";

console.log(data);

Storing data in modules is more dynamic, as you can use variables, functions, and all other features of JS. Additionally, it seems easier handle the information with import rather than fetch or an AJAX request. There is also a dynamic import that can be used similar to fetch.

Possibly the greatest advantage of using modules is that you can leave comments.

Despite this, I never see people use JS modules for this purpose, but instead see people storing data in JSON files. Why is this, and what are the advantages of using JSON files to store information over JS modules?

See also questions close to this topic

How to load a script tag on a timer

The title is self explanatory, i would like to load the below script tag after 3 seconds has passed or on the window.load callback. This is because it takes too long to long this script even with async and defer.

I have tried document.write but it throws an error stating : Uncaught TypeError: Cannot read property 'insertBefore' of null

Any help would be appreciated! Thanks.

<script id="cid0020000272452409358" defer data-cfasync="false"  src="//st.chatango.com/js/gz/emb.js" style="width: 200px;height: 300px;">{"handle":"genoanime","arch":"js","styles":{"a":"333399","b":100,"c":"FFFFFF","d":"FFFFFF","k":"333399","l":"333399","m":"333399","n":"FFFFFF","p":"10","q":"333399","r":100,"pos":"br","cv":1,"cvfnt":"Verdana, Geneva, sans-serif, sans-serif","cvbg":"333399","cvw":150,"cvh":30,"ticker":1}}</script>

Why is nodeJs not reading entire binary file from disk?
I have a PDF file which I want to read into memory using NodeJS. Ideally I'd like to encode it using base64 for transferring it. But somehow the read function does not seem to read the full PDF file, which makes no sense to me.

The original file test.pdf has 90kB on disk. But if I read and write it back to disk there are just 82kB and the new PDF test-out.pdf is not ok. The pdf viewer says:

Unable to open document. The pdf document is damaged.

The base64 encoding therefore also does not work correctly. I tested it using this webservice. Does someone know why and what is happening here? And how to resolve it.

I found this post already.
```
fs = require('fs');
let buf = fs.readFileSync('test.pdf'); // returns raw buffer binary data
// buf = fs.readFileSync('test.pdf', {encoding:'base64'}); // for the base64 encoded data
// ...transfer the base64 data...
fs.writeFileSync('test-out.pdf', buf); // should be pdf again
```

Mark coordinates of 3 different jsons in Mapbox

I am collecting address information from a database, so I am putting them into a Json and then taking out their coordinates and marking them, there are 3 types of addresses (institutions, students, supervisors) so for each type of address I am using a different marker the problem arises that it only marks the geojson coordinates, but those of geojson2 and geojson3 do not. Any suggestion?

html:

<!DOCTYPE html>
<html>

<head>
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;

    }
 
     
  </style>

<script>
var json1=[];
var json2=[];
var json3=[];
</script>

  {% block content %}
  {% if instituciones %}
  {% for direccion in instituciones %}
  <script>
  json1.push(
      "{{direccion.ins_direccion}}, {{direccion.ins_comuna}}, {{direccion.ins_provicincia}}, chile"
      ,)
      console.log("instituciones");
      console.log(json1);
  </script>
  {% endfor %}
  {% endif %}

  {% if profesores %}
  {% for direccion in profesores %}
  <script>
  json2.push(
      "{{direccion.prs_direccion}}, {{direccion.prs_comuna}}, chile"
      ,)
      console.log("profesores");
      console.log(json2);
  </script>
  {% endfor %}
  {% endif %}

  {% if estudiantes %}
  {% for direccion in estudiantes %}
  <script>
  json3.push(
      "{{direccion.est_direccion}}, {{direccion.est_comuna}}, chile"
      ,)
      console.log("estudiantes");
      console.log(json3);
  </script>
  {% endfor %}
  {% endif %}
  {% endblock %}


</head>

<body style="word-wrap:break-word;">
  <div id='map'></div>
  <script src='https://unpkg.com/mapbox@1.0.0-beta9/dist/mapbox-sdk.min.js'></script>

  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg';
    console.log(mapboxgl.accessToken);
    var client = new MapboxClient(mapboxgl.accessToken);
    console.log(client);
   //
   var geojson = {
        'type': 'FeatureCollection',
            'features': [
        ]
      };

    for(var i = 0; i < json1.length; i++) {
      var address= json1[i];
      console.log(address);

    var test = client.geocodeForward(JSON.stringify(address), function(err, data, res) {
      // data is the geocoding result as parsed JSON
      // res is the http response, including: status, headers and entity properties
      console.log(res);
      console.log(res.url);
      console.log(data);
      var coordinates = data.features[0].center;

      geojson.features.push({
            'type': 'Feature',
            'properties': {
            'message': JSON.stringify(address),
            'iconSize': [60, 60]
            },
            'geometry': {
            'type': 'Point',
            'coordinates': [coordinates[0], coordinates[1]]
            }
            },)
      console.log("JSON COORDENADAS 1")
      console.log(JSON.stringify(geojson.features))
      
      console.log(geojson.features.geometry)
      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: coordinates,
        zoom: 10
      });
     // var longt : coordinates[0].toString();

      // add markers to map
      geojson.features.forEach(function (marker) {
      // create a DOM element for the marker
      var el = document.createElement('div');
      el.className = 'marker';
      el.style.backgroundImage = 'url(https://farm9.staticflickr.com/8604/15769066303_3e4dcce464_n.jpg)'
      el.style.width = marker.properties.iconSize[0] + 'px';
      el.style.height = marker.properties.iconSize[1] + 'px';

      el.addEventListener('click', function () {
      window.alert(marker.properties.message);
      });

      // add marker to map
      new mapboxgl.Marker(el)
      .setLngLat(marker.geometry.coordinates)
      .addTo(map);
      });
    });
  }


  mapboxgl.accessToken = 'pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg';
  console.log(mapboxgl.accessToken);
  var client = new MapboxClient(mapboxgl.accessToken);
  console.log(client);
 //
 var geojson2 = {
      'type': 'FeatureCollection',
          'features': [
      ]
    };
  for(var i = 0; i < json2.length; i++) {
    var address= json2[i];
    console.log(address);

  var test = client.geocodeForward(JSON.stringify(address), function(err, data, res) {
    // data is the geocoding result as parsed JSON
    // res is the http response, including: status, headers and entity properties
    console.log(res);
    console.log(res.url);
    console.log(data);
    var coordinates = data.features[0].center;

    geojson2.features.push({
          'type': 'Feature',
          'properties': {
          'message': JSON.stringify(address),
          'iconSize': [60, 60]
          },
          'geometry': {
          'type': 'Point',
          'coordinates': [coordinates[0], coordinates[1]]
          }
          },)


    console.log("JSON2 COORDENADAS")
    console.log(JSON.stringify(geojson2.features))
    
    console.log(geojson2.features.geometry)
   // var longt : coordinates[0].toString();

    // add markers to map
    geojson2.features.forEach(function (marker) {
    // create a DOM element for the marker
    var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(https://farm9.staticflickr.com/8604/15769066303_3e4dcce464_n.jpg)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';

    el.addEventListener('click', function () {
    window.alert(marker.properties.message);
    });

    // add marker to map
    new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
    });
  });
}


console.log(mapboxgl.accessToken);
var client3 = new MapboxClient(mapboxgl.accessToken);
console.log(client);
//
var geojson3 = {
    'type': 'FeatureCollection',
        'features': [
    ]
  };
for(var i = 0; i < json3.length; i++) {
  var address= json3[i];
  console.log(address);

var test3 = client.geocodeForward(JSON.stringify(address), function(err, data, res) {
  // data is the geocoding result as parsed JSON
  // res is the http response, including: status, headers and entity properties
  console.log(res);
  console.log(res.url);
  console.log(data);
  var coordinates = data.features[0].center;

  geojson3.features.push({
        'type': 'Feature',
        'properties': {
        'message': JSON.stringify(address),
        'iconSize': [60, 60]
        },
        'geometry': {
        'type': 'Point',
        'coordinates': [coordinates[0], coordinates[1]]
        }
        },)
  console.log(JSON.stringify("JSON COORDENADAS"))      
  console.log(JSON.stringify(geojson3.features))
 
  console.log(geojson3.features.geometry)
 // var longt : coordinates[0].toString();

  // add markers to map
  geojson3.features.forEach(function (marker) {
  // create a DOM element for the marker
  var el3 = document.createElement('div');
  el3.className = 'marker';
  el3.style.backgroundImage = 'url(https://farm9.staticflickr.com/8604/15769066303_3e4dcce464_n.jpg)';
  el3.style.width = marker.properties.iconSize[0] + 'px';
  el3.style.height = marker.properties.iconSize[1] + 'px';

  el3.addEventListener('click', function () {
  window.alert(marker.properties.message);
  });

  // add marker to map
  new mapboxgl.Marker(el3)
  .setLngLat(marker.geometry.coordinates)
  .addTo(map);
  });
});
}
 </script>
</body>
</html>

json white space syntax error due to array construct or something else?
Got the "syntaxError: JSON parse; unexpected non-whitespace character after JSON data at line 1 column 611 of the JSON data" error. While there are a lot of questions and answers about this and I see what is happening in my code, my question is:

Does this error originate with the construction of the array code here:
```
echo json_encode(array('html' => $html_string, 'cid' => $cid));
```
The output is:
```
{"html":"
{$value-> Customer_FName}<\/div>
{$value-> Customer_LName}<\/div>
{$value-> Customer_FName}<\/div>
{$value-> Customer_LName}<\/div>
{$value-> Customer_FName}<\/div>
{$value-> Customer_LName}<\/div>","cid":["44","45","46"]} 
```
Unable to submit JSON request in PHPUnit on Slim Framework
How can I resolve HttpBadRequestException when using PHPUnit to send a JSON request? I have a PHPUnit test in Slim Framework 1.3.0 that is sending a JSON request. When I get the form data in the controller, an HttpBadRequestException is thrown with the message Malformed JSON input. I can send cURL JSON requests fine. When I have it implemented in PHPUnit, it fails to JSON decode and read from php://input.
```
    // PHPUnit test
    $request = $this->createJsonRequest('POST', '/hello',
            [
                'foo' => 'bar',
            ]
        )
    $response = $this->app->handle($request);
    ...
    // controller
    $formData = $this->getFormData();
    
```

Determine depth of object &/or JSON values using PowerShell Loop

I am using an api to gather a list of comments for particular tickets, the tickets have nested comments which are returned from the api like so:

{
  "comments": [
    {
      "text": "test 1",
      "comments": [
        {
          "text": "test 2",
          "comments": [
            {
                "text": "test 3",
                "comments":[]
            }
          ]
        }
      ]
    }
  ]
}

The number of child comments can be n for any parent comment. I'm ultimately trying to get the text value for each "comments" tag until the "comments" tag is null.

I thought about making a parent object then trying to append the property search until it returns null.

 $n = 1

$exists = $true

while ($exists){ 
           
    $string = ".comments"     
    $search = $string * $n
    $search = $search.Substring(1)

    $m = $i.$search

    $commentVal = $m.comments
    $textValue = $m.text

    $textValue

    if ($textValue -ne ''){
        $comments +=  $textValue
    }
    
    if ($commentVal){            
        $exists = $true
    }else{           
        $exists = $false
    }
    $n++    
}

This does work but only for one iteration. i.e. if $search = "comments.comments" $i.$search does not work, but $search = "comments"; $i.$search does work.

Updating objects of array in array with array of Object

I have a two javaScript Array

let x = [
    {
        id: 'Abc',
        children: [
            {
                id: 12,
                name: 'john'
            }, {
                id: 13,
                name: 'dow'
            }
        ]
    }, {
        id: 'xyz',
        children: [
            {
                id: 123,
                name: 'jack'
            }, {
                id: 134,
                name: 'abc'
            }
        ]
    }
]
let y = [
    {
        id: 12,
        name: 'mac'
    }, {
        id: 13,
        name: 'dow'
    }, {
        id: 123,
        name: 'Tom'
    }, {
        id: 134,
        name: 'abc'
    }
]

I want to update my x with y having updated array like this

[
    {
        id: 'Abc',
        children: [
            {
                id: 12,
                name: 'mac'
            }, {
                id: 13,
                name: 'dow'
            }
        ]
    }, {
        id: 'xyz',
        children: [
            {
                id: 123,
                name: 'Tom'
            }, {
                id: 134,
                name: 'abc'
            }
        ]
    }
]

I tried this solution like this

x.map((a, index)=>{
    a.children.map((b, i)=>{
        // console.log('update')
        y.find(o => o.id === b.id) || b;
    })
})

but I am having undefined. I searched many answer but didn't get any luck.

Typescript can not import with out extention

I am basically a noob at Typescript and webpack and while learning it I faced with a Major Issue.

The Import statement has to include .ts as the extention or else it throws an error. But if I add it VSCode Throws an error.

What is Happening ?Image of Problem

Pls. Help..........

index.ts

import { formData } from "./forms.ts";
import { cl } from "./t1.ts";   

const formElement = document.querySelector('form')!;

formElement.addEventListener('submit', (e)=>{
    e.preventDefault();
    const data = formData(formElement);
    console.log(data);
});

const butt = document.getElementById('clTest')!;
butt.addEventListener('click',(e)=>{
    cl();
});

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    module: {
        rules:[
            {
                test: /\.ts$/,
                use: 'ts-loader',
                include: [path.resolve(__dirname, 'src')]
            }
        ]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public')
    },
    devServer: {
        publicPath: "/",
        contentBase: "./public",
        hot: true
    }
}

tsconfig.js

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
    "target": "es6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "es2015",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    // "lib": [],                             /* Specify library files to be included in the compilation. */
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                     /* Enable project compilation */
    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
    // "removeComments": true,                /* Do not emit comments to output. */
    // "noEmit": true,                        /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
    // "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */

    /* Module Resolution Options */
    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */

    /* Source Map Options */
    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */

    /* Advanced Options */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

How to use ES6 in a custom Jest Node Environment?

So far I can use perfectly ES6 syntax in my tests files, but when I try to set up a custom jest-enviroment I'm unable to use that syntax there. And then unable to test anything.

My custom jest-node-enviroment looks like:


const Crawler = require('../../src/parser/crawler/Crawler.js');


const NodeEnvironment = require("jest-environment-node")
module.exports = class Environment extends NodeEnvironment {
  async setup() {

    await super.setup()

    if (!this.global.crawler) {
      this.global.crawler = Crawler;
      await super.setup()
    }
  }

  async teardown() {
    await super.teardown()
  }

  runScript(script) {
    return super.runScript(script)
  }
}

And then when I run the test:


pkg ▶ yarn test
yarn run v1.22.10
$ jest
Determining test suites to run...Setting Up Test ENV
 FAIL  test/crawler/crawler.test.js
  ● Test suite failed to run

    /the/path/to/the/pkg/src/parser/crawler/Crawler.js:1
    import puppeteer from 'puppeteer-core'
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | 
    > 2 | const Crawler = require('../../src/parser/crawler/Crawler.js');
        |                 ^
      3 | 
      4 | 
      5 | const NodeEnvironment = require("jest-environment-node")

      at Object.<anonymous> (test/config/environment.js:2:17)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.039 s
Ran all test suites.
Teardown Crawler

I'm using ES6 in all my code since I have set up a @babel-register at booting time. And I would like to keep it that way.

The jest.config.js looks like:

{
...
globalSetup: "./test/config/setup.js",
globalTeardown: "./test/config/teardown.js",
testEnvironment: "./test/config/environment",
transform: {
   "^.+\\.jsx?$": "babel-jest"
  }
}

I have dug in the docs from Babel, Jest , and a lot of "solutions to this" here and on the internet but everyone talks the same, nobody talks about how to use it in a custom environment.

Related questions

Advantages of using JSON files over JS modules to store data

See also questions close to this topic