在 HTML 上显示 JsonResponse 2 表的 JavaScript Fetch

Question

我现在正在学习 JavaScript，我正在尝试显示来自 2 个表的数据，即用户个人资料的个人资料和帖子。

查看a.py

@csrf_exempt
@login_required
def profile(request, user_id):
    try:
        user = User.objects.get(pk=user_id)
        prof = Profile.objects.get(user=user)
        posts = Post.objects.filter(author=user)
    except prof.DoesNotExist:
        return JsonResponse({"error": "Author not found."}, status=404)
    
    # Return profile contents
    if request.method == "GET":
        return JsonResponse({
            "prof": prof.serialize(),
            "posts": [post.serialize() for post in posts]
        }, safe=False)
    
    # Update follower
    elif request.method == "PUT":
        data = json.loads(request.body)
        if data.get("follower") is not None:
            prof.follower = data["follower"]
        prof.save()
        return HttpResponse(status=204)

    # Profile must be via GET or PUT
    else:
        return JsonResponse({
            "error": "GET or PUT request required."
        }, status=400)

urls.py 路径（“个人资料/ int：user_id”，views.profile，名称=“个人资料”）

这是API视图 API

我尝试使用 JavaScript 显示 index.html 上的数据。 索引.js

function load_profile(author_id) {
    // Load posts list
    fetch(`/profile/${author_id}`)
    .then(response => response.json())
    .then(prof => {
        // Print profile
        console.log(prof);

        const content_profile = document.createElement('div');
        content_profile.className = "content_profile";
        
        const user = document.createElement('p');
        user.innerHTML = `<h3>${prof.prof.user}</h3>`;
    
        const followers = document.createElement('p');
        followers.innerHTML = `Follower: ${prof.prof.followers}`;

        const following = document.createElement('p');
        following.innerHTML = `Following: ${prof.prof.following}`;

        const a = document.createElement('a');
        a.className = "btn btn-primary";
        a.innerHTML = "Follow";
   
        content_profile.append(user, followers, following, a);
        document.querySelector('#profile').append(content_profile);
    })
    .then(datas => {
        // Print datas
        console.log(datas);

        datas.forEach(data => {
            const list_item = document.createElement('ul');
            list_item.className = "list-group";

            const data_author = document.createElement('li');
            data_author.className = "list-group-item list-group-item-action";
            data_author.innerHTML = data.data.author+" at "+data.data.timestamp+" say:";
            data_author.addEventListener('click', () => load_profile(data.data.author_id));

            const data_content = document.createElement('li');
            data_content.className = "list-group-item";
            data_content.innerHTML = data.data.content;

            const data_like = document.createElement('li');
            data_like.className = "list-group-item list-group-item-action";
            data_like.innerHTML = data.data.like+" Likes";

            list_item.append(data_author, data_content, data_like);
            document.querySelector('#postbox').append(list_item);
        })
    })
}

index.html

{% extends "sinpage/layout.html" %}
{% load static %}

{% block body %}
<div class="container">
    <div class="row">
        <div class="col" id="userpage">
            <h2>{{ request.user.username }}</h2>
            <div id="postit">
                <form id="compose-form">
                    {{form.as_p}}
                    <input type="submit" class="btn btn-primary" value="Post">
                </form>
            </div>
        </div>
        <div class="col" id="profile"></div>
        <div class="col" id="postbox"></div>
    </div>
</div>
{% endblock %}

{% block script %}
    <script src="{% static 'sinpage/index.js' %}"></script>
{% endblock %}

因此个人资料数据显示，但帖子数据没有显示。这是我第一次使用 JavaScript 显示 2 个数据，我想我做错了？任何指针表示赞赏。谢谢。

Answer 1

示例

function load() {
    fetch('https://my/api/call')
        .then(response => response.json())
        .then(data => {
            // do something with data.profile
            return data
        })
        .then(data => {
            // do something with data.posts
        })
}