# JavaScript call to Netlify Function?

**URL:** <https://answers.netlify.com/t/javascript-call-to-netlify-function/104759>\
**Category:** Support\
**Tags:** lambda-functions\
**Created:** [October 19, 2023, 4:40pm UTC](https://answers.netlify.com/t/javascript-call-to-netlify-function/104759 "2023-10-19T16:40:38Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![andylemaire](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/andylemaire/32/55345_2.png) [@andylemaire](https://answers.netlify.com/u/andylemaire)\
**Post date:** [October 19, 2023, 4:40pm UTC](https://answers.netlify.com/t/javascript-call-to-netlify-function/104759/1 "2023-10-19T16:40:38Z")

</div>

Hii,

I’m experimenting with Netlify Functions, I’m trying to do an API call through a Netlify Function by submitting a form. But how do I do this?

The function is working as expected, but I’m unable to pass data to the function to use in the API call.  
Also, how can this, if the function is receiving data?

Gr,

Andy

---

<div class="post-metadata">

**Author:** ![nathanmartin](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/nathanmartin/32/30845_2.png) [@nathanmartin](https://answers.netlify.com/u/nathanmartin)\
**Post date:** [October 20, 2023, 12:56am UTC](https://answers.netlify.com/t/javascript-call-to-netlify-function/104759/2 "2023-10-20T00:56:43Z")

</div>

I’m struggling to understand which side you’re having an issue with.

To pass data with your request you could use fetch:

> **[Fetch API - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)**
>
> The Fetch API provides an interface for fetching resources (including across the network). It is a more powerful and flexible replacement for XMLHttpRequest.

> **[How to use fetch to POST form data as JSON to your API](https://simonplend.com/how-to-use-fetch-to-post-form-data-as-json-to-your-api/)**
>
> If you're using the browser Fetch API to make requests from a web page in your front end through to your back end API, at some point you might need to make requests that send data from a form on that page. The good news is that fetch supports this,...

Within the function you would retrieve the data from the `request` object, see:

> **[Get started with functions](https://docs.netlify.com/functions/get-started/?fn-language=js#write-a-function-2)**
>
> Create functions source files in TypeScript, JavaScript, and Go. Use environment variables with functions, manage dependencies, and test locally.

> **[Request - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Request)**
>
> The Request interface of the Fetch API represents a resource request.

---

<div class="post-metadata">

**Author:** ![andylemaire](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/andylemaire/32/55345_2.png) [@andylemaire](https://answers.netlify.com/u/andylemaire)\
**Post date:** [October 20, 2023, 7:21am UTC](https://answers.netlify.com/t/javascript-call-to-netlify-function/104759/3 "2023-10-20T07:21:03Z")

</div>

Hi @nathanmartin,

Ok, I might understand the struggling.

I’ll try again, I know how the fetching/posting data works in JavaScript, so JavaScript itself isn’t the problem for this.  
Receiving data through the request ok, but how can I test this during development? Since it’s server sided, it won’t log in the browser’s console or I can’t debug in the frontend.

Hope that’s more clear!

Gr,

Andy

---

<div class="post-metadata">

**Author:** ![nathanmartin](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/nathanmartin/32/30845_2.png) [@nathanmartin](https://answers.netlify.com/u/nathanmartin)\
**Post date:** [October 20, 2023, 7:50am UTC](https://answers.netlify.com/t/javascript-call-to-netlify-function/104759/4 "2023-10-20T07:50:19Z")

</div>

@andylemaire As I understand it with the [Netlify CLI](https://docs.netlify.com/cli/get-started/) you can simulate running your functions locally, and log to your terminal.

See:  
[https://cli.netlify.com/functions-dev#serving-functions-locally](https://cli.netlify.com/functions-dev#serving-functions-locally)

---

<div class="post-metadata">

**Author:** ![andylemaire](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/andylemaire/32/55345_2.png) [@andylemaire](https://answers.netlify.com/u/andylemaire)\
**Post date:** [October 20, 2023, 8:05am UTC](https://answers.netlify.com/t/javascript-call-to-netlify-function/104759/5 "2023-10-20T08:05:39Z")

</div>

@nathanmartin there’s the problem. I know how to run/execute a function and indeed I can see the log then, but I don’t see any logging when I call the function from the frontend. Then there’s no logging…

---

<div class="post-metadata">

**Author:** ![nathanmartin](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/nathanmartin/32/30845_2.png) [@nathanmartin](https://answers.netlify.com/u/nathanmartin)\
**Post date:** [October 20, 2023, 8:07am UTC](https://answers.netlify.com/t/javascript-call-to-netlify-function/104759/6 "2023-10-20T08:07:46Z")

</div>

If you’re looking for the function logs for execution on Netlify, not when simulated on your localhost, then you’d be looking for this documentation:

> **[Function logs](https://docs.netlify.com/functions/logs/)**
>
> Use Function logs to observe and troubleshoot serverless functions in your current published deploy, branch deploys, and Deploy Previews.

---

<div class="post-metadata">

**Author:** ![andylemaire](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/andylemaire/32/55345_2.png) [@andylemaire](https://answers.netlify.com/u/andylemaire)\
**Post date:** [October 20, 2023, 2:00pm UTC](https://answers.netlify.com/t/javascript-call-to-netlify-function/104759/7 "2023-10-20T14:00:58Z")

</div>

Thanks, but I am looking for logging on my localhost… 😃

---

<div class="post-metadata">

**Author:** ![nathanmartin](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/nathanmartin/32/30845_2.png) [@nathanmartin](https://answers.netlify.com/u/nathanmartin)\
**Post date:** [October 21, 2023, 8:08am UTC](https://answers.netlify.com/t/javascript-call-to-netlify-function/104759/8 "2023-10-21T08:08:00Z")

</div>

@andylemaire Then you want what I posted in the message prior.

In all cases you won’t see the logs from your functions in the browser console because your functions aren’t executing in the browser.

You will see them where the function is running, so either in your terminal when you’re running the simulated function via the Netlify CLI, or in the Netlify proffered logs when executing in the cloud.

---

<div class="post-metadata">

**Author:** ![andylemaire](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/andylemaire/32/55345_2.png) [@andylemaire](https://answers.netlify.com/u/andylemaire)\
**Post date:** [October 23, 2023, 1:37pm UTC](https://answers.netlify.com/t/javascript-call-to-netlify-function/104759/9 "2023-10-23T13:37:51Z")

</div>

@nathanmartin thanks a lot for your help so far, I’m starting to get there but not 100%.

Now my next question is, how do I access the request data? I mean, normally I’d do something like `req.body` but that doesn’t return the correct value.

While when I just print the request `req` I see this:

```auto
NetlifyRequest [Request] {
  [Symbol(realm)]: {
    settingsObject: { baseUrl: undefined, origin: [Getter], policyContainer: [Object] }
  },
  [Symbol(state)]: {
    method: 'POST',
    localURLsOnly: false,
    unsafeRequest: false,
    body: {
      stream: undefined,
      source: '{"email_address":"test@test.com"}',
      length: ...
    },
...

```

So I’m struggling to get to the email address in the Netlify function.

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [October 23, 2023, 6:16pm UTC](https://answers.netlify.com/t/javascript-call-to-netlify-function/104759/10 "2023-10-23T18:16:54Z")

</div>

@andylemaire, Netlify docs cover most of what you’ve asked (if not, let us know and we can fix it). But the new API basically uses the Web Standard Reuest object: [Request - Web APIs | MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/API/Request), so accessing the body should be `req.body` or even `req.json()` (there are more methods, please refer to the MDN docs).

When you say “not the correct value”, you might be getting a stream as request bodies are a stream by default.

---

<div class="post-metadata">

**Author:** ![andylemaire](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/andylemaire/32/55345_2.png) [@andylemaire](https://answers.netlify.com/u/andylemaire)\
**Post date:** [October 24, 2023, 7:19am UTC](https://answers.netlify.com/t/javascript-call-to-netlify-function/104759/11 "2023-10-24T07:19:28Z")

</div>

Yes I do get a stream, that’s what my problem is.

---

<div class="post-metadata">

**Author:** ![nathanmartin](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/nathanmartin/32/30845_2.png) [@nathanmartin](https://answers.netlify.com/u/nathanmartin)\
**Post date:** [October 24, 2023, 11:51pm UTC](https://answers.netlify.com/t/javascript-call-to-netlify-function/104759/12 "2023-10-24T23:51:22Z")

</div>

@andylemaire I’m not sure if you saw, but that’s as per the documentation:

![image](https://global.discourse-cdn.com/netlify/original/3X/3/2/3265a7fec2cce4196766bc29192a47da1be43e6d.png)

As @hrishikesh mentioned, you probably want `req.json()` or one of the other available methods:

 ![image](https://global.discourse-cdn.com/netlify/original/3X/e/7/e7005d6f0a40b6fb0c2a0d1b8d3bea285119531f.png)

---

<div class="post-metadata">

**Author:** ![andylemaire](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/andylemaire/32/55345_2.png) [@andylemaire](https://answers.netlify.com/u/andylemaire)\
**Post date:** [October 25, 2023, 8:00am UTC](https://answers.netlify.com/t/javascript-call-to-netlify-function/104759/13 "2023-10-25T08:00:39Z")

</div>

Then I missed something in the docs, but it helped. So thanks a lot guys!