# Calling JSON file using ajax

**URL:** <https://discourse.nodered.org/t/calling-json-file-using-ajax/57980>\
**Category:** Developing Nodes\
**Created:** [8 February 2022 09:57 UTC](https://discourse.nodered.org/t/calling-json-file-using-ajax/57980 "2022-02-08T09:57:44Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![hussain044](https://avatars.discourse-cdn.com/v4/letter/h/53a042/32.png) [@hussain044](https://discourse.nodered.org/u/hussain044)\
**Post date:** [8 February 2022 09:57 UTC](https://discourse.nodered.org/t/calling-json-file-using-ajax/57980/1 "2022-02-08T09:57:44Z")

</div>

Hello Node-RED community

Normally when we call a JSON file while doing web development, it exist in the same folder and we use get method to access it. So, when i want to call it via node red html, how can i call it?  
Also when I am trying to access via localhost server i am getting "CORS header ‘Access-Control-Allow-Origin’ missing" error.  
Please suggest a way to access JSON using ajax.

Thanks in Advance!

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 February 2022 10:37 UTC](https://discourse.nodered.org/t/calling-json-file-using-ajax/57980/2 "2022-02-08T10:37:27Z")

</div>

> [@hussain044](#):
>
> Please suggest a way to access JSON using ajax.

See the example in cookbook...  
[https://cookbook.nodered.org/http/serve-json-content](https://cookbook.nodered.org/http/serve-json-content)

And instead of using a template, you can use a "read file" node to to read the JSON from the node-red server.

http-in → read file (return string) → http response

---

<div class="post-metadata">

**Author:** ![hussain044](https://avatars.discourse-cdn.com/v4/letter/h/53a042/32.png) [@hussain044](https://discourse.nodered.org/u/hussain044)\
**Post date:** [8 February 2022 10:50 UTC](https://discourse.nodered.org/t/calling-json-file-using-ajax/57980/3 "2022-02-08T10:50:41Z")

</div>

Thank for your suggestion. I actually want to populate a drop down list using this JSON file. Which will allow me to dynamically update the drop down list in the node with the use of oneditprepare.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 February 2022 10:54 UTC](https://discourse.nodered.org/t/calling-json-file-using-ajax/57980/4 "2022-02-08T10:54:57Z")

</div>

That would have been useful info up front 😃

Put the file in `resources` then you can [`$.ajax`](https://api.jquery.com/jquery.get/) request it in `oneditprepare`

As described in the "Creating nodes" docs: [Loading extra resources in the editor : Node-RED](https://nodered.org/docs/creating-nodes/resources)

---

<div class="post-metadata">

**Author:** ![hussain044](https://avatars.discourse-cdn.com/v4/letter/h/53a042/32.png) [@hussain044](https://discourse.nodered.org/u/hussain044)\
**Post date:** [8 February 2022 14:59 UTC](https://discourse.nodered.org/t/calling-json-file-using-ajax/57980/5 "2022-02-08T14:59:04Z")

</div>

Thanks a lot Steve, its working when i store the json file in resources folder.

I believe its also possible to get the data from another localhost port but when i am trying, it i am getting "CORS header ‘Access-Control-Allow-Origin’ missing" error.  
When i send the get request for the same port from http request node i am getting a JSON output in the debug window.

How can i get access to this port from the node html file?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 February 2022 17:44 UTC](https://discourse.nodered.org/t/calling-json-file-using-ajax/57980/6 "2022-02-08T17:44:44Z")

</div>

> [@hussain044](#):
>
> I believe its also possible to get the data from another localhost port but when i am trying, it i am getting "CORS header ‘Access-Control-Allow-Origin’ missing" error.

The server serving that JSON will need to set correct headers e.g.

```auto
Access-Control-Allow-Origin : "*"

```

You could try adding

```auto
dataType: "jsonp",

```

to the ajax request.

If you have access to the s/w serving and can modifiy it, you need to enable cors.

Failing that, you could create a proxy to the other source.

In summary:  
This is not something node-red can solve for you as it is external to node-red completely (browser --\> other web server). You can not enable crossDomain calls yourself, the source must have CORS enabled for this to work.

---

<div class="post-metadata">

**Author:** ![hussain044](https://avatars.discourse-cdn.com/v4/letter/h/53a042/32.png) [@hussain044](https://discourse.nodered.org/u/hussain044)\
**Post date:** [15 February 2022 14:36 UTC](https://discourse.nodered.org/t/calling-json-file-using-ajax/57980/7 "2022-02-15T14:36:10Z")

</div>

Since I am using oneditprepare and ajax, the list is loading every time when I open the edit property window. The selected option is not being saved once i reopen the edit properties window.

I tried to give an Ajax call only when the search button is clicked, but still the item is not saving and otherwise empty.

What can i do to save the data? The serial node works on the same functionality and i tried to follow it but was unsuccessful.

Thank a lot for the information and helping me out.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [15 February 2022 14:38 UTC](https://discourse.nodered.org/t/calling-json-file-using-ajax/57980/8 "2022-02-15T14:38:25Z")

</div>

Are you saving the data to a node property in `oneditsave`?

I cant really help if I cant see your code. Is it in a repo somewhere?

---

<div class="post-metadata">

**Author:** ![hussain044](https://avatars.discourse-cdn.com/v4/letter/h/53a042/32.png) [@hussain044](https://discourse.nodered.org/u/hussain044)\
**Post date:** [15 February 2022 15:26 UTC](https://discourse.nodered.org/t/calling-json-file-using-ajax/57980/9 "2022-02-15T15:26:18Z")

</div>

I thought of using oneditsave but I still a beginner and trying to learn, therefore was unable to figure it out how to link it to the selected input.

```auto
<script type="text/html" data-template-name="first-node">
    <div class="form-row">
        <label for="node-input-userValue"><i class="fa fa-tag"></i> Select colour </label>
        <select id="node-input-userValue">
        </select>

    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/html" data-help-name="first-node">
    <p></p>
</script>
});

<script type="text/javascript">
    RED.nodes.registerType('first-node',{
        category: 'function',
        color: '#a6bbcf',
        defaults: {
            userValue: {type: '', required:true}
        },
        inputs:1,
        outputs:1,
        icon: "file.png",
        label: function() {
            return this.name||"first-node";
        },
        
        oneditprepare: function() {     

            $.ajax({
            type:'GET',
            url:'http://localhost:1880/resources/node-red-contrib-first-node/user.json',
            dataType: 'json',
            success: function (data) {
                var mySelect = $('#node-input-userValue');
                $.each(data, function(val, text) {
                    mySelect.append(
                        $('<option></option>').val(val).html(text)
                ); 
            }); 
            }
            });
        }, 
        oneditsave: function() {
        }
    });
</script>

```

and JSON file just has the frames information

```auto
{
  "val1" : "frame1",
  "val2" : "frame2",
  "val3" : "frame3",
  "val4" : "frame4"
}  

```

---

<div class="post-metadata">

**Author:** ![hussain044](https://avatars.discourse-cdn.com/v4/letter/h/53a042/32.png) [@hussain044](https://discourse.nodered.org/u/hussain044)\
**Post date:** [16 February 2022 09:08 UTC](https://discourse.nodered.org/t/calling-json-file-using-ajax/57980/10 "2022-02-16T09:08:02Z")

</div>

Sorry, this question has already been raised and you have explained in detail the solution for this [here](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/6).

Thanks.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [2 March 2022 09:08 UTC](https://discourse.nodered.org/t/calling-json-file-using-ajax/57980/11 "2022-03-02T09:08:23Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.