Using Javascript and AJAX in the Fetch()API method: returns no values as a response

Ok, but we need to be focused here on the current objective.

You need to create a view that is going to return the desired data. To do that, you need to identify what the data is that needs to be returned. If your current view is returning the correct data, great! We can move forward from there. If the current view is not returning the correct data, then we need to fix that.

The view is not returning the correct data
… ??

That just returns us to my previous question:

For now. The data that needs to be returned is from the Assignments Model. Each field name from this model is an instance that could be returned because the user has the option of selecting any of this models fields.

As worded, this doesn’t make sense to me. Your view is going to return an instance of the model. That instance of the model is going to contain all fields within that instance of the model.

If this is really what you mean, then we may need to take a step back to the existing page and ask you to clarify what it is you’re looking to do on that page.

What you have said here makes more sense than what I had just replied. An instance = containing all fields.
Please do ask me anything you think might help regarding that or what I am trying to achieve on the existing page. ??

I am fiddling with it and trying all the possibilities I can think of.

To clarify on the ‘Task Schedule’ page - which the screenshot above is. I would like any of the fields from a user selection from a choice of any of the fields in the Assignments Model. I would like that selected value to be output into the table at the bottom of the page.

This is your system. This is your data. I’m not in a position to define or identify your requirements. You need to define what data needs to be retrieved from your view.

Right now, what you have is the submission of a string which will be used to find an instance of Assignments by filtering that model by the screening_results_reports field by the submitted value. The view will return that instance of Assignments.

If this is not what you are looking for, then you need to specifically identify what it is that needs to be returned. That’s not something I can help you with.

I agree with this and that seems like it follows on you r explanation of why the data variable was going to be used in the first place. I think I understand what you mean by the ‘submission of a string’ and by ‘filtering that model’.

I am struggling to understand why the output remains <MultiValueDict: {}>.
I would ask about the API, but you want me to concentrate on the view.

I am sure that the method you mention above makes sense as is applicable to this project.
I have literally been fiddling with it, including what the different related Model Field names and ID’s could change, but nothing.

What output? Perhaps I’m not looking at the current version of the view. Can you repost the view please?

I honestly thought I’d be working with an instance of Assignments and yes filtering that model by the field name from that Model ‘screening_results_reports’. Then I believe that submitted value will be the value that is selected in the dropdown selection.
Right ? & The view getfirstAssignmentSelected should be what returns the instance. my question is how do I display that value in my HTML table (with what code). Also my question is if the view is returning an instance of Assignments - then what ID or name calls this and makes it work ?
I will show you the view for the page, the view I have that I thought was necessary for the API to work and the getfirstAssignmentSelected view - I am not sure how this view relates to that point where the recognized value made by the user selection is displayed in the HTML table.

TaskSchedule page view:

def TaskSchedule(request):
    context = {}

    # create object of form
    form = FormData(request.POST or None, request.FILES or None)

    # check if form data is valid
    if form.is_valid():
        #save the form data to model
       form.save()

    context['form'] = form
   

    form = FormData(request)

return render(request, 'getfirstAssignmentSelected', context)

# if form.is_valid():
       # form.save()

TaskScheduleViewSet:

class TaskScheduleViewSet(viewsets.ModelViewSet):
    # define queryset
    queryset = Assignments.objects.all()
    queryset.save()
    """
    q1 = Assignments(assignment = "screening_results_reports")
    q1.save()
    q2 = Assignments(assignment = "ighid_12046")
    q2.save()
    q3 = Assignments(assignment = "ighid_12022")
    q3.save()
    q4 = Assignments(assignment = "amc_099")
    q4.save()
    q5 = Assignments(assignment = " sll_qHPV")
    q5.save()
    q6 = Assignments(assignment = "colpo_LEEP")
    q6.save()
    q7 = Assignments(assignment = "clinical_admin_stocktake")
    q7.save()
    q8 = Assignments(assignment = "patient_scheduling")
    q8.save()
"""
    # specify serializer to be used 
    serailizer_class = ScheduleAppSerializer 
    

getfirstAssignmentSelected view:


def getfirstAssignmentSelected(request, lastAssignemntSelected):

    data = Assignments.objects.values().get(assignment = getfirstAssignmentSelected)
    response = {
    'screening_results_reports': data.screening_results_reports,
    'ighid_12046': data.ighid_12046,
    'ighid_12022': data.ighid_12022,
    'amc_099': data.amc_099,
    'sll_qHPV': data.sll_qHPV,
    'colpo_LEEP': data.colpo_LEEP,
    'clinical_admin_stocktake': data.clinical_admin_stocktake,
    'patient_scheduling': data.patient_scheduling
    }

    
    response = JsonResponse(data, status=200)
    return JsonResponse(response)

The general answer is that you’re replacing the innerHTML of an element with a value. But you already know that from above.

The issue here is that this cannot be specifically answered without knowing what the data is that you are retrieving and into which html element it needs to be placed. And that is two separate questions. First, we’re working to identify what the data is to be added to the page. Once we have that, we can work on identifying how to get it into the desired element.

The URL in the Fetch sends a request to a url. Your urls definition assigns that url to a view. The view retrieves the data and returns it to the caller.
It is up to you to identify what data needs to be passed from the JavaScript to the view, and how it is to be passed. In the simple/general case, it’s done by passing a parameter in the url itself - which is what you’re currently doing.

I don’t see how this can work. (I would expect this to throw an error when called.)

The parameter you are passing into the function is named lastAssignmentSelected, but the variable you are using in your query is getfirstAssignmentSelected, which is not the data being passed in.

That line should be:

Also, your block of code at:

isn’t actually doing anything and can be removed.

yes, ok. I think I was fiddling with this, but now it is back to what it should be.

And so, when you are issuing the fetch from the browser, are you now getting back a valid response?

RIght. So… isn’t the data that I would like to add to the page, simply the descriptive name of each of these fields in the Assignments model, without additional parameters ? Then, the target element the ‘td’ of ‘Table3’ element because I’d like the column that returns ‘Assignments’ in ‘Table1’ to populate each one of those row cells in ‘Table3’.

I am running the app now to see if the fetchAPI method is returning a valid response.

No, that is not necessarily true. In fact, it’s probably not true. At a minimum, it’s going to be an attribute of the json object created from the response received.

You may only have one element in a page with a given id attribute. If you’re looking to populate the same data in multiple locations, you either need to assign individual ids to each, or use some other attribute to identify the set of elements to be updated - and iterate through that set to update each one.

k. I am also trying to follow what you are saying here. I intended to use an attribute ‘assignment’ as it is a declarative models.CharField. I have tried to rename the data.json content to ‘assignment’.