JSON 数据出现在控制台中，但在浏览器中显示为“未定义”答案

【问题标题】：JSON data appears in console but is coming up as `undefined` in browserJSON 数据出现在控制台中，但在浏览器中显示为“未定义”
【发布时间】：2019-08-29 20:19:34
【问题描述】：

我有一些 JSON 数据，其中一些元素共享值，因此我将这些数据简化为值正确嵌套的新 JSON：

 (4) [{…}, {…}, {…}, {…}]
   0:
    SameGroup: Array(3)
     0: {Role: "SomeRole", IsFilled: false, isActive: true}
     1: {Role: "AnotherRole", IsFilled: true, isActive: false}
     2: {Role: "OtherRole", IsFilled: false, isActive: true}
     length: 3
     Title: "Title-A"
   1: {Title: "Title-B", SameGroup: Array(2)}

我正在尝试通过替换已过滤的数据源，将新的 JSON 附加到唯一的 div（我之前工作过）中。在控制台中我可以看到 JSON 树，但在浏览器中它显示为 undefined.

我认为在旧代码中实现新 JSON 存在问题（过滤方式存在问题）。对这个有什么想法吗？

JS sn-p:

function _displayForm() {
    let titleKeyHolder = [];
    let titleArr = [];

    jsonData.d.results.forEach(function(item) {
        titleKeyHolder[item.Title] = titleKeyHolder[item.Title] || {};
        let obj = titleKeyHolder[item.Title];
        if(Object.keys(obj).length == 0)
            titleArr.push(obj);

        obj.Title = item.Title;
        obj.SameGroup = obj.SameGroup || [];

        obj.SameGroup.push({ Role:item.Role, IsFilled: item.IsFilled, isActive: item.IsActive });
    });

    console.log(titleArr);

    let jobTitle = titleArr // ------ based on the JSON shape, I'm guessing I can't have titleArr written like this
        .filter(x => x.Title !== "");

        jobTitle.forEach(val => {
            let $clonedDiv = $("#template").clone();
            $clonedDiv.removeAttr("id");

            $clonedDiv
               .find("#display-form-job-title")
               .append(val.Title);

        // other code
}

_displayForm();

旧 JSON：https://jsfiddle.net/vrep307f/

【问题讨论】：

小提琴链接转到空白小提琴
@charlietfl 刚刚更新了
那么具体在哪里未定义？听起来像一个异步ajax问题。如果您删除不相关的代码会有所帮助。我们不需要查看您创建的每个元素
在我的浏览器中，我在每个 div 中都得到了undefined，数据应该在哪里。
现在你删除的太多了。我们无法告诉您现在在哪里使用该数组以查看未定义的内容

标签： javascript jquery json methods append

【解决方案1】：

我注意到你在转换收到的数据时遇到了问题，尝试从这段代码中获得灵感

<script>

var text = '{"d":{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}}';




var obj = JSON.parse(text);


obj.d.employees.forEach(function(item) {

console.log(item.firstName);
})


</script>

【讨论】：