Vue.js counting json value

Question

I have this Json

all_subjects: [
{
id: 1,
subject_code: "COMP101",
description: "Knowledge Work Software & Presentation ",
name: "",
grade: [
{
id: 103,
subject_id: "1",
user_id: "17",
grade: "F",
reviewed: "0"
},
{
id: 104,
subject_id: "1",
user_id: "16",
grade: "F",
reviewed: "0"
}
]
},

my view

 <tbody v-for="subject in subjects">
        <tr>
          <td>
            <span> @{{ subject.subject_code }}</span>
          </td>
          <td>
            <span> @{{ subject.description }} </span>
          </td>
          <td>
            <span> @{{ subject.grade.grade->count() }} </span>
          </td>
          <td><span> <div class="btn btn-crimson btn-inline-block"><a href="#" data-toggle="modal" data-target="#myModal" class="btn-view-more">View more info</a></div> </span></td>
        </tr>       
      </tbody>

how do I count the that is F. I received the json value using vue.resource this.$http.get throught API Call. I'm trying this @{{ all_subjects.grade.grade->count() }} it doesn't work. I wanted to count the subjects failure inside the v-for loop in vue.js what are the ways around this?

From the JSON grade is a string so what do you exactly mean by count the grade. And you should not use PHP's -> operator where you are using it because Blade will not process it as you have ignored it with the @. Guessing you are using Laravel — Ogie
– Ogie, Commented Apr 10, 2016 at 6:16

Liren · Accepted Answer · 2016-04-10 06:17:10Z

1

You are trying to call a method count() that doesn't exist in your code. Also, you can't call methods the same way in Javascript as you do in PHP. So you can't use the -> operator to make a method call.

You can add a new method in your Vue vm:

methods: {
        count: function(subject) {
            var grades = subject.grade.filter(function(grade) {
                return grade.grade === 'F';
            });
            return grades.length;
        }
    },

The code above works by using Javascript's filter() method.

Then call that method in your view:

<ul>
    <li v-for="subject in all_subjects">
        Number of F's: {{ count(subject) }}
    </li>
</ul>

Also note that in your v-for you are referencing subjects instead of all_subjects.

answered Apr 10, 2016 at 6:17

Liren

4001 gold badge3 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Vue.js counting json value

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