显示有关JSON用户的信息

问题描述 投票:0回答:1

创建一个jQuery事件处理程序,它将启动Ajax请求,检索数据并提取所需的信息。我需要在<div id="results">中根据输入的用户名显示用户名和电子邮件。它还需要在<div id="results">中说,如果根据输入找不到用户名,则无法找到用户。

如果用户JSON文件我正在访问https://jsonplaceholder.typicode.com/users/

<script>
$(document).ready(function() {
$("#btnSubmit").click(function(){
    var username = $("#user").val();
    $.ajax( {
        url: 'https://jsonplaceholder.typicode.com/users/',
        method: 'GET'
    }).then(function(data) {
        $.get(username);
        $.each(data, function(index, user) {
            if (user['username'] == username) {
                $('#results').text(''+ user.name +' ('+user.email +')');
            } else {
                $('#results').text('Sorry, no user could be found with the username '+ username+ '');
            }


        });

    });
}); 
});
</script>

我能够根据用户名找到用户,但我无法弄清楚我的下一步是获取用户名和电子邮件。

javascript jquery html json ajax
1个回答
0
投票

你不需要$ .get(),只需使用JS循环。此代码段有效:

$(document).ready(function() {
    $("#btnSubmit").click(function(){
        var username = $("#user").val();
        $.ajax( {
            url: 'https://jsonplaceholder.typicode.com/users/',
            method: 'GET'
        }).success(function(data) {

            // Data is an array, let loop through each, to get object data
            for (var i = 0; i < data.length; i++) {

                // Get object's property values
                var dataUsername = data[i].username;
                var dataUserEmail = data[i].email;

                // Output user data if user is matched
                if(dataUsername.toLowerCase() == username.toLowerCase()){
                    $('#results').text(dataUsername + ' ' + dataUserEmail);
                }
            }
        });
    }); 
});
© www.soinside.com 2019 - 2024. All rights reserved.