How to write, update local JSON file in vue js

Question

I have tried to use file system (fs module) but, not getting that how to use that FS module. could anyone explain with proper example.

I was doing an example in vue js.

Create component
Added json file
Pass records as props on component
listen that props on another component
and render student list and perform remove record

Now next i want to Pass updated list using emit & update the JSON as well

This code is working properly just i want to update local json file after delete record.

StudentRegistration.vue


<template>
    <div class="container">
        <div class="row"> 
            <template v-if="students.length">
                <!-- {{student.length}} -->
                <studentCard class="student__parent" v-for="student in students" :key="student.id" :student="student" @studentRemoveId="studentRemoveId"/>
            </template>
            <template v-else>
                <div class="not__available">
                    Data not available
                </div>
            </template>
        </div>
    </div>
</template>

<script>

import studentCard from './studentCard.vue'
import studentData from '../data/StudentData.json'


export default {
    name: 'StudentRegi',
    components:{
        studentCard
    },
    data() {
        return {
            students: studentData,
            
        }
    },
    methods: {
        studentRemoveId(studid){
            this.students = this.students.filter( item => {
                console.log('hey there ::=> ', item);
                return item.id !== studid.id
            });            

        }
    },
    
}
</script>

studentCard.vue

<template>
    <div>
        <span class="student__remove" @click="removeStudent(student)">X</span>
        <div class="student__inner">
            <div class="student__image">
                <img :src="student.avatar" alt="">
            </div>
            <div class="student__name student-detail">
                <div>Name</div>
                <div>{{student.fname}} {{student.lname}}</div>
            </div>
            <div class="student__age student-detail">
                <div>Age</div>
                <div>{{student.age}}</div>
            </div>
            <div class="studet_email student-detail">
                <div>Email</div>
                <div>{{student.email}}</div>
            </div>
            <div class="student__phone student-detail">
                <div>Phone</div>
                <div>{{student.phone}}</div>
            </div>
        </div> 
        
    </div>
</template>

<script>

export default {
    name:'StudentCard',
    props:['student'],
    methods: {
        removeStudent(studid){
            this.$emit('studentRemoveId', studid);
        }

    },

}
</script>

data.json

[
    {
        "id": 1,
        "fname": "Atul",
        "lname": "Bhavsar",
        "age": "10 Years",
        "email": "[email protected]",
        "phone": "9685958698",
        "avatar": "https://i.postimg.cc/d3ykpLs8/stud1.jpg"
    },
    {
        "id": 7,
        "fname": "Foram",
        "lname": "Dobariya",
        "age": "20 Years",
        "email": "[email protected]",
        "phone": "9856985698",
        "avatar": "https://i.postimg.cc/QtWp5XBn/stud7.jpg"
    },
]

Mahen · Accepted Answer · 2022-05-02 04:51:46Z

Hey After some searches I found a solution so sharing here it may help who stuck related to this issue,

As i show above code i just wanted to add code where i can write my json file. so i have made some changes in code, that is as below.

Add command in CMD : json-server --watch './src/data/studentData.json' --port 3001

then it will provide local link from where you can open you json data Resources http://localhost:3001/studente

see below image :

StudentRegistration.vue

this code should be in script tag in StudentRegistration.vue component

In this file added below code added code in method and created create method

export default {
    name: 'StudentRegi',
    components:{
        studentCard
    },
    data() {
        return {
            studentsGetData: []
            // studentsGetData: studentData,
        }
    },
    methods: {
        studentRemoveId(studid){

            fetch(`http://localhost:3001/studente/${studid.id}`, 
            {
                method: 'DELETE', 
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            }).then(resp => {
                console.log('res ::=> ', resp.data);
                resp.data;
            }).catch(error => {
                console.log(error);
            });
                
           
            this.studentsGetData = this.studentsGetData.filter( item => {
                return item.id !== studid.id
            });            
            
        }
    },
    async created(){
        await fetch('http://localhost:3001/studente')
        .then(res => res.json())
        .then(data => { 
            console.log('data ::=> ', data);
            this.studentsGetData = data
        } )
        .catch(err => console.log(err.message))
    }
}

Now Run your project

Collectives™ on Stack Overflow

How to write, update local JSON file in vue js

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