Question 37045 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

want to read property of object using ajax – Jquery

So I’ve been trying to read this object that was read from ajax get request but it’s not working, and I don’t know why… can anyone help me?
I’ve also try to append it to html but it’s not reading any value at all.

Jquery

$(document).ready(function () {
        $.ajax({
            url: `${siteRootUrl}api/order`,
            // datatype: 'json',
            type: "GET",
            async: false,
            success: function (res) {
    
                result = res;
                alert(result);
        
                 $.each(result, function(key,element){
                     alert(key , element)               
                 })
                    result.forEach(function (result) {
                    $('#a').append("<tr><td>" + result.text + "</td></tr>");
                 });
            },
            error: function (res) {
                alert('No Data');
            }
        });
    });

my object

[HttpGet]
      public string Get()
      {
           var myData = new
        {
            Host = @"sftp.myhost.gr",
            UserName = "my_username",
            Password = "my_password",
            SourceDir = "/export/zip/mypath/",
            FileName = 1
        };
       var bigCities = new List<string>()
                    {
                        "New York",
                        "London",
                        "Mumbai",
                        "Chicago"                    
                    };
                    // string.Join(", ", bigCities)
        return myData.ToString();
      }
Tags:

2

Answers


  1. 0

    Have you checked the response is that string or a json object
    If the response is not json we need to convert string to json

    JSON.parse
    Change this line to

     result = JSON.parse(res);
            console.log(result);

    $.each/foreach will work not work if the value is not JSON

    https://www.w3schools.com/js/js_json_parse.asp

    Login or Signup to reply.
  2. 0

    So I’ve been trying to read this object that was read from ajax get
    request but it’s not working, and I don’t know why… can anyone help
    me? I’ve also try to append it to html but it’s not reading any value
    at all.

    Well, let’s start from how to nail it towards the way to investigate. Once you would know how to split the javascript/Jquery issue life would be easier.

    Check your response in client or Browser:

    As you have only return below object:

    var myData = new
        {
            Host = @"sftp.myhost.gr",
            UserName = "my_username",
            Password = "my_password",
            SourceDir = "/export/zip/mypath/",
            FileName = 1
        };

    So in browser or client site we should expect this object as output. Let’s see if we got that.

    enter image description here

    Note: As we can see the response, data has been returned as expected. Now we need to bind it with HTML or more specifically in Table or anything else.

    Bind The Response in HTML:

    Before starting, I want to point one thing very specifically abou the data-structure You are returning single string object but searching that in loop that is $.each(result which is not correct.

    As its a single object you can directly read from the res. I did the same. See the example below:

    <div class="col-md-2 form-group">
    <button id="btnGetBackendData" class="btn btn-danger">Get Data</button>
</div>
<table class="table table-primary table-bordered mb-0" style="margin-top:10px;">
    <thead class="thead-primary">
        <tr>
            <th style="text-align:center">Host</th>
            <th style="text-align:center">UserName</th>
            <th style="text-align:center">Password</th>
            <th style="text-align:center">SourceDir</th>
            <th style="text-align:center">FileName</th>
        </tr>
    </thead>
    <tbody id="bindTableGetBackendData">
    </tbody>
</table>
@section scripts {
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script>
     $(document).ready(function() {
           $("#btnGetBackendData").click(function(e) {
               $('#bindTableGetBackendData').empty();
                    $.ajax({
                        type: "GET",
                        url: "http://localhost:5094/Controller/GetBackendData",
                        success: function(response) {
                            $('#bindTableGetBackendData').append(
                                    '<tr>'+
                                    '<td>' + response.host + '</td>'+
                                    '<td>' + response.userName +'</td>'+
                                    '<td>' + response.password + '</td>'+
                                    '<td>' + response.sourceDir + '</td>'+
                                    '<td>' + response.fileName + '</td>'+
                                   
                                    '</tr>'
                                    );

                        },
                        error: function(response) {
                            alert(response.responseText);
                        }
                    });

        });
    });
</script>
}

    Output:

    enter image description here

    Controller:

    I preferably written the controller as below however, you can continue yours one. I like this way:

    [HttpGet]
public IActionResult GetBackendData()
        {
            var myData = new
            {
                Host = @"sftp.myhost.gr",
                UserName = "my_username",
                Password = "my_password",
                SourceDir = "/export/zip/mypath/",
                FileName = 1
            };
           
            return Ok(myData);
        }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search