Cannot seem to get JSON data from an API that I have built on another server and display it to the screen

I have built an API using Node, MongoDB and JavaScript. It is working perfectly. I can GET, PUT, POST and DELETE JSON data. My issue arises when I try to do these things from the front end of my application which I am building on another server. Both the of the servers that I have mentioned are localhost but on different ports which is why I cannot provide links to them. I am using React as my front end framework with JavaScript.

Here is the code for my index.html file on the front end:

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>React Application Learning</title>
</head>
<body>
    <div id="list-wrapper"></div>

    <script src="/app/bundle.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
<script>
    $(document).ready(function(){

        $('#button').on('click', function(){
            document.write('Button Pressed');

            $.ajax({
                url: 'http://localhost:3000/api/organisations',
                dataType: 'jsonp',
                success: function(data){
                    console.log(data);
                    var text = '';
                    var len = data.length;
                    for(var i=0;i<len;i++){
                        dataSet = data[i];
                        text += '<p>' + dataSet['text'] + '</p>'                           
                    }
                    document.write(text);
                    console.log(text);
                }
            });
        });
    });
</script>

</html>

Here is my index.js file containing the ListComponent:

var React = require('react');
var ReactDOM = require('react-dom');

//creating a component
var ListComponent = React.createClass({

    render: function(){
        return(
            <div>
                <h1>Home Page</h1>
                <p>This is the list component</p>
                <button id="button">Add Student</button>
            </div>
        );
    }
});

ReactDOM.render(<ListComponent/>, document.getElementById('list-wrapper'));

After clicking the Add Student button the document is as follows:

Button Pressed
undefined
undefined

The console however does suggest that I have received the JSON data correctly as it shows me the two objects that have been returned.

This makes me believe that there is an error with the format or type of the data which will not allow me to display it as it says that it is undefined.

I may be processing this data wrong when trying to serve it to the user? Any advice on how this data can be correctly displayed to the user would be of great use.

I would also be lost when it comes to using the API to POST, DELETE or PUT data.

I do not want my question to be any more general but any advice on how to interact with the API in a clean and effective manner when they are situated on different servers using JavaScript would be of create use.

Solution

Where you are doing this line of code:

text += '<p>' + dataSet['text'] + '</p>'

You're trying to access the property text of the object dataSet. This does not exist on either objects so it will return undefined.

If you changed it to

text += '<p>' + dataSet['name'] + '</p>'

You'll see you'll get name undefined output