javascript: Not sending array with fetch api

Question

I am trying to send array with fetch api. but it goes null.

javascript:

const url = "/TMF/DownloadFolderFilesAsZip";

        var data = {
            method: "POST",
            body: JSON.stringify({
                folderFiles: foldersFiles
            }),
            headers: new Headers({
                'content-type': 'application/json'
            })
        }

        fetch(url, data)
            .then(resp => resp.blob())
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.download = "document" + ".zip";
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
            })
            .catch(() => alert(''));

data:

(2) [{…}, {…}]
0: {fileId: '', folderId: 'e48634fb-23eb-45fa-b974-c83a3032db63'}
1: {fileId: '', folderId: 'c3bdd287-4461-4b5e-95c9-4048e8f34e58'}
length:2
[[Prototype]]: Array(0)

controller:

[HttpPost]
        public async Task DownloadFolderFilesAsZip([FromBody] List<TmfZipFolderFiles> folderFiles)
        {
           ......
        }

c# class:

public class TmfZipFolderFiles
    {
        public Guid fileId { get; set; }
        public Guid folderId { get; set; }
        public Guid tenantId { get; set; }
        public Guid userId { get; set; }
    }

I can't send the array with the above codes. null data goes to the controller. How can I send the array?

First of all you should check in the developer tools of your browser what *really* is sent to the server. The sending ode per se looks fine (assuming that `foldersFiles` has the correct value). If your requests contains the expected body, the error might also be on the backend. But I can't help you with that, because I never worked with c# controllers — derpirscher, Apr 05 '23 at 07:15

score 1 · Answer 1 · answered Apr 05 '23 at 07:22

1

The model you've inserted into the body is an object containing an array {"folderFiles":[...]}. Your backend is waiting for the array directly. e.g.: [{...},{...}] You should try editing the body of data.

JSON.stringify(foldersFiles)

answered Apr 05 '23 at 07:22

Emre Akdemir

465
3
10

I did what you said. but again it didn't. – Batu han Apr 05 '23 at 07:26
Is your Controller configured to support JsonSerialize? Are you working on an API project or an MVC project? If MVC, what does the Controller inherit from? – Emre Akdemir Apr 05 '23 at 07:36

score 0 · Answer 2 · answered Apr 05 '23 at 11:06

0

I reproduced your issue in my side and after I changed public Guid fileId to public string fileId, and using JSON.stringify(foldersFiles), it worked for me.

answered Apr 05 '23 at 11:06

Tiny Wang

10,423
1
11
29

yes. thank you. such data is coming. but I need to send it as guid not string. how can I do? – Batu han Apr 07 '23 at 07:08
just like you know, javascript only have `var` and don't have a date type GUID, so if you send a GUID in the fetch request, it would send as a string. so I'm afraid you need to convert string to Guid in your asp.net core web api, see [this question](https://stackoverflow.com/questions/104850/test-if-string-is-a-guid-without-throwing-exceptions) about the converting. – Tiny Wang Apr 07 '23 at 07:16
okay. thank you. did you use azure? to keep files as blobs – Batu han Apr 07 '23 at 17:13
sounds like another question, I tried to follow micrsoft document to store images in azure storage blob. – Tiny Wang Apr 08 '23 at 11:47
Yes, this is a different issue. I'm saving a file to Azure. but I can't pull it as bytes. I found it somewhere. but unfortunately it doesn't work for me. – Batu han Apr 10 '23 at 06:40
Hi, since it's a different question, you'd better to create a new question with related tags so that corresponding experts can see it and share their ideas. All I know about it is [like this](https://stackoverflow.com/a/73543042/14574199) – Tiny Wang Apr 10 '23 at 06:49

javascript: Not sending array with fetch api

2 Answers2