Calling JSON file using ajax

Developing Nodes
1

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!

2

See the example in cookbook...
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

3

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.

4

That would have been useful info up front :smiley:

Put the file in resources then you can $.ajax request it in oneditprepare

As described in the "Creating nodes" docs: Loading extra resources in the editor : Node-RED

5

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?

6

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

Access-Control-Allow-Origin : "*"

You could try adding

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.

7

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.

8

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?

9

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.

<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

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

Sorry, this question has already been raised and you have explained in detail the solution for this here.

Thanks.

11

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