0

My setup: VS Code+ WSL2. Files are all in the same folder (js-ayml.js, the YAML file and the index.html). I run the javascript code by refreshing a page that refers to it. I use the GoLive VS code extension as server

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Test js-yaml</title>
    <script src="//code.jquery.com/jquery-2.1.0.js">
    </script><script src='js-yaml.js'>
    </script><script src='readYaml.js'>
   
</head>
<body>
<h1>Test js-yaml</h1>
<p><a href="https://github.com/nodeca/js-yaml">https://github.com/nodeca/js-yaml</a></p>
</body>
</html>

readYaml.js

(function () {
"use strict";
    $(document).ready(function () {
        $.get('/common/resources/LessonContentsLv01Ln01.yml')
        .done(function (data) {
          console.log('File load complete');
          console.log(jsyaml.load(data));
          var jsonString = JSON.stringify(data);
          console.log(jsonString);
          console.log($.parseJSON(jsonString));
      });
    });
}());

I have posted this https://stackoverflow.com/questions/70916217/reading-yaml-from-javascript-in-a-browser?noredirect=1#comment125366890_70916217 and it was closed.
I have tried this:
Reading from YAML File in Javascript (Solution 2)
and the example shown here
https://github.com/shockey/js-yaml-browser this says this fork is optimized for browsers

They all fail with the same error

js-yaml.js:9 Uncaught ReferenceError: require is not defined
at js-yaml.js:9:16

That line is var fs = require('fs'); As far as I understand fs is a node.js module and it won't work in the browser

My question is Is there a JavaScript module to open and read YAML files from a web server, a module that works in the browser without any backend?

Note: I am a beginner and I thought this would be a basic example, load a file and parse it.

General Grievance
  • 4,555
  • 31
  • 31
  • 45
MiniMe
  • 1,057
  • 4
  • 22
  • 47

1 Answers1

1

shockey/js-yaml-browser is broken and hasn't been updated in several years. js-yaml in general has a lot of forks. Manx7/js-yaml works and is reasonably up to date.

.as-console-wrapper { top: 0; max-height: 100% !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.js"></script>
<script>
// Normally we'd use fetch to get the file. However, stackoverflow 
// snippets don't have a way to add another file, so we'll use a 
// string instead just to show how the library works.

/*
fetch("sample.yaml")
  .then(response => response.text())
  .then(text => {
    // once the file has been loaded, we can parse it into an object.
    const yaml = jsyaml.load(text);
    console.log(yaml);
  });
*/

const text = `
# Employee records
- martin:
    name: Martin D'vloper
    job: Developer
    skills:
      - python
      - perl
      - pascal
- tabitha:
    name: Tabitha Bitumen
    job: Developer
    skills:
      - lisp
      - fortran
      - erlang
`;

const yaml = jsyaml.load(text);
console.log(yaml);
</script>
Ouroborus
  • 16,237
  • 4
  • 39
  • 62
  • What is wrong with this one that I initially tried to use https://github.com/nodeca/js-yaml – MiniMe Jan 31 '22 at 03:05
  • Nothing. They're very nearly the same file and they both work as expected, as you can see by running this snippet. Note that doing a text search on [that file](https://github.com/nodeca/js-yaml/blob/master/dist/js-yaml.js) shows that there's only one instance of "require" and that's in a comment. Are you sure you copied the right file? – Ouroborus Jan 31 '22 at 03:43
  • Yes you are correct ..not sure what happened. I think at one point I just linked the JS file that was in Github instead of downloading the RAW file. I think after that I used curl to get the same js file from github but that gets you a webpage. Few minutes ago I just copied the content of that file and pasted in the file I have , replacing the entire content and the above code worked. – MiniMe Jan 31 '22 at 04:26