Convert CSV file from input tag Vue js to JSON

Question

so i try to convert CSV file from input tag to JSon using this template and code below:

 <input type="file" ref="myfile" @change="csvJSON($event)" />

csvJSON(csv) {
            console.log(csv)
            var lines = csv.split('\n')

            var result = []

            var headers = lines[0].split(',')

            for (var i = 1; i < lines.length; i++) {
                var obj = {}
                var currentline = lines[i].split(',')

                for (var j = 0; j < headers.length; j++) {
                    obj[headers[j]] = currentline[j]
                }

                result.push(obj)
            }
            console.log('data', result)
        },

but it keeps showing this error as i already target the event value on it, can someone tell me where did i do wrong here?

TypeError: csv.split is not a function
    at VueComponent.csvJSON (Tables.vue?074c:179:1)
    at change (Tables.vue?8f4b:282:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:3015:1)
    at HTMLInputElement.invoker (vue.runtime.esm.js?2b0e:1813:1)
    at original_1._wrapper (vue.runtime.esm.js?2b0e:7458:1)

It's telling you the argument being passed is not a string. Look at the Vue documentation for @change — Tibrogargan
– Tibrogargan, Commented Nov 7, 2022 at 6:49

Boussadjra Brahim · Accepted Answer · 2022-11-07 07:03:27Z

2

You need to await the file content to be loaded using the event target files :

async csvJSON(event) {
          const file = event.target.files.item(0)
           const csv = await file.text();
            console.log(csv)
            var lines = csv.split('\n')

            var result = []

            var headers = lines[0].split(',')

            for (var i = 1; i < lines.length; i++) {
                var obj = {}
                var currentline = lines[i].split(',')

                for (var j = 0; j < headers.length; j++) {
                    obj[headers[j]] = currentline[j]
                }

                result.push(obj)
            }
            console.log('data', result)
        },

answered Nov 7, 2022 at 7:03

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Convert CSV file from input tag Vue js to JSON

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related