I'm quite new to javascript and jsfiddle. I've been able to toy around with other fiddles that I find, but setting one up myself has proved difficult.
I'm attempting to use a library from npm to get a proof of concept for how it might work. I'm not sure why my import of the module is not working with jsfiddle.
What am I missing to get my fiddle working?
used the resourced bar to import the unpkg script
https://unpkg.com/browse/json-query#2.2.2/index.js
tried using the method outlined in the package readme
var json = [...]
jsonQuery('[DisplayText]', json)
When I follow the unpkg link I see that it has requires such as:
var State = require('./lib/state')
The problem is not only can the browser not understand require, it doesn't have files like ./lib/state available.
I think the problem here is that you are trying to download the raw source, which needs to be built with something like webpack before it can be used in the browser.
Related
I am working on a project built with Javascrpt, jQuery, and Vite.js. My colleague built a data visualization using D3 - a US states map - that I need to implement in the project on a specific page. They built the component using test data, my job is basically to load the component onto a page passing it actual returned data from an API call.
Everything in the test project works perfectly, but when I tried to implement this code into a script file in the project - literally copying and pasting from the working version - I got an error saying certain properties could not be read. After failing to debug for sometime, I randomly tried removing type="module" from the script tag link in HTML, and boom, everything worked. Does anyone have an idea of why this would be? I cannot get this code to run when the script type is set to module, except I need the script type to be set to module since I'm importing lots of components for other aspects of the page.
With the way the CodePen is set up, I couldn't replicate the issue since the HTML and JS files are automatically linked. But if you copy this code into your editor, and then in the html, set the the JS file to a module ` You'll see the issue.
Thanks. I'm at a total loss for what to do here. I could put all the D3 code in it's own script file, but then I have no way pass it variables from other files if it's not a module.
Per the comments, the following lines in my original code were not working in strict mode:
this.uStates = uStates;
this.uStatePaths = uStatePaths;
The fix was simple, I just needed to write the following instead:
window.uStates = uStates;
window.uStatePaths = uStatePaths;
I'm working on a React app and trying to use the i18n-iso-countries package to get a countries object in English which has keys as iso codes and values as the country names. This is easy in node, as I've verified with a simple script running the way the i18n-iso-countries npm docs show, like this:
const countries = require("i18n-iso-countries");
console.log(countries.getNames('en'));
But when I do this in my react app (made with create-react-app) like this ...
import countries from "i18n-iso-countries";
console.log(countries.getNames('en'));
...I get an empty object back. When I log just countries (console.log(countries)) in React, I see the function "getNames" on it and the other functions the docs mention, so I'm not sure what gives.
Just needed to add this line!
countries.registerLocale(require("i18n-iso-countries/langs/en.json"));
Not sure why this needs to be added in React (and Angular - where I found answer How to use i18n-iso-countries in Angular 6 - and probably other ui libraries/frameworks) so if someone could explain that, that would be cool, but hey, at least it's working!
It is a little bit to late. But to answer jupiterjelly this line is needed for browser environment, so that your bundler knows that it needs to put this file in the bundle
I am utterly confused as how to insert individual foundation javascript. it always seem to break my code. for example I need to use the dropdown menu js. in the documentation it state
Initializing
The file foundation.dropdownMenu.js must be included in your JavaScript to use this plugin,
along with foundation.core.js.
This plugin also requires these utility libraries:
foundation.util.keyboard.js
foundation.util.box.js
foundation.util.nest.js
this seem simple enough so I did the following in this order
bower_components/foundation-sites/js/foundation.core.js //check
bower_components/foundation-sites/js/foundation.util.mediaQuery.js
bower_components/foundation-sites/js/foundation.util.timerAndImageLoader.js
bower_components/foundation-sites/js/foundation.util.keyboard.js //check
bower_components/foundation-sites/js/foundation.util.box.js //check
bower_components/foundation-sites/js/foundation.util.nest.js //check
bower_components/foundation-sites/js/foundation.dropdown.js
bower_components/foundation-sites/js/foundation.dropdownMenu.js //check
bower_components/foundation-sites/js/foundation.equalizer.js
I follow what logical for me core 1st than util than plugin
yet it told me foundation.util.nest.js:6 Uncaught SyntaxError: Unexpected token =
if I put all foundation.min.js file the error go away, so I know it must be a dependency is missing or the order is not correct
is there any resource out there that is clear on the dependency of foundation js? instead everytime I have to trail and error it.
I'm having the same issue on my end. I am using Foundation as a GIT subtree in my project and actually have used this on a site I made just last week.
It seems that the problem is a newer version of function parameter declarations. In the code I had working, v6.1.2, the code in foundation.util.nest.js is:
Foundation.Nest = {
Feather: function(menu, type){
menu.attr('role', 'menubar');
type = type || 'zf';
versus the code in the newest version 6.2.0 which is:
const Nest = {
Feather(menu, type = 'zf') {
menu.attr('role', 'menubar');
It's that default/fallback declaration of "type" that seems to ruin everything. I look forward to a fix myself.
According to this link, my current version of Chrome (48) doesn't yet support default function parameters.
As of Foundation v6.2.0 the JavaScript codebase has been updated to ES6.
https://github.com/zurb/foundation-sites/releases
You'll need to add Babel to your build process to compile the ES6 code.
They have supplied a tutorial for this here:
https://github.com/zurb/foundation-sites/wiki/Upgrading-to-Foundation-6.2
Hope this helps.
So reading another article and solution here I found the library Alasql which seems to do what I need.
I've installed it and was writing a proof-of-concept application to use it and when I attempt to use the illustration given in that article I get:
Error: jszip is not a constructor
write_zip#https://server:8443/vendor/js-xlsx/dist/xlsx.js:11295:12
write_zip_type#https://server:8443/vendor/js-xlsx/dist/xlsx.js:11407:10
writeSync#https://server/vendor/js-xlsx/dist/xlsx.js:11421:1
saveWorkbook#https://server:8443/vendor/alasql/dist/alasql.js:15656:17
doExport#https://server/vendor/alasql/dist/alasql.js:15556:3
alasql.into.XLSX#https://server/vendor/alasql/dist/alasql.js:15529:3
anonymous#https://server/vendor/alasql/dist/alasql.js line 7343 > Function:1:14
queryfn3#https://server/vendor/alasql/dist/alasql.js:6528:13
queryfn2#https://server/vendor/alasql/dist/alasql.js:6274:9
anonymous#https://server/vendor/alasql/dist/alasql.js line 7757 > Function:1:57
queryfn/<#https://server/vendor/alasql/dist/alasql.js:6223:12
queryfn#https://server/vendor/alasql/dist/alasql.js:6219:2
yy.Select.prototype.compile/statement#https://server/vendor/alasql/dist/alasql.js:7352:14
alasql.dexec#https://server/vendor/alasql/dist/alasql.js:4240:27
alasql.exec#https://server/vendor/alasql/dist/alasql.js:4190:10
alasql#https://server/vendor/alasql/dist/alasql.js:121:11
Index#https://server/app/states/index/index.controller.js:20:23
And those errors keep going as is the custom of Angular.
Looking for a solution I found https://github.com/SheetJS/js-xlsx/issues/184 but that didn't seem to help me out at all.
So I'm wondering if other people have encountered this and what their solution to the problem was as I'd really like to use this library but can't even get their example code to work.
EDIT:
So for those who might be coming up with the same problem...the solution I found was to add the JSZip library to my application (even though it looks like it was included with the SheetJs library) and made sure it was loaded before the Alasql piece. That seems to have done the trick...
It seems you are using it with requirejs or some dependency library
You will either need to include all .js files with the distribution or add them as a dependency in shim
Is there any way I can include an external JS library in my pebble code?
Conventionally on a webpage I would do this in my head tags:
<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.11/firebase.js'></script>
But in pebble, I am unable to do that since I am only using JS. So how can I include an external library for a JavaScript file.
At present, you cannot include external JS files.
If you're using CloudPebble, then the only way to do this is to copy and paste the content of the JS library files into your JS file.
If you're doing native development, you can modify the wscript file to combine multiple JS files into one at build time.
I think there's some confusion over Pebble.js vs PebbleKit JS (v3.8.1). Pebble.js is a fledgling SDK where eventually the programmer will be able to write pure JavaScript. It's still cooking so there's some functionality missing like the ability to draw a line or obtain the screen dimensions. The repo is a mix of C and JS sources where you can add C code to augment missing functionality but otherwise all your code lives in src/js/app.js or src/js/app/. Anyway, Pebble.js does support require.
I don't use CloudPebble but I got the impression that it either supports Pebble.js (and hence require) or is planning to. I think all this SDK boilerplate code would be hidden.
PebbleKit JS does not support require out of the box AFAIK. I've made a demo that ports require support from Pebble.js to PKJS. The summary of changes is:
Move your project's src/js/pebble-js-app.js to src/js/app/index.js.
Remove any ready event listener from src/js/app/index.js. index.js will
be loaded when the ready event is emitted.
Add src/js/loader.js from Pebble.js.
Add a src/js/main.js that calls require('src/js/app') on the ready event.
Update your wscript with the following
deltas.
When adding new modules, place them under src/js/app/ and require('./name') will work.
I've tried to cover this all in the demo's readme.
BTW, here's the official breakdown of all the different SDKs but it's a little confusing.
I am not sure if there have been changes since the above answer, but it looks like there is in fact a way to include additional resources while keeping things tidy. On the pebbleJS page, there is the following section with an some information on the subject.
GLOBAL NAMESPACE - require(path)
Loads another JavaScript file allowing you to write a multi-file project. Package loading loosely follows the CommonJS format. path is the path to the dependency.
You can then use the following code to "require" a JS library in your pebble project. This should be usable on both Cloud Pebble as well as native development.
// src/js/dependency.js
var dep = require('dependency');
You can then use this as shown below:
dep.myFunction(); // run a function from the dependency
dep.myVar = 2; // access or change variables
Update:
After some digging into this for my own, I have successfully gotten CloudPebble to work with this functionality. It is a bit convoluted, but follows the ECMAScript 6 standards. Below I am posting a simple example of getting things set up. Additionally, I would suggest looking at this code from PebbleJS for a better reference of a complex setup.
myApp.js
var resource = require('myExtraFile'); // require additional library
console.log(resource.value); // logs 42
resource.functionA(); // logs "This is working now"
myExtraFile.js
var myExtraFile = { // create a JSON object to export
"value" : 42, // variable
functionA : function() { // function
console.log("This is working now!");
}
};
this.exports = myExtraFile; // export this function for
// later use