Vue. Js Laravel count elements of JSON

Question

I would like to display the number of tasks elements in JSON, but I do not know how to go about it.

I want to make something like this:

Tasks to do 2/12 (where 2 - tasks with flag 1, 12 - all tasks)

I tried using the lenght function, but I got the information function lenght is not defined, similarly with the slice function.

[  
   {  
      "id":1,
      "clients_id":1,
      "products_id":1,
      "tasks_id":1,
      "project_name":"Some project",
      "created_at":null,
      "updated_at":null,
      "clients":{  
         "id":1,
         "client_name":"Some client",
         "contact_name":"Some client",
         "client_phone":"123123123",
         "client_mail":"[email protected]",
         "client_nip":"1112223333",
         "client_logo":"logo.jpg",
         "updated_at":"2019-04-11 09:45:11",
         "created_at":"-0001-11-30 00:00:00"
      },
      "products":{  
         "id":1,
         "product_name":"Some product",
         "product_description":"Really nice product bro",
         "product_price":"999$",
         "updated_at":"2019-04-08 14:35:13",
         "created_at":null
      },
      "tasks":[  
         {  
            "id":1,
            "project_id":1,
            "task_name":"First task",
            "task_description":"its very hard task",
            "task_due":"2099-01-12 00:00:00",
            "status":0,
            "created_at":null,
            "updated_at":"2019-04-11 14:09:08"
         },
         {  
            "id":2,
            "project_id":1,
            "task_name":"fix task 1",
            "task_description":"or something else",
            "task_due":"2201-01-12 00:00:00",
            "status":1,
            "created_at":null,
            "updated_at":"2019-04-11 14:10:11"
         }
      ]
   }]

<script>
    export default {
        mounted() {
            let app = this;
            let id = app.$route.params.id;
            app.id = id;
            axios.get('/api/v1/projects/' + id)
                .then(function (resp) {
                    app.project = resp.data;
                })
                .catch(function () {
                    alert("Could not load your projects")
                });
        },
        data: function () {
            return {

               //client_id: null,
                project: {
                    id: '',
                    clients_id: '',
                    products_id: '',
                    tasks_id: '',
                    project_name: '',
                    updated_at: '',
                    created_at: '',
                    clients: ''

                },
                task: {
                status: ''
                }

               //client: []
            }
        },
        methods: {
            saveForm() {
                var app = this;
                var newproject = app.project;
                axios.patch('/api/v1/projects/' + app.id, newproject)
                    .then(function (resp) {
                        app.$router.replace('/c/');
                    })
                    .catch(function (resp) {
                        console.log(resp);
                        alert("Could not create your company");
                    });
            },
            taskDone(taskid, projectid){
                  var app = this;
                  {{app}};
                var newtask = app.task;
                var flag = 1; 
                axios.patch('/api/v1/tasks/' + taskid + '?status='+flag)
                    .then(function (resp) {
                        app.$router.push('/pr/view/' + projectid);
                        location.reload();
                    })
                    .catch(function (resp) {
                        console.log(resp);
                        alert("Could not create your company");

                    });
            },
            taskUnDone(taskid, projectid){
                  var app = this;
                  {{app}};
                var newtask = app.task;
                var flag = 0; 
                axios.patch('/api/v1/tasks/' + taskid + '?status='+flag)
                    .then(function (resp) {
                        app.$router.push('/pr/view/' + projectid);
                        location.reload();
                    })
                    .catch(function (resp) {
                        console.log(resp);
                        alert("Could not create your company");

                    });
            }
        }
    }
</script>

Sølve · Accepted Answer · 2019-04-11 21:29:16Z

1

You could create a computed function that returns the length of tasks filtered by status of 1.

computed() {
    status() {
        const tasks = this.project.tasks; 
        const complete = tasks.filter(task => task.status === 1);
        return `${complete.length}/${tasks.length}`;
    }
}

Then use status as a "variable" in your markup.

<p>Tasks done: {{ status }}</p>

answered Apr 11, 2019 at 21:29

Sølve

4,5062 gold badges23 silver badges35 bronze badges

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

3 Comments

Sølve Over a year ago

I wrote this on my phone in bed lol, gonna pimp it a bit tomorrow 😴😊

Jakub Jóźwiak Over a year ago

Thanks I will check tommorrow :)

Jakub Jóźwiak Over a year ago

Ok, I'm checked your code. And I modify something, but thank you !

computed: {             status() {                 const tasks = this.project.tasks;                  const complete = tasks.filter(task => task.status === 1);                 return complete.length;             }}

Collectives™ on Stack Overflow

Vue. Js Laravel count elements of JSON

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related