Данные JSON отображаются в консоли, но в браузере отображаются как «неопределенные»

Question

У меня есть некоторые данные 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 фрагмент:

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/

Answer 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>