CODEWITHSUNDEEP
javajsonajaxjax-rs
Hasitha Jayawardana
Hasitha Jayawardana

Reputation: 2436

How to place returned JSON data in a HTML Form

I need to place returned JSON data in HTML Form. I called database using web services and get JSON data. What I want is to place these JSON data into HTML input fields.

Sample JSON data (Returned as an array)

[{"username":"demo","email":"[email protected]","password":"123"}]

The code in List.jsp

<form>
    Enter Username:<br>
    <input type="text" id="usernameEn" name="username"><br>
    <button id="btnGet">Get</button>
</form>
    <br><br>
<form>
    Username:<br>
    <input type="text" id="username" name="username"><br>
    Email:<br>
    <input type="text" id="email" name="email"><br><br>
    Password:<br>
    <input type="text" id="password" name="password"><br><br>
</form>

<script type="text/javascript">
    $(document).ready(function()
    {
        $("#btnGet").click(function(event) 
        {
            event.preventDefault();

        $.ajax({
            type: 'GET',
            url:  "http://localhost:8080/WebServiceTest2/webresources/users/get/" + $('#usernameEn').val(),
            dataType: "json",
            success: function(data) {
                console.log(data);
                var userDetails = data;
                renderDetails(userDetails);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Error: ' + textStatus);
            }
        });
    });
});

function renderDetails(data)
{
    $('#username').val(data.username);
    $('#email').val(data.email);
    $('#password').val(data.password);
};
</script>

Upvotes: 1

Views: 114

Answers (1)

Robby Cornelissen
Robby Cornelissen

Reputation: 97302

Your REST service is returning an array, so to populate the form you'd have to access the first element of the array:

$('#username').val(data[0].username);
$('#email').val(data[0].email);
$('#password').val(data[0].password);

Or you could do the assignment higher up so you don't have to change your renderDetails() function:

var userDetails = data[0];

Probably best to also add a check to see whether the returned array is not empty.

Upvotes: 3

Related Questions