Question

我有两个函数用于从服务器端提取JSON，然后将其显示为HTML。

从路由处理程序中提取数据的第一个函数是成功提取数据并使用JSON.parse（）成功解析数据并向控制台显示所需信息而不会出现问题。我没有和ajax或路线处理问题......

以下是我在名为“projectInfo（）”的函数中首先处理JSON的方法：

        projInfo = JSON.stringify(data); 
        console.log("DEBUG DONE WITH CAPTURING project_info DATA: " );

        // This console.log() prints the JSON string 
        //   successfully pulled from route handler
        // var projInfo is a local string var declared in the scope of 
        //   this first function
        console.log("var projInfo: " + projInfo);

        // parse JSON data in projInfo and store in string var p
        // string var p is a local var declared inside of the scope 
        //   of this function
        p = JSON.parse(projInfo);
        console.log("Parsed Project JSON: " + p.Project);

        // update "Global" pInfo with the value of the JSON data for 
        //   "Project" as needed
        pInfo = p;
        console.log("What is inside of pInfo???: " + pInfo);
        // This last console.log prints [object Object] to console
        // How do I pul the value out of this Object?

第二个函数调用第一个函数，以便用我需要的解析后的JSON数据更新全局变量，然后将全局变量的数据显示给我试图显示的DOM元素。

以下是我在我的函数“loginFun（）”中尝试使用JSON对象更新全局变量的方法：

               // Call projectInfo() in order to update Global pInfo  
               //   with the needed project info
                projectInfo();

                // This console.log() prints nothing...?
                console.log("projectInfo var data should be aa2: " + pInfo);


                document.getElementById("userBar").style.display = "";

                // This is where I try to Display pInfo in the DOM but I only get Undefined...?
                document.getElementById("signedinas").innerHTML = "<font face=\"verdana\" size =\"4\" color=\"white\">Logged in as: " + username + " Project: " + pInfo + " </font>";

当我JSON.parse（）第一个函数中的数据运行一个console.log（）语句时，我得到所需的数据从函数本地打印到函数我使用ajax和我获取我的JSON验证函数实际上正在做我需要的功能，以便在获得[object Object]输出之前该部分是好的。

当我从第二个函数调用此函数然后尝试使用应该存储数据的全局变量时，我遇到了问题。

当我尝试将全局变量与所需数据一起使用时，我得到一个'undefined'...

我还尝试将已经在第一个函数中解析的数据返回到storehttps：//codepen.io/lopezdp/pen/owKGdJ在第二个函数中返回到局部变量的值但我仍然得到'undefined' ”。

如果您希望查看这两个函数的完整代码，我已将它们放在CodePen上，以便更轻松地使用它：

https://codepen.io/lopezdp/pen/owKGdJ

如何让我的项目数据显示在我的DOM元素中？

编辑：我使用的JSON数据如下所示：

{"User":"aa2","Owner":"aa2_role","Status":"locked","Port":"5432","Description":"Transferred from CFS01 on Jun29","Project":"aa2","Server":"localhost"}

Answer 1

我重写了这样的登录功能，它对我有用。我也删除了projectInfo（）函数！

var allMn = [];
var tags = [];
var pInfo = '';

function loginFun() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;

if (username == "" || password == "") {
    alert("Required fields cannot be left blank.");
} else {
    $.ajaxSetup({
        cache: false
    });

    $.ajax({
        type: 'GET',
        url: 'http://139.169.63.170:' + port + '/login/' + username + "zlz" + password,       
        cache: false,   

        success: function (data) {

            // NEED SUB ROUTINE HERE FOR AJAX CALL DPL
            // Make async call to ccdd tool database to get new data
            // This collects allMn[] data!!!
            getMnJson();            
            // END SUB ROUTINE HERE

            // Checks to make sure user is logged in if not
            // the condition redirects user to loginFun()
            if (data.search("HTTP ERROR: ") != -1) {
                alert("Login Failed.");
                document.getElementById('username').value = "";
                document.getElementById('password').value = "";
                document.getElementById('searchResults').innerHTML = "Login Failed";
                document.getElementById('searchRBar').style.display = "";
                loginFun();
            } else {

            login = 1;

                // Call projectInfo() in order to update pInfo with the needed project info
                //projectInfo();



                var projInfo = '';
                var p = '';

                // Get all Mn Data on startup tp display in DOM -DPL
                $.ajax({
                    type: 'GET',
                    url: 'http://139.169.63.170:' + port + '/role',
                    dataType: 'json',
                    cache: true,    

                    success: function (data) {

                        // projInfo = JSON.stringify(data); 
                        console.log("DEBUG DONE WITH CAPTURING project_info DATA: " );

                        // console.log("var projInfo: " + projInfo);

                        // parse JSON data in projInfo
                        p = data['Project']; //JSON.parse(projInfo);
                        console.log("Parsed Project JSON: " + p);

                        // update "Global" pInfo with the value of the JSON data for "Project" as needed
                        pInfo = p;
                        console.log("What is inside of pInfo???: " + pInfo);



                        document.getElementById("signedinas").innerHTML = "<font face=\"verdana\" size =\"4\" color=\"white\">Logged in as: " + username + " Project: " + pInfo + " </font>";
                    }
                }).fail(function () {
                        alert("Login Failed.");
                        document.getElementById('username').value = "";
                        document.getElementById('password').value = "";
                        console.log("Error. /role data access Error.");
                });





                console.log("projectInfo var data should be aa2: " + pInfo);


                document.getElementById("userBar").style.display = "";

                // Display pInfo in the DOM
                // document.getElementById("signedinas").innerHTML = "<font face=\"verdana\" size =\"4\" color=\"white\">Logged in as: " + username + " Project: " + pInfo + " </font>";

                $("div.create").children().remove();

                //-------------------------------------------------------------------END OF GLOBAL VARIABLES

                $.ajaxSetup({
                    cache: false
                });

                // get table data from proxy server on port 7071 DPL
                // NEED SUB ROUTINE HERE FOR AJAX CALL
                // Make call to server-side code to reload JSON data into table from port 7071
                pushJsonData();
                // END SUB ROUTINE HERE!!!

                // getTblJson();
            }
        }
    }).fail(function () {
        alert("Login Failed.");
        document.getElementById('username').value = "";
        document.getElementById('password').value = "";
        console.log("Error. Need user Credentials");
    });
}
}

如何在JSON.parse（）之后将JSON数据显示到HTML DOM元素？

1 个答案: