Papa Parse reading CSV locally - csv

Can someone point to or show me a working example of Papa Parse reading a csv file.
When I try to use :
Papa.parse(file, {
complete: function(results) {
console.log("Finished:", results.data);
}
});
the file name is returned in the array instead of the data within. None of the internet examples actually work. The official demo works correctl inspecting its code I cant find it making use of the above strangely.

As #Matt mentioned in his comment, the trick is not to pass a file name, but a file object. This also was not intuitive to me at first, so here is a quick solution:
var data;
function parse() {
var file = document.getElementById('myDOMElementId').files[0];
Papa.parse(file, {
header: true,
dynamicTyping: true,
complete: function(results) {
console.log("Finished:", results.data);
data = results.data;
}
});
}
Note that you have to call the results in this way when working with a local file. If you want to work with the results elsewhere, assign it to a global variable.

I have faced the same problem and it was solved by 2 actions:
1- Adding a callback function
2- connecting to a local oython server/changing browser's security settigns
Check this:
https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally
I did not pass an object but a string with the file name/path and it worked for me.

Related

Jest Unable to Parse Image Files

I'm trying to set up the configuration and mock files for jest to parse/ignore image files in order for the tests to pass. Just about every online resource leads me to the jest docs located: https://jestjs.io/docs/webpack#handling-static-assets
which tell you exactly how to handle the situation. However, not in my case. I've tried both options of creating mock files and using a transformer.
My current jest.config.js:
module.exports = {
projects: [
{
displayName: 'Unit',
testMatch: ["**/?(*.)+(spec|test).[tj]s?(x)"],
setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/", "<rootDir>/cypress/"],
moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
moduleDirectories: ["node_modules", "bower_components", "shared"],
moduleNameMapper: {
"^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
'^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js'
},
// transform: {
// "\\.js$": "jest",
// "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"
// //'^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
// }
},
{
displayName: 'Pacts',
testMatch: ["**/?(*.)+(pacttest).[tj]s?(x)"],
testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/", "<rootDir>/cypress/"],
watchPathIgnorePatterns: ["pact/logs/*", "pact/pacts/*"],
}
],
};
my fileMock.js:
module.exports = 'test-file-stub';
My styleMock.js:
module.exports = {};
My fileTransformer.js:
const path = require('path');
module.exports = {
process(src, filename, config, options) {
return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
},
};
//export default module.exports;
my directory:
I've been bouncing back and forth trying different options in the configurations but they pretty much all lead me to the same two errors, one when I try to use the transformer, and another without. With the transformer commented out, I get 2 errors thrown at the fileMock.js file:
TypeError: Invalid URL: test-file-stub
Failed to parse src "test-file-stub" on next/image
Both of these are referring to the suggested string for the mock. I initially thought that maybe the string was a placeholder for code to actually handle something. But after some reading, my understanding is that it's actually just supposed to be a string there. Perhaps it's a specific string dependent on my environment? And next/image is where I'm importing the image component from.
I'm prioritizing the mocking (please correct me if I'm wrong) because my understand is the mock tells jest to ignore the image file and proceed with the rest of the test while the transformer actually attempts to change the file type from js to jpg or png or whatever filetype the image is. However, I'm trying everything I can. When I try to the run the tests with the transformer portion uncommented I receive an error before any tests are even run stating:
TypeError: Jest: a transformm must export something.
(which is why there is a commented out export default statement.)
This is my first time ever attempting anything like this and I think I've reached a point where I cannot think of anything else to try. If anybody has experienced anything like this please lay some knowledge on me. I'm not sure if I have the mockfiles set up incorrectly or if it's something in the configurations.
Thanks.
I was able to work around this by creating an image URL here:
https://www.base64-image.de/
and replacing the "test-file-stub" string with the generated URL string.
module.exports = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV/TSotUHeyg4pChOogFURFHrUIRKoRaoVUHk0s/hCYNSYuLo+BacPBjserg4qyrg6sgCH6AuLk5KbpIif9LCi1iPDjux7t7j7t3gFAvMc0KjAGaXjFTibiYya6IwVeE0I9ujCAgM8uYlaQkPMfXPXx8vYvxLO9zf44uNWcxwCcSzzDDrBCvE09tVgzO+8QRVpRV4nPiUZMuSPzIdcXlN84FhwWeGTHTqTniCLFYaGOljVnR1IgniaOqplO+kHFZ5bzFWStVWfOe/IXhnL68xHWag0hgAYuQIEJBFRsooYIYrTopFlK0H/fwDzh+iVwKuTbAyDGPMjTIjh/8D353a+Unxt2kcBzoeLHtjyEguAs0arb9fWzbjRPA/wxc6S1/uQ5Mf5Jea2nRI6BnG7i4bmnKHnC5A/Q9GbIpO5KfppDPA+9n9E1ZoPcW6Fx1e2vu4/QBSFNXyRvg4BAYLlD2mse7Q+29/Xum2d8PVXFym6OczU4AAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQflCBkOKh9/wZ+SAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAAAxJREFUCNdj+P//PwAF/gL+3MxZ5wAAAABJRU5ErkJggg==';

unable to use the data from d3.csv() outside of the .get clause

I can read some data from a csv with d3. It works fine.
d3.csv("myfile.csv")
.get(function(data) {
console.log(data);
});
If I execute this, it prints the data to the console in the expected way. It even recognizes the column headers. But the problem is I'm trying to read a number of csv and json files. Nesting them is ugly, tedious and error prone. So I tried this:
var something;
d3.csv("myfile.csv")
.get(function(data) {
something = data;
});
console.log(something);
The problem is that "something" doesn't have the expected value any more. I figure this has got to be a common thing. How is the handled? (I'm using d3 4.2.8)
Does it work for you?
const doSomething = data => {
console.log(data);
}
d3.csv("myfile.csv").get(doSomething);

JSON in cy.request body

In our web app, we have options that can be changed in using a POST HTTP request. There are a good number of options, and I will be writing a new test for each one, so I don't want to use the UI to change each option, seeing as there are 150 of them. SO my idea was to set up a custom command that I could feed arguments into (the argument being which option I want to update, and the new value for that option).
I put the list of options in a fixture, so it is in a JSON object. I was able to get to the point where I can find the key I'm looking for and update the value from the fixture, but I am running into an issue where my cy.request won't actually send any data. I've tried updating the headers, updating the body, setting json:true. Nothing works. So I'm hoping someone here will have some advice.
//fixture.json
{
"option1":"on",
"option2":"off",
"option3":"off
}
//commands.js
Cypress.Commands.add('update_options',(option, newValue) => {
cy.fixture('fixture.json').then((oldBody)=>{
let newBody = Objects.assign({},oldBody);//copy old options list into new object
function replace(option, newBody){
newBody[option]=newValue;
}
replace(option,newValue);
cy.request({
method:'POST',
url:'myURLwithParams',
form: true,
json: true,
body: newBody
})
});
});
//spec.js
cy.update_options("options1", "off");
I can get the new object with the updated code and everything, so that all works. The only thing I can't figure out is how to get it to actually POST. The JSON just doesn't compile correctly. I tried JSON.stringify(newBody) - no luck. I've tried every combination of everything I've mentioned and can't get it to work.
I tried with below code (with some hard coded data) and it works for me,
cy.fixture("fixture").then((oldBody) => {
cy.log(oldBody);
let newBody = oldBody
newBody['option1'] = 'DUMMY_DATA';
cy.log(newBody);
cy.request({
method: "POST",
url: "myURLwithParams",
form: true,
json: true,
body: newBody
});
});
Notable changes:
Directly assigned the old JSON object to a new JSON object (Instead
of Object usage)
Put some logs to track the changes
For your reference, attaching some of the screenshots here,
New JSON data (post substitution):
XHR request sending updated JSON:

How to generate Json file after execution finish

I'm working with cucumber and protractor and to generate reports i'm using
cucumber-html-reporter I already add the configuration to generate the report
var options = {
theme: 'bootstrap',
jsonFile: 'reporter/cucumber_report.json',
output: 'reporter/cucumber_report.html',
reportSuiteAsScenarios: true,
launchReport: true,
};
defineSupportCode(function({ After }) {
After((scenario)=> {
reporter.generate(options);
});
});
but i'm not generate the json file with this code, I search in google and the code to generate the json file should be add into the cucumberOpts in the conf.js but i'm not sure what's the code should be into cucumberOpts to generate the json file and the convert into report.
I hope you can help me guys.
Maybe this can help you, it's for Typescript but the code is almost the same. You can export the file in an After-hook. The link is for CucumberJS 1, if you look into the master branch you can also find the CucumberJS 2 solution
The advantage of this in comparison to generating the JSON file with the format option is that you can modify the JSON before saving
Hope it helps
For people that still have this problem, in my case the problem was that I was using cucumber v1 instead cucumber v2. For this case I should use registerHandler instead After this is the complete example:
defineSupportCode(function({registerHandler}) {
registerHandler('AfterFeatures', function (features) {
reporter.generate(options);
});
});
Hope this help u guys.

Collection+JSON with AngularJS

I'm working on a project where various tables of data will be displayed with AngularJS. The data will be in the Collection+JSON format, as shown below. I found this library https://github.com/Medycation/angular-collection-json, I'm not sure how to make it work. Below is an example of the data.
angular.module('app', ['cj']);
var $injector = angular.injector();
var cj = $injector.get('cj');
cj("cjapi1.php").then(function(cjProvider){
console.log(collection.items());
});
I tried the above. In the console it says I need to register cjProvider as a provider. Any help with how to set this up properly would be appreciated. Thanks.
{
“collection”:
{
“version”: “0.1”,
“href” : “https://example.com/companies”
“items” : [
{
“href” : “https://example.com/companies/123”,
“data” : [
{
“orgInfo”: {
{“name”: “companyName”, “value”: “Example Company 1”}
}
},
{
“href” : “https://example.com/companies/1234”,
“data” : [
{
“orgInfo”: {
{“name”: “companyName”, “value”: “Example Company 2”}
}
},
]
}
Please configure your cjProvider while configuring your module. Check the below code template for the reference to configure cjProvider.
angular.module('app', ['cj']).configure(function(cjProvider){
// Alter urls before they get requested
// cj('http://example.com/foo') requests http://example.com/foo/improved
cjProvider.setUrlTransform(function(original){
return original + '/improved';
});
// Disable strict version checking (collections without version "1.0")
cjProvider.setStrictVersion(false);
});
Please make sure that you have configured your transformUrl just shown above.
Your base url must be configured in cjProvider and while hitting any url ang getting data you should transform your request like here you are requesting cjapi1.php. so your baseurl must be append before that like your_base_url + 'cjapi1.php' this will be done for all requesting api. So cjProvider will take care that and will return api path and in .then(responce) you will get your responce which is collection.
cj("cjapi1.php").then(function(collection){
console.log(collection.items());
});
Are you trying to configure or get the contents of the collection from php call?
Looks like a typo to me but try this to get collection:
cj("cjapi1.php").then(function(collection){
console.log(collection.items());
});
...and this for configuration of your provider:
angular.module('agile', ['cj']).configure(function(cjProvider){
// Alter urls before they get requested
// cj('http://example.com/foo') requests http://example.com/foo/improved
cjProvider.setUrlTransform(function(original){
return original + '/improved';
});
// Disable strict version checking (collections without version "1.0")
cjProvider.setStrictVersion(false);
});