How to Pass JSON data from Django view to Vue.js instance methods

Question

I am new To Vue.js . How to pass JSON data from Django view to vue instance(method).

Views.py

def articles(request):
    model = News.objects.all() # getting News objects list
    random_generator = random.randint(1, News.objects.count())
    context = {
              'title' : 'Articles' , 
              'modelSerialize' :  serializers.serialize('json',News.objects.all()),
              'num_of_objects' : News.objects.count() , 
              } 
    return render(request, 'articles.html',context)

VueScript.js

new Vue({

    el: '#list-Of-Articles-Displayed',
                data: {
                   count: 0
              },    
        ready: function() {


          this.$http.get('http://127.0.0.1:8000/article/').then(function (response) {
              response.status;
              console.log(response); 
          }, function (response) {
                  alert("error ");
              // error callback
          });

        }

        })

Template(article.html)

<div id = "list-Of-Articles-Displayed" class = "col-lg-10" v-for="news in loadArticles" >
<div class = "col-lg-11">
   <br>
   <a href = "<%news.id%>" ><%news.title%></a> 
   <h5><small><%news.date%></small></h5>
   <p>
      <%news.body%>...<span style = "color : purple" > <a href = "<%news.id%>"> Call to Action</a>
      <br><br></span> 
   </p>
</div>

I am trying to access JSON data in VueScript.js , instead of JSON data I am getting complete HTML structure.

Can any one help me.? Thanks

ivan wang · Accepted Answer · 2017-05-05 04:42:06Z

6

Maybe like this:

views.py

context = {'page_data' : json.dumps({"title": "Articles"})}

article.html

<body data="{{ page_data }}">

in vue instance

beforeMount(){
  this.page = JSON.parse(document.getElementsByTagName('body')[0].getAttribute('data') || '{}');
}

edited May 5, 2017 at 4:42

answered May 5, 2017 at 2:07

ivan wang

4151 gold badge5 silver badges10 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 10:31:25Z

3

Maybe you should use a JsonResponse instead:

from django.http import JsonResponse

def articles(request):
    model = News.objects.all() # getting News objects list
    random_generator = random.randint(1, News.objects.count())
    context = {
              'title' : 'Articles' , 
              'modelSerialize' :  serializers.serialize('json',News.objects.all()),
              'num_of_objects' : News.objects.count() , 
              } 
    return JsonResponse(context)

The problem that you are getting is that render returns a Response with a content-type of text/html and what you need for the ajax call is a Response with a content-type of application/json. The JsonResponse is a fast way to make sure you have the right content-type for the response. You can read more about JsonResponse here or read this StackOverflow answer

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Mar 28, 2016 at 4:11

2ps

16k2 gold badges34 silver badges53 bronze badges

1 Comment

light_ray Over a year ago

I am getting only JSON data and displaying in the page.How to get complete html page with json data

musicformellons · Accepted Answer · 2016-07-08 13:04:47Z

2

You can add html to your vue-components and serve json via restful-api, using e.g. Django Rest Framework. For making the API calls you would add vue-router to vue: https://github.com/vuejs/vue-router

edited Jul 8, 2016 at 13:04

answered Jul 8, 2016 at 12:58

musicformellons

13.6k5 gold badges58 silver badges95 bronze badges

Collectives™ on Stack Overflow

How to Pass JSON data from Django view to Vue.js instance methods

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related