I recently developed a web app using Django2 with Vue for the frontend. I encountered an issue in passing all values of a specific key from JSON data to a JavaScript dictionary value on the frontend. Despite trying to use the += operator to add the data, I failed to retrieve the desired information. Only the first row seemed to work, while the rest were not displayed in the table.
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 }}
<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>
sample json:
{author: "Bill Gates", title: "test"}
Is there a way to effectively pass all data from this JSON file to vueJS?