1Use in JavaScript {#flatbuffers_guide_use_javascript} 2================= 3 4## Before you get started 5 6Before diving into the FlatBuffers usage in JavaScript, it should be noted that 7the [Tutorial](@ref flatbuffers_guide_tutorial) page has a complete guide to 8general FlatBuffers usage in all of the supported languages 9(including JavaScript). This page is specifically designed to cover the nuances 10of FlatBuffers usage in JavaScript. 11 12You should also have read the [Building](@ref flatbuffers_guide_building) 13documentation to build `flatc` and should be familiar with 14[Using the schema compiler](@ref flatbuffers_guide_using_schema_compiler) and 15[Writing a schema](@ref flatbuffers_guide_writing_schema). 16 17## FlatBuffers JavaScript library code location 18 19The generated code for the FlatBuffers JavaScript library can be found at 20https://www.npmjs.com/package/flatbuffers. To use it from sources: 21 221. Run `npm run compile` from the main folder to generate JS files from TS. 231. In your project, install it as a normal dependency, using the flatbuffers 24folder as the source. 25 26## Using the FlatBuffers JavaScript libary 27 28*Note: See [Tutorial](@ref flatbuffers_guide_tutorial) for a more in-depth 29example of how to use FlatBuffers.* 30 31Due to the complexity related with large amounts of JS flavors and module types, 32native JS support has been replaced in 2.0 by transpilation from TypeScript. 33 34Please look at [TypeScript usage](@ref flatbuffers_guide_use_typescript) and 35transpile your sources to desired JS flavor. The minimal steps to get up and 36running with JS are: 37 381. Generate TS files from `*.fbs` by using the `--ts` option. 391. Transpile resulting TS files to desired JS flavor using `tsc` (see 40 https://www.typescriptlang.org/download for installation instructions). 41 42~~~{.js} 43 // Note: These require functions are an example - use your desired module flavor. 44 var fs = require('fs'); 45 46 var flatbuffers = require('../flatbuffers').flatbuffers; 47 var MyGame = require('./monster_generated').MyGame; 48 49 var data = new Uint8Array(fs.readFileSync('monster.dat')); 50 var buf = new flatbuffers.ByteBuffer(data); 51 52 var monster = MyGame.Example.Monster.getRootAsMonster(buf); 53 54 //--------------------------------------------------------------------------// 55 56 // Note: This code is an example of browser-based HTML/JavaScript. See above 57 // for the code using JavaScript module loaders (e.g. Node.js). 58 <script src="../js/flatbuffers.js"></script> 59 <script src="monster_generated.js"></script> 60 <script> 61 function readFile() { 62 var reader = new FileReader(); // This example uses the HTML5 FileReader. 63 var file = document.getElementById( 64 'file_input').files[0]; // "monster.dat" from the HTML <input> field. 65 66 reader.onload = function() { // Executes after the file is read. 67 var data = new Uint8Array(reader.result); 68 69 var buf = new flatbuffers.ByteBuffer(data); 70 71 var monster = MyGame.Example.Monster.getRootAsMonster(buf); 72 } 73 74 reader.readAsArrayBuffer(file); 75 } 76 </script> 77 78 // Open the HTML file in a browser and select "monster.dat" from with the 79 // <input> field. 80 <input type="file" id="file_input" onchange="readFile();"> 81~~~ 82 83Now you can access values like this: 84 85~~~{.js} 86 var hp = monster.hp(); 87 var pos = monster.pos(); 88~~~ 89 90## Text parsing FlatBuffers in JavaScript 91 92There currently is no support for parsing text (Schema's and JSON) directly 93from JavaScript. 94