CODEWITHSUNDEEP
jsonnode.jsvue.jsvuejs2vue-component
t56k
t56k

Reputation: 7001

Vue won't read JSON response?

If /scheduled_jobs/list returns a JSON object, why is my Vue component not reading it?

Here's the component:

<template>
    <div>
        <ul v-if="jobs.length">
            <li v-for="job in jobs">
        {{ job.id }}
        {{ job.document_id }}
        {{ job.user_id }}
        {{ job.schedule }}
        {{ job.status }}
      </li>
        </ul>
        <p v-else>
            Nothing waiting.
        </p>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        jobs: []
      }
    },
    methods: {
      loadData () {
        $.get('/scheduled_jobs/list', function (response) {
          this.jobs = response.json()
        }.bind(this))
      },
      ready () {
        this.loadData()

        setInterval(function () {
          this.loadData()
        }.bind(this), 30000)
      }
    }
  }
</script>

And here's the response from the URL:

{
  "id": "8154e79383a950072823410e",
  "document_id": 59455,
  "user_id": 2,
  "schedule": "2018-02-03T12:00",
  "status": 2
}

I just get this response:

Nothing waiting.

Upvotes: 0

Views: 944

Answers (2)

li x
li x

Reputation: 4061

you are overwriting the array with an object: 

methods: {
      loadData () {
        $.get('/scheduled_jobs/list', function (response) {
          this.jobs.push(response.json());
        }.bind(this))
      }

Upvotes: 2

Roy J
Roy J

Reputation: 43899

You're getting an object, not an array, so jobs.length is undefined.

Upvotes: 1

Related Questions