We Keep Coding

How to handle Response object in React from Flask?

I've read through numerous answers on SO, but most don't show both the Flask and JS side of my question, so I don't believe this is a duplicate. Specifically, using React/JS, I'm attempting to fetch a list of dictionaries from my Flask API.
On the server side, I've successfully serialized my class, and can print the list of dictionaries as expected. However, after I return it using JSONIFY (as suggested in several SO questions), it results in undefined on the JS side when I try to access the data. From reading online, it appeared that I could attempt to JSON parse the response data, but this similarly shows undefined. This leads me to believe that the issue may in fact be on the server side. Regardless, I'm also unsure how to properly access this list of dictionaries in my fetch function (I would've expected that I can do something along the lines of data[0]['name']).
I'd really appreciate any guidance you might have - thank you for reading this far.
eqtls prints as follows in api.py:
[{'id': 1, 'name': 'Bearbrook Skateboard Park', 'description': 'Flat asphalt surface, 5 components', 'xcoord': -75, 'ycoord': 45, 'date_added': datetime.datetime(2021, 10, 26, 19, 46, 10)}]
api.py
class Activity(db.Model):
id = db.Column(db.Integer, primary_key=True)
xcoord = db.Column(db.Integer,nullable=False)
ycoord = db.Column(db.Integer, nullable=False)
name = db.Column(db.String(200))
description = db.Column(db.String(200))
date_added = db.Column(db.DateTime, default = datetime.utcnow)
#create a string
def __repr__(self):
return f"<id={self.id}, name={self.name},description={self.description},xcoord={self.xcoord},ycoord={self.ycoord},date_added={self.date_added}>"
def serialize(self):
return {
'id': self.id,
'name': self.name,
'description': self.description,
'xcoord': self.xcoord,
'ycoord': self.ycoord,
'date_added': self.date_added
}
#app.route('/allActivities', methods=['GET'])
def allActivities():
print('hit allActivities routing')
allActivities = Activity.query.all()
print(str(allActivities))
eqtls=[activity.serialize() for activity in allActivities]
print(str(eqtls))
sys.stdout.flush()
return jsonify(eqtls)
Currently in app.js, my data variable logs as undefined.
app.js
useEffect(()=> {
fetch('/allActivities').then(response => {
if(response.ok){
console.log(response)
return response.json()
}
}).then(data => setAllActivities(data))
.then(data => {
console.log(data);
//var jsonData = JSON.parse((data));
//console.log(jsonData[0].name);
})
},[])

Error in formatting: AttributeError: 'JsonResponse' object has no attribute '_headers'

I am building an app using Django and JavaScript. In Java I have a function that looks like this:
fetch('/posts')
.then(response => response.json())
.then(posts => {
The first line of the JavaScript code actually calls the "post_list" function in my .views
from django.contrib.auth.decorators import login_required
from django.http import JsonResponse
from .models import Post
#login_required
def post_list(request):
posts = Post.objects.filter(username=request.user)
posts = posts.order_by("-timestamp").all()
return JsonResponse([p.serialize() for p in posts], safe=False)
But then the program crashes in the last line (when I try to return a JsonResponse) and I get a 500 Internal Server Error. As a result I don get a response and my JavaScript .then(response ..... line does not run.
I am not sure If this is relevant to answer the question, but My model looks like this:
from django.db import models
from django.contrib.auth import get_user_model
User = get_user_model()
class Post(models.Model):
username = models.ForeignKey(User, on_delete=models.CASCADE, related_name="user")
post = models.CharField(max_length=365)
like = models.PositiveIntegerField(default=0)
timestamp = models.DateTimeField(auto_now_add=True)
def __str__(self):
return f"{self.username} posted {self.post} the {self.timestamp}, and the post has {self.like} likes"
def serialize(self):
return {
"id": self.id,
"username":self.username,
"post": self.post,
"like": self.like,
"timestamp": self.timestamp.strftime("%b %d %Y, %I:%M %p"),
}
So, does anyone know why I'm getting a 500 Internal server error?

You should not be seeing this error if you import JsonResponse from the correct location. Instead, you should be getting an error "User object is not JSON serializable", which you can fix by doing something like this:
# models.py
from django.db import models
from django.contrib.auth import get_user_model
User = get_user_model()
class Post(models.Model):
username = models.ForeignKey(User, on_delete=models.CASCADE, related_name="user")
post = models.CharField(max_length=365)
like = models.PositiveIntegerField(default=0)
timestamp = models.DateTimeField(auto_now_add=True)
def __str__(self):
return f"{self.username} posted {self.post} at {self.timestamp}, and the post has {self.like} likes"
def serialize(self):
return {
"id": self.id,
"username": {
"username": self.username.username,
"displayName": self.username.get_full_name(),
"lastLogin": str(self.username.last_login.replace(microsecond=0)),
},
"post": self.post,
"like": self.like,
"timestamp": self.timestamp.strftime("%b %d %Y, %I:%M %p"),
}
As some additional advice:
Don't call a user object a username: it becomes confusing when you don't get a username but a full user object
Javascript is fully capable of rendering date formats in a way that make sense to the visitor, so it's preferable to transmit datetimes as ISO-8601 format, which both python and Javascript can handle. I've added that as example for the lastLogin attribute on the user serialization.

Django How to add data to database from javascript

I am have created a page in django, on this page I have create a button that calls a JavaScript function which in turn gets data from a API. This part of my code works as expected as it writes the response data to the console. However I cannot seem to get that data to be inserted into the model I have created in django.
I am not sure how python/javascript/models are meant to all link together.
models.py
from django.db import models
class Set(models.Model):
scry_id = models.CharField(max_length=255)
code = models.CharField(max_length=255)
name = models.CharField(max_length=255)
set_type = models.CharField(max_length=255)
release_date = models.DateField()
card_count = models.IntegerField()
block_code = models.CharField(max_length=255, null=True)
block_name = models.CharField(max_length=255, null=True)
parent_set_code = models.CharField(max_length=255, null=True)
digital_only = models.BooleanField(default=False)
foil_only = models.BooleanField(default=False)
nonfoil_only = models.BooleanField(default=False)
icon = models.CharField(max_length=255)
status = models.BooleanField(default=False)
def __str__(self):
return self.name
sets.html
{% extends "main/index.html "%}
{% block content %}
<div class="background card">
<div class="card-body">
<button class="btn" id="setRefresh" style="border: 1px solid" onclick="setRefresh()"><i class="fas fa-sync"></i></button>
</div>
</div>
{% endblock%}
custom.js
function setRefresh() {
const Url="https://api.scryfall.com/sets";
fetch(Url)
.then(res => res.json())
.then(data => obj = data.data)
.then(() => obj.sort(function(a,b){return a.released_at.localeCompare(b.released_at);}))
.then(() => {
for (var i = 0; i < obj.length; i++) {
//console.log(obj[i].name);
}
})
}
view.py
def sets(request):
return render(request,
"main/sets.html",
{"Sets": Set.objects.all})

There are two missing parts. First you need to have a url to listen for changes and then you need to have a view function where you want to set data. And you need to make some changes for the JS part of your code.Example below can clear this up and it is functional as well:
views.py
#ajax_required
def views_name(request):
try:
if request.method == 'POST':
post_id = request.POST.get('post')
YourModel.objects.create(id=post_id)
except Exception: # pragma: no cover
return HttpResponseBadRequest()
urls.py
urlpatterns = [
url(r'^whatever/$', views.views_name, name='whatever'),
]
custom.js:
$(function () {
$(".class-name").click(function () {
var csrf = $(this).attr('csrf');
var post = $(this).attr('page-id');
$.ajax({
url: '/whatever/',
data: {
'post': post,
'csrfmiddlewaretoken': csrf
},
type: 'post',
cache: false,
success: function (returned_values) {
// do whatever you want after success!
},
});
});
})

There are two ways to do it
Method 1 : After retrieving the data, send them to your django app instead of logging them into the console . have a django view that handles the corresponding request coming from your js code containing the data then adding them to the db. In other words you should fetch again , but this time to your django app using a post request .
.Your view should look like this :
from .models import Set
from django.http import HttpResponse
import json
def save(request):
data=json.loads(request.body)
for entry in data:
s = Set()
s.scry_id=entry["scry_id"]
#in the next lines you map entry fields to Set fields
s.save()
return HttpResponse("ok")
Method 2 : Your button call your django app on click , then your django app retrieve the data from https://api.scryfall.com/sets itself then save them to the db. Your code should look like this
from .models import Set
from django.http import HttpResponse
import json
import requests
def save(request):
response = requests.request("GET", "https://api.scryfall.com/sets")
data=response.json()
for entry in data:
s = Set()
s.scry_id=entry["scry_id"]
#in the next lines you map entry fields to Set fields
s.save()
return HttpResponse("ok")
Of course in either case don't forget to map your urlconf to the save view

Internal Server & Syntax Error while using fetch in Javascript

im very new to Javascript, Django & web development in general. Im following a cs50 web dev course by harvard and I have to design a front-end for an email client that makes API calls to send and receive emails.
Ill get mail, send mail, and update emails by using an API that is written specifically for us.
I need to send a GET request to /emails/ where is either inbox, sent, or archive, and it will return back (in JSON form) a list of all emails in that mailbox, in reverse chronological order.
How to fetch, as instructed by the course:
fetch('/emails/sent')
.then(response => response.json())
.then(emails => {
// Print emails
console.log(emails);
// ... do something else with emails ...
});
I put this exact code in my .js file and it gives me these two errors:
GET http://127.0.0.1:8000/emails/sent 500 (Internal Server Error)
load_mailbox # inbox.js:85
(anonymous) # inbox.js:24
127.0.0.1/:1 Uncaught (in promise) SyntaxError: Unexpected token < in
JSON at position 0
Promise.then (async)
load_mailbox # inbox.js:87
(anonymous) # inbox.js:6
What shows at the cmd:
Is the issue at the timestamp of the model in django? I dont understand why.
Internal Server Error: /emails/sent
Traceback (most recent call last):
File "C:\Python\Python38\lib\site-packages\django\core\handlers\exception.py", line 34, in inner
response = get_response(request)
File "C:\Python\Python38\lib\site-packages\django\core\handlers\base.py", line 115, in _get_response
response = self.process_exception_by_middleware(e, request)
File "C:\Python\Python38\lib\site-packages\django\core\handlers\base.py", line 113, in _get_response
response = wrapped_callback(request, *callback_args, **callback_kwargs)
File "C:\Python\Python38\lib\site-packages\django\contrib\auth\decorators.py", line 21, in _wrapped_view
return view_func(request, *args, **kwargs)
File "C:\Users\AG\Desktop\cs50\mail\mail\views.py", line 96, in mailbox
return JsonResponse([email.serialize() for email in emails], safe=False)
File "C:\Users\AG\Desktop\cs50\mail\mail\views.py", line 96, in <listcomp>
return JsonResponse([email.serialize() for email in emails], safe=False)
File "C:\Users\AG\Desktop\cs50\mail\mail\models.py", line 26, in serialize
"timestamp": self.timestamp.strftime("%b %-d %Y, %-I:%M %p"),
ValueError: Invalid format string
Code given by the course:
models.py:
from django.contrib.auth.models import AbstractUser
from django.db import models
class User(AbstractUser):
pass
class Email(models.Model):
user = models.ForeignKey("User", on_delete=models.CASCADE, related_name="emails")
sender = models.ForeignKey("User", on_delete=models.PROTECT, related_name="emails_sent")
recipients = models.ManyToManyField("User", related_name="emails_received")
subject = models.CharField(max_length=255)
body = models.TextField(blank=True)
timestamp = models.DateTimeField(auto_now_add=True)
read = models.BooleanField(default=False)
archived = models.BooleanField(default=False)
def serialize(self):
return {
"id": self.id,
"sender": self.sender.email,
"recipients": [user.email for user in self.recipients.all()],
"subject": self.subject,
"body": self.body,
"timestamp": self.timestamp.strftime("%b %-d %Y, %-I:%M %p"),
"read": self.read,
"archived": self.archived
}
views.py, this function i believe it returns the emails from my request:
#login_required
def mailbox(request, mailbox):
# Filter emails returned based on mailbox
if mailbox == "inbox":
emails = Email.objects.filter(
user=request.user, recipients=request.user, archived=False
)
elif mailbox == "sent":
emails = Email.objects.filter(
user=request.user, sender=request.user
)
elif mailbox == "archive":
emails = Email.objects.filter(
user=request.user, recipients=request.user, archived=True
)
else:
return JsonResponse({"error": "Invalid mailbox."}, status=400)
# Return emails in reverse chronologial order
emails = emails.order_by("-timestamp").all()
return JsonResponse([email.serialize() for email in emails], safe=False)
urls.py:
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("login", views.login_view, name="login"),
path("logout", views.logout_view, name="logout"),
path("register", views.register, name="register"),
# API Routes
path("emails", views.compose, name="compose"),
path("emails/<int:email_id>", views.email, name="email"),
path("emails/<str:mailbox>", views.mailbox, name="mailbox"),
]
My.js code where i use fetch:
document.addEventListener('DOMContentLoaded', function () {
// Use buttons to toggle between views
document.querySelector('#inbox').addEventListener('click', () => load_mailbox('inbox'));
document.querySelector('#sent').addEventListener('click', () => load_mailbox('sent'));
document.querySelector('#archived').addEventListener('click', () => load_mailbox('archive'));
document.querySelector('#compose').addEventListener('click', compose_email);
//code..
});
function compose_email() {
//code..
}
function load_mailbox(mailbox) {
// Show the mailbox and hide other views
document.querySelector('#emails-view').style.display = 'block';
document.querySelector('#compose-view').style.display = 'none';
// Show the mailbox name
document.querySelector('#emails-view').innerHTML = `<h3>${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h3>`;
//problem:
//i will change the 'sent' string in the future
fetch('/emails/sent')
.then(response => response.json())
.then(emails => {
console.log(emails);
});
}

self.timestamp.strftime("%b %-d %Y, %-I:%M %p")
You are using Python 3, but the code you were given was written for Python 2 (or by someone who didn't know all the difference with Python 3 so you might expect other hurdles down the road). They are used for non zero-padded versions of d and I.
In Python 3, -d and -I do not make sense to the parsing engine, and I don't think there are non zero-padded versions.
You can safely remove the -.

In Django, how to render both JSON data with api and info from context dictionary

In Django, I want to render a page that includes a Chart js chart that relies on data from my database. I believe I need to implement an API for this. The same page with the chart will contain other info from the database that I think is rendered with a context dictionary and {{ variable }}. I know how to do one or the the other, but not both on the same page. Here is what I have so far. In views.py:
from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
from django.views import generic
from django.views.generic import View
from .models import Article
from rest_framework.views import APIView
from rest_framework.response import Response
class ChartData(APIView):
authentication_classes = []
permission_classes = []
def get(self, request, format=None):
articles = Article.objects.all()
correlationlist = []
nocorrelationlist = []
for corr in articles:
if corr.correlation_type == "Correlation":
correlationlist.append(1)
nocorrelationlist.append(0)
elif corr.correlation_type == "No Correlation":
correlationlist.append(0)
nocorrelationlist.append(1)
else:
pass
correlation_items = correlationlist
nocorrelation_items = nocorrelationlist
data = {
"correlation_items": correlation_items,
"nocorrelation_items": nocorrelation_items,
}
return Response(data)
The Javascript I have on the page where the chart appears is:
$(document).ready(function(){
var endpoint = 'api/chart/data/'
var defaultData1 = []
var defaultData2 = [];
$.ajax({
method: "GET",
url: endpoint,
success: function(data){
defaultData1 = data.correlation_items
defaultData2 = data.nocorrelation_items
setChart()
},
error: function(error_data){
console.log("error")
console.log(error_data)
}
})
function setChart(){
CHART js code goes here
}
})
But on the page where the chart appears, I also want to include other information from the data base, such as:
The title of the article is: {{ title }}
To do this and to render the page, I think I need to create a function in views as follows:
def results(request):
myresults = Article.objects.all()
context = {'myresults': myresults}
return render(request, 'my_page_with_results_and_chart.html', context)
In short, how do you render a page that pulls data from an API for a chart, but also gets database information from the render(request, 'page.html', context) method? This is driving me crazy.

not really sure what you're asking, seems very ambiguous. From a glance it looks like, myresults = Article.objects.all() and articles = Article.objects.all() are the same and you just want to get the title from the article?
Just add articles into your data dictionary
data = {
"myresults": articles,
"correlation_items": correlation_items,
"nocorrelation_items": nocorrelation_items,
}
then just reference it in your html. You cant just do {{ title }} though like your example as 'title' is not a key to your dictionary. if 'articles' is a dictionary with title as a key, you'll need to do {{ myresults.title }} in the html. I hope i answered your question :/
I'm not sure if this is what you're asking as it seems too basic but just from your examples it looks like you are..? Anyway if you do need to make an api the Django RESTful library is really good and great documentation http://www.django-rest-framework.org/