JavaScript/JQuery to retrieve JSON data from Web API

Question

The output from the Web API is:

<string>[{"FNAME":"Prasy","LNAME":"San"}]</string>

And I need to retrieve FNAME from the API using JavaScript/JQuery.

I tried using the code below:

$(document).ready(function () {             
       $.ajax({
           type: 'GET',
           url: 'http://localhost:63456/api/LoginUser',
           data: { q: $(this).val(), format: 'json', pretty: 1 },
           jsonpCallback: 'jsonp',
           dataType: 'jsonp'
       }).then(function (data) {
           alert(FNAME);
       });
   });

I am using the below method in the APIController class

public string Userloginvalues()
    {

        List<LoginUser> objModel = new List<LoginUser>();
        OracleConnection con;
        OracleDataAdapter da;
        DataSet ds = new DataSet();
        con = new OracleConnection(ConfigurationManager.ConnectionStrings["ConString"].ToString());
        con.Open();
        da = new OracleDataAdapter("select FNAME,LNAME from ACCOUNTS where USERNAME=" + "'" + username + "'" + "  and PASSWORD=" + "'" + password + "'", con);
        da.Fill(ds);
        foreach (DataRow dr in ds.Tables[0].Rows)
        {
            FNAME_C = dr[0].ToString();
            LNAME_C = dr[1].ToString();

            objModel.Add(new LoginUser{ FNAME = FNAME_C,LNAME = LNAME_C});
        }
        con.Close();

        string json = Newtonsoft.Json.JsonConvert.SerializeObject(objModel);
        return json;
    }

Where exactly are you getting stuck? Calling the api, or parsing the response? — Smeegs
– Smeegs, Commented Jun 10, 2014 at 14:32
I am not getting any error msg but not displaying the alert box. — user3692432
– user3692432, Commented Jun 10, 2014 at 14:34

azhar_SE_nextbridge · Accepted Answer · 2014-06-10 14:48:53Z

1

Using Jquery you can do like this to get any field you want(using same format of data you are getting).

var $string=$('<string>[{"FNAME":"Prasy","LNAME":"San"}]</string>');
var jsonData=JSON.parse( $string.text());    
$(jsonData).each(function(i,val){
           console.log(val.FNAME);
})

Working fiddle http://jsfiddle.net/a8qWg/

edited Jun 10, 2014 at 14:48

azhar_SE_nextbridge

3044 silver badges19 bronze badges

answered Jun 10, 2014 at 14:38

Ninad

4332 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3692432 Over a year ago

Thanks for this answer but I need to use the API url to retrieve the data. Let me know

Chickenrice · Accepted Answer · 2014-06-10 16:30:53Z

0

Are you doing a cross-domain API invokation? I notice that you're using "JSONP" technique. Currently the output of the Web API is not valid for JSONP.

<string>[{"FNAME":"Prasy","LNAME":"San"}]</string>

It will cause the syntax error. Try to return valid JSON data with a function call wrapped around it.

callback({result:[{"FNAME":"Prasy","LNAME":"San"}]});

Let's make API return a proper response for JSONP :

Server side (PHP) :

<?php
  header("Content-Type: application/javascript");

  $callback = $_GET("callback");
  $data = '{result:[{"FNAME":"Prasy","LNAME":"San"}]}';

  echo $callback."(".$data.");";
?>

Server side (ASP.net):

public string Userloginvalues()
{

    List<LoginUser> objModel = new List<LoginUser>();
    OracleConnection con;
    OracleDataAdapter da;
    DataSet ds = new DataSet();
    con = new OracleConnection(ConfigurationManager.ConnectionStrings["ConString"].ToString());
    con.Open();
    da = new OracleDataAdapter("select FNAME,LNAME from ACCOUNTS where USERNAME=" + "'" + username + "'" + "  and PASSWORD=" + "'" + password + "'", con);
    da.Fill(ds);
    foreach (DataRow dr in ds.Tables[0].Rows)
    {
        FNAME_C = dr[0].ToString();
        LNAME_C = dr[1].ToString();

        objModel.Add(new LoginUser{ FNAME = FNAME_C,LNAME = LNAME_C});
    }
    con.Close();

    string json = Newtonsoft.Json.JsonConvert.SerializeObject(objModel);

    if(!string.IsNullOrEmpty(Request.QueryString["callback"]))
    {
      json = Request.QueryString["callback"] + "("+json+");";
    }
    return json;
}

Client side

$.ajax({
  type: 'GET',
  url: 'http://localhost:63456/api/LoginUser',
  data: { q: $(this).val(), format: 'json', pretty: 1 },
  jsonpCallback: 'jsonp',
  dataType: 'jsonp'
}).then(function(data){
  alert(data.result[0].FNAME);
});

edited Jun 10, 2014 at 16:30

answered Jun 10, 2014 at 15:31

Chickenrice

5,7372 gold badges24 silver badges21 bronze badges

6 Comments

user3692432 Over a year ago

Yes, I implemented the API in Asp.net but UMBRACO CMS system is going to use the API to get the FNAME.

Chickenrice Over a year ago

You could try to return a valid "JSONP" response no matter what language you're using.

user3692432 Over a year ago

Do you have any sample code or helping link that I can refer.

user3692432 Over a year ago

The updated code also not returning the alert box and not showing any error msg. Any idea?

Chickenrice Over a year ago

Append callback=? to your API url and visit it directly on the browser. What's the response?

|

Collectives™ on Stack Overflow

JavaScript/JQuery to retrieve JSON data from Web API

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related