javascript - 如何在 JSON.parse() 之后将 JSON 数据显示到 HTML DOM 元素？

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] 输出之前该部分是好的。

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

当我尝试将全局变量与所需数据一起使用时，我得到一个“未定义”...

我还尝试返回已在第一个函数中解析的数据，然后存储 https://codepen.io/lopezdp/pen/owKGdJ 返回值到第二个函数中的局部变量，但我仍然得到“未定义” '.

如果您想查看这两个函数的完整代码，我已将它们放在 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");
    });
}
}