I am trying to load a local CSV file with papaparse to extract it's content in a Vue3 application.
When I try something like:
let myTest = Papa.parse("#/assets/data/postcodes.csv", {
delimiter: ",",
header: true
});
I get a blank response as if the filepath is wrong. However, if I try importing the file directly with Vue3, so I can pass it to the papaparse method, like this:
import myFile from "#/assets/data/postcodes.csv"
...
let myTest = Papa.parse(myFile, {
delimiter: ",",
header: true
});
I get this error:
ERROR in ./src/assets/data/postcodes.csv 3:5
Module parse failed: Unexpected token (3:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| Suburb,Postcode
| Condobolin,2877
> Lake Cargelligo,2672
| Murrin Bridge,2672
| West Wyalong,2671
What is the correct way to reference a local csv file in the asset directory? I assume my file path is correct because of the error.
It hasn't been an issue loading other local assets like images and icons.
Related
Using Nuxt 3, I am struggling to do something that appears simple: I would like to get a list of restaurants from an api served by nuxt/nitro in order to use it on the client side. My original file, is a .csv file stored under assets/: assets/list.csv.
Here is what I have in my component .vuefile:
//...
const { restaurants } = await useFetch('/api/restaurants')
//...
And the content of server/api/restaurants.js:
import csv from 'csvtojson'
export default defineEventHandler(async(event) => {
const data = await csv().fromFile('~/assets/list.csv')
return { data }
})
But I get an error "[500] File does not exist". I've tried many variants but always get an error here or there. Could you help me figure out the solution? Thanks.
Actually solved by realizing the following:
As the doc suggests, the assets/ directory is for assets that are processed by the bundler (Vite or Webpack). Nuxt won't serve files in the assets/ directory unless nuxt.config.ts is configured with the appropriate loader (e.g. a csv loader). Hence the 500 error.
Nuxt Content, on the other hand, is useful to automatically parse a .csv file located in the content/ directory:
In nuxt.config.ts:
modules: ["#nuxt/content"]
In the component .vue file, the following will expose the parsed csv in data.body:
const { data } = await useAsyncData("list", () => queryContent("/list").findOne())
The beauty of nuxt is that you don't need to import anything, it does it for you.
Since somes weeks, I am trying to create an XP System with Discord.js V13 but when I write on a JSON file with fs module new datas, I'm getting an issue in the JSON file like:
{
"status" : {
"server-id": "on"
}
}}
Somes extra brackets and getting:
JSON unexpected end
I'm using this code to write in JSON files:
fs.writeFile("./DataBase/xp-system.json", JSON.stringify(xp_system, null, 4), (err) => {
if (err) console.error();
});
Thanks for your help.
My svelte app is required to read json file from the public folder.
I followed exactly the rollup setup from this link, then add json to my app.svelte:
import * as port from '/port.json';
port.json is located at the public folder together with index.html.
But I keep getting this error:
main.js:11 Uncaught ReferenceError: port is not defined at main.js:11
and I am getting this message from Terminal which I am not sure what it means:
(!) Missing global variable name Use output.globals to specify browser
global variable names corresponding to external modules /port.json
(guessing 'port')
How can I resolve this?
You have two options.
Move the file to your src/ folder and bundle it with the rest of your application code using Rollup. This is where you need #rollup/plugin-json to bundle json files. You can then import it like so:
<script>
import json from './port.json';
</script>
<p>{JSON.stringify(json)}</p>
Keep the file in your public/ folder and retrieve it at runtime using fetch.
<script>
let fetchJson = fetch('port.json').then(res => res.json());
</script>
{#await fetchJson}
<p>Loading JSON</p>
{:then result}
<p>{JSON.stringify(result)}</p>
{/await}
Export the object and rename the file from .json to .json.js.
port.json.js
export let myJson = {
name: "hello world"
}
Component:
<script>
import json from './port.json';
</script>
<p>{JSON.stringify(json)}</p>
I am using lib in npm for project angular call json2csv for export JSON to file.csv (excel)
Here is my code:
const fields = ['id', 'name'];
const opts = { fields };
try {
const parser = new json2csv.Parser(opts);
const csv = parser.parse(this.data);
console.log(csv);
} catch (err) {
console.error(err);
}
Printing object is correct data but not create file.
Can anyone help me when add filename and path in my code?
The json2csv node_module that you're trying to use in your Angular App is not supposed to be used there. It's supposed to be used on your NodeJS backend.
Your Frontend/Client is not responsible for writing files to the system. Your Backend/Server is.
Ideally, you should be creating a REST API to which, you'll be passing the JSON to be written in a CSV file as a Request Payload.
Your NodeJS Backend can then respond to that request with the downloadable CSV file that is generated by using the json2csv node_module
I want to keep my test data in a JSON file that I need to import in cucumber-protractor custom framework. I read we can directly require a JSON file or even use protractor params. However that doesn't work. I don't see the JSON file listed when requiring from a particular folder.
testdata.json
{
"name":"testdata",
"version":"1.0.0",
"username":"1020201",
"password":"1020201"
}
Code in the Config.js
onPrepare: function() {
var data = require('./testdata.json');
},
I don't see the testdata.json file when giving path in require though its available at the location.
I wish to access JSON data using data.name, data.version etc.
Following is my folder structure:
You should make sure your json file is located in the current directory & and in the same folder where your config file resides as you are giving this path require('./testdata.json'); -
There are many ways of setting your data variables and accessing them globally in your test scripts -
1st method: Preferred method is to use node's global object -
onPrepare: function() {
global.data = require('./testdata.json');
},
Now you could access data anywhere in your scripts.
2nd Method Is to use protractor's param object -
exports.config = {
params: {
data: require('./testdata.json');
}
};
you can then access it in the specs/test scripts using browser.params.data