Displaying the result of a GET request with JS and REST

Question

I'm trying to get and display a field in a SharePoint list

using a Content Editor Web Part. This is just proof of concept, I want the CWP to display the Title (the currency) and the Currency Description. I think I just need a tweak and want to understand what I'm doing wrong. The var query URL displays the title fine.

Ultimately what I want to do is to store the returned value from the Exchange Rate column so that when a user selects a drop don in a separate list and an amount it will convert by the Exchange rate.

Any help is appreciated. Code below:

<script type="text/javascript">


    DisplayExchangeRate();

    function  DisplayExchangeRate()
    {
        var listName = "Currency Exchange Rates";
        var titleField = "Title";
        var rateField = "Currency Description";



        var query = "http://collaboration-dev.norgine.com/sites/it/Tools/IT-    Contracts/_vti_bin/listdata.svc/CurrencyExchangeRates? 
 $select=Title,ExchangeRate&$filter=Title eq 'Dollars'";
        var call = $.ajax({
            url: query,
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"
            }       
        });
        call.done(function (data,textStatus, jqXHR){
        $.each(data.d.results, function (i, result) {


                $("#CurrencyExchangeRatesTitle").text(result.Title);
                $("#CurrencyExchangeRatesCurrencyDescription").html 
    (result.CurrencyDescription);

        });

    });
        call.fail(function (jqXHR,textStatus,errorThrown){
            alert("Error retrieving Tips: " + jqXHR.responseText);
        });

    }



</script>

Answer 1

I don't believe you can put JavaScript directly in a Content Editor Web Part. Try using a Script Editor Web Part instead (housed in the same category of web parts as the CEWP), or pointing your CEWP to a local HTML page with the JavaScript.

http://info.summit7systems.com/blog/dont-script-in-the-wrong-web-part

Also, it looks like you're using JQuery. Do you have a reference to that library elsewhere that is loading successfully?

Answer 2

Below is my Working code , I have saved this code in a text file, and uploaded that file in "Site Assets" library and pointed my CEWP to this code file.

<script type="text/javascript" src="https://test.sharepoint.com/sites/devsite/SiteAssets/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var i,result;
$('#getEmployee').click(function () {
var dispalyResults="";
$.ajax({
  url: "https://test.sharepoint.com/sites/devsite/_api/web/lists/getbytitle('Employee')/items",
    method: "GET",
    headers: { "Accept": "application/json;odata=verbose" },
    success: function (data) {
        var jsondata = JSON.stringify(data);
        result = JSON.parse(jsondata).d.results;
        for (i = 0; i < result.length; i++) {
            dispalyResults+="<p><h1>"+ result[i].ID + "   " + result[i].Title +"</h1></p>"; 
        }

     $('#displayResults').html(dispalyResults);
    },
    fail: function () {
        alert("Response fails");
    }
})
})

})
</script>
<input type="button" value="GET" name="GET" id="getEmployee"/>
<div id="displayResults"></div>

I have created a button and a DIV tag. When i click the button , it will display the list item Title and ID inside the DIV tag.