I am not getting correct context data in template

I know but I want to load the template at the same time and use the data in it.
I guess I will have to design a separate API for this and use it for the AJAX calls.

Ok, you didn’t show anything else in a template other than a json_script tag.

I am unable to recreate the behavior you’re reporting from the information posted here. I don’t have your donationSerializer class, so if there’s something odd going on there, I can’t tell.

If you still want to track this down, try adding the following print statments in your view:

donations_serializer=donationSerializer(donations_data,many=True)
data={"data":json.dumps(donations_serializer.data)}
print(type(data["data"])
rendered_result = render(request,'donations.html',data)
print(rendered_result.content)
return rendered_result

And then run this twice, once with each query.

here is my template

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- CSS only -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>HungerFree</title>
    <link rel="stylesheet" href={% static 'css/donationpage.css' %}>
</head>

<body onload="initMap()">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand p-3" href="/">HungerFree</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-0">
                <li class="nav-item active">
                    <a class="nav-link" href="/">Home <span class="sr-only"></span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/donate">Donate</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " href="/about">About</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-2" style="display: flex;">
                <input class="form-control mr-sm-2" type="search" placeholder="Search Location" aria-label="Search">
                <button class="btn btn-outline-warning my-2 my-sm-0 m-4" type="submit">Search</button>
            </form>
        </div>
    </nav>
    
    <div class="container-fluid">
        <div class="row">
            <div class="col p-3">
                <div class="container">
                    <a id="contributionsbtn" class="text-dark btn border border-success rounded" href="/foodrequest/donations" style="text-decoration: none;">View Available Contributions</a>
                    <a href="/foodrequest" id="formback" class="text-dark btn border border-success rounded">Back to create request</a>
                </div>
                <div class="container mt-4 form-group" id="DonationsSearch">
                    <input id="donationlocationfield" type="text" class="form-control-inline" placeholder="Enter Location To Search">
                    <button id="donationsearchbtn" class="btn btn-warning mt-1" onclick="getDonations()" type="button">Search</button>
                    <div class="form-group">
                        OR
                        <button type="button" class="btn btn-warning mt-1" id="Locationbtn" onclick="GetLocation()">Get Location</button>
                    </div>
                    <h2 id="mapinfo" class="mt-1 text-center" >!!!To accept the donation click on marker on map!!!</h2> 
                </div>
            </div>
            <div class="col p-3">
                <div id="map" class="container border border-danger"></div>
            </div>
        </div>
        {{data|json_script:"data"}}
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="{% static 'donations.js' %}"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>

    </html>

here is output like you’ve told

40.731 -73.997
<class 'rest_framework.utils.serializer_helpers.ReturnList'>
b'\n<!DOCTYPE html>\n<html lang="en">\n\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n\n    <!-- CSS only -->\n    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"\n        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />\n        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"\n        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">\n    <title>HungerFree</title>\n    <link rel="stylesheet" href=/static/css/donationpage.css>\n</head>\n\n<body onload="initMap()">\n    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">\n        <a class="navbar-brand p-3" href="/">HungerFree</a>\n        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"\n        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">\n            <span class="navbar-toggler-icon"></span>\n        </button>\n\n        <div class="collapse navbar-collapse" id="navbarSupportedContent">\n            <ul class="navbar-nav mr-0">\n                <li class="nav-item active">\n                    <a class="nav-link" href="/">Home <span class="sr-only"></span></a>\n                </li>\n                <li class="nav-item">\n                    <a class="nav-link" href="/donate">Donate</a>\n                </li>\n                <li class="nav-item">\n                    <a class="nav-link " href="/about">About</a>\n                </li>\n            </ul>\n            <form class="form-inline my-2 my-lg-2" style="display: flex;">\n                <input class="form-control mr-sm-2" type="search" placeholder="Search Location" aria-label="Search">\n                <button class="btn btn-outline-warning my-2 my-sm-0 m-4" type="submit">Search</button>\n            </form>\n        </div>\n    </nav>\n    \n    <div class="container-fluid">\n        <div class="row">\n            <div class="col p-3">\n                <div class="container">\n                    <a id="contributionsbtn" class="text-dark btn border border-success rounded" href="/foodrequest/donations" style="text-decoration: none;">View Available Contributions</a>\n                    <a href="/foodrequest" id="formback" class="text-dark btn border border-success rounded">Back to create request</a>\n                </div>\n                <div class="container mt-4 form-group" id="DonationsSearch">\n                    <input id="donationlocationfield" type="text" class="form-control-inline" placeholder="Enter Location To Search">\n                    <button id="donationsearchbtn" class="btn btn-warning mt-1" onclick="getDonations()" type="button">Search</button>\n                    <div class="form-group">\n                        OR\n                        <button type="button" class="btn btn-warning mt-1" id="Locationbtn" onclick="GetLocation()">Get Location</button>\n                    </div>\n                    <h2 id="mapinfo" class="mt-1 text-center" >!!!To accept the donation click on marker on map!!!</h2> \n                </div>\n            </div>\n            <div class="col p-3">\n                <div id="map" class="container border border-danger"></div>\n            </div>\n        </div>\n        <script id="data" type="application/json">[]</script>\n    </div>\n</body>\n<script src="https://code.jquery.com/jquery-3.6.0.min.js"\n    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>\n    <script src="/static/donations.js"></script>\n<script\n    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7SIQIVp_&v=weekly"\n    async></script>\n<!-- JavaScript Bundle with Popper -->\n<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"\nintegrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"\n    crossorigin="anonymous"></script>\n\n    </html>'
[18/Feb/2022 19:42:30] "GET /foodrequest/donations/ HTTP/1.1" 200 4150
[18/Feb/2022 19:42:30] "GET /static/css/donationpage.css HTTP/1.1" 200 115
[18/Feb/2022 19:42:32] "GET /static/donations.js HTTP/1.1" 200 2828
Not Found: /favicon.ico
[18/Feb/2022 19:42:32] "GET /favicon.ico HTTP/1.1" 404 2649
19.0512616 72.9368399
<class 'rest_framework.utils.serializer_helpers.ReturnList'>
b'\n<!DOCTYPE html>\n<html lang="en">\n\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n\n    <!-- CSS only -->\n    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"\n        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />\n        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"\n        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">\n    <title>HungerFree</title>\n    <link rel="stylesheet" href=/static/css/donationpage.css>\n</head>\n\n<body onload="initMap()">\n    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">\n        <a class="navbar-brand p-3" href="/">HungerFree</a>\n        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"\n        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">\n            <span class="navbar-toggler-icon"></span>\n        </button>\n\n        <div class="collapse navbar-collapse" id="navbarSupportedContent">\n            <ul class="navbar-nav mr-0">\n                <li class="nav-item active">\n                    <a class="nav-link" href="/">Home <span class="sr-only"></span></a>\n                </li>\n                <li class="nav-item">\n                    <a class="nav-link" href="/donate">Donate</a>\n                </li>\n                <li class="nav-item">\n                    <a class="nav-link " href="/about">About</a>\n                </li>\n            </ul>\n            <form class="form-inline my-2 my-lg-2" style="display: flex;">\n                <input class="form-control mr-sm-2" type="search" placeholder="Search Location" aria-label="Search">\n                <button class="btn btn-outline-warning my-2 my-sm-0 m-4" type="submit">Search</button>\n            </form>\n        </div>\n    </nav>\n    \n    <div class="container-fluid">\n        <div class="row">\n            <div class="col p-3">\n                <div class="container">\n                    <a id="contributionsbtn" class="text-dark btn border border-success rounded" href="/foodrequest/donations" style="text-decoration: none;">View Available Contributions</a>\n                    <a href="/foodrequest" id="formback" class="text-dark btn border border-success rounded">Back to create request</a>\n                </div>\n                <div class="container mt-4 form-group" id="DonationsSearch">\n                    <input id="donationlocationfield" type="text" class="form-control-inline" placeholder="Enter Location To Search">\n                    <button id="donationsearchbtn" class="btn btn-warning mt-1" onclick="getDonations()" type="button">Search</button>\n                    <div class="form-group">\n                        OR\n                        <button type="button" class="btn btn-warning mt-1" id="Locationbtn" onclick="GetLocation()">Get Location</button>\n                    </div>\n                    <h2 id="mapinfo" class="mt-1 text-center" >!!!To accept the donation click on marker on map!!!</h2> \n                </div>\n            </div>\n            <div class="col p-3">\n                <div id="map" class="container border border-danger"></div>\n            </div>\n        </div>\n        <script id="data" type="application/json">[{"Name": "abcd", "UserID": "abcdabcd", "Place_id": "ChIJexAZtTbB5zsRyA--VJe5UoQ", "Lat": "19.0744857000", "Lng": "72.997784099999990"}, {"Name": "deepak patil", "UserID": "abcdabcd", "Place_id": "ChIJ1RH6XprI5zsR-XiacqeOcpA", "Lat": "19.0726295000", "Lng": "72.884472100000000"}, {"Name": "deepak Patil", "UserID": "adfasdfasd", "Place_id": "adfaldkfjlkasdjfl", "Lat": "19.0512620000", "Lng": "72.936840000000000"}]</script>\n    </div>\n</body>\n<script src="https://code.jquery.com/jquery-3.6.0.min.js"\n    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>\n    <script src="/static/donations.js"></script>\n<script\n    src="https://maps.googleapis.com/maps/api/js?key=AIzhJAZlcStIVp&v=weekly"\n    async></script>\n<!-- JavaScript Bundle with Popper -->\n<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"\nintegrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"\n    crossorigin="anonymous"></script>\n\n    </html>'
[18/Feb/2022 19:42:49] "GET /foodrequest/donations/?lat=19.0512616&lng=72.9368399 HTTP/1.1" 200 4564

here you can see that rendered_result.content has the data

Yep, I can see that the data is in the second instance but not in the first.

So the only unknown left is the donationSerializer.

It’s really beginning to look like there’s some type of data-type error with what donationSerializer is returning - there’s just nothing else going on here that could explain this.

Both .all() and .filter() are going to return querysets, so there’s nothing fundamentally different between the two - especially if they’re both returning the same results.

donationSerializer :

class donationSerializer(serializers.ModelSerializer):
    class Meta:
        model=donation
        fields=('Name','UserID','Place_id','Lat','Lng')