从 Django 查询集 json 数据中获取特定键的值并将它们传递给 vueJS [英] get the values of a specific key from Django queryset json data and pass them to vueJS

问题描述

我使用 Django2 开发了一个 Web 应用程序，前端使用 vue.在视图函数中，我已经向前端呈现了一些 json 数据.但是在前端，我不确定如何将 Json 数据中特定键的所有值传递给 JavaScript 字典值.我曾尝试使用 += 添加数据，但在我的案例中未能获取数据.表中没有显示数据.只有第一行可以工作

I have used Django2 to develop a web app, frontend using vue. In the view function, I have rendered some json data to frontend. But in the frontend, I am not sure how to pass all the value of a specific key in the Json data to a JavaScript dictionary value. I have tried to use += to add the data, but failed to get the data in my case. No data was shown in the table. Only the first row could work

View.py:

def Browse_and_adopt(request):
query_results_book = Title.objects.all()
query_results_book_json = serializers.serialize('json', query_results_book)
return render(request, 'main.html', {"query_results_book_json": query_results_book_json})

main.html:{{ row.title }}{{ row.author }}

main.html: {{ row.title }} {{ row.author }}

    <script>
          var query_results_book = {{ query_results_book_json|safe}};

    var book_row = {title: query_results_book[0].fields.title, author: query_results_book[0].fields.author };

    for (var i=1; i < query_results_book.length; i += 1){
        book_row += {title: query_results_book[i].fields.title, author: ''};
    }


    const app = new Vue({
        el: '#app',
        data:() => ({
            filter: '',
            rows: [book_row]
        }),
</script>

示例 json:

{author: "Bill Gates", title: "test"}

如何将这个json数据中的所有数据传递给vueJS?

How could I pass all the data in this json data in vueJS?

推荐答案

问题是您返回 query_results_book_json 中的标题列表，然后尝试访问它，就好像它只有 1 个项目在:

The problem is that you are returning a List of Titles in query_results_book_json and then trying to access it as if it was only 1 item in :

var book = {title: query_results_book_json.title, author: query_results_book_json.author};

您必须遍历该结果才能获得您想要的图书，或者将查询更改为仅返回您需要的图书.

You will have to iterate over that result in order to get the book you want, or change the query to just return the book you need.

您可以添加如下内容:

<script>
    var query_results_book = {{ query_results_book_json|safe}};
    var book = query_results_book[0];
</script>

编辑 2(现在您添加了示例):

EDIT 2 (now that you added examples):

为了访问那些字典键，你必须使用 [''] 符号.

In order to access those dict keys you have to use the [''] notation.

例如，要在 javascript 中获取第一本书的标题，您可以这样做:

So for example to get the first book's title in javascript you would so something like this:

query_results_book[0]['title']

您可以通过记录这样的 for 循环来尝试:

You can try this by logging a for loop like this:

<script>
for (let i = 0; i < query_results_book.length; i++) {  
   console.log(query_results_book[i]['title'])
}
</script>

这篇关于从 Django 查询集 json 数据中获取特定键的值并将它们传递给 vueJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！