Данные JSON не добавляются в div

Question

Я вижу JSON при запуске console.log, и я думаю, что проблема как-то связана с моим оператором return.

JS:

import $ from 'jquery';
import headlineData from '../JSON/headline.json';

export default class {
    constructor() {
        this.loadHeadlineData();
    }

   // ------------------- //

    loadHeadlineData() {
        let res = headlineData.d.results.map(function(obj) {
            return {
                "Name": obj.preferredname,
                "Initials": obj.initials,
                "Title": obj.jobtitle,
                "Office": obj.office
            }
        })       
        $("#headline-cont h1").append(res);   
    }

}

console.log(headlineData)

JSON:

{
    "d": {
        "results": [{
            "preferredname": "Bobson A. Dugnutt",
            "initials": "BAD",
            "jobtitle": "Coolguy",
            "office": "New York"
        }]
    }
}

Фрагмент HTML:

<div id="headline-cont">
   <h1></h1>
</div>

console.log(JSON.stringify(headlineData.d.results)):

[{"preferredname":"Bobson A. Dugnutt","initials":"BAD","jobtitle":"Coolguy","office":"New York"}]

Answer 1

Несколько точек:

1. (до редактирования OP) Внутри filter должно быть выражение, которое возвращает true / false.filter принимает массив, возвращая массив, который оценивается в true.Например, [1,2,3].filter( n => n % 2 === 1 ); дает [1,3]. Вы хотите использовать map вместо этого?

2. Когда мы используем append, мы должны добавлять объекты JQuery DOM, например, $(...).append($("<h1>"+res+"</h1>"));; Хотите вместо этого использовать text()?(Если <h1> уже существует) Если его там нет, вы можете вместо этого удалить h1 из селектора и использовать append.

3. В настоящее время resмассив (независимо от того, используется map или filter).Вы можете захотеть использовать res[0].Name наконец.Однако, если вы действительно хотите вывести весь массив / json, используйте JSON.stringify.

Answer 2

Используйте , для разделения двух классов, используемых в селекторе

$(".headline-cont,h1")

var headlineData={
    "d": {
        "results": [{
            "preferredname": "Bobson A. Dugnutt",
            "initials": "BAD",
            "jobtitle": "Coolguy",
            "office": "New York"
        }]
    }
};
    function loadHeadlineData() {
        let res = headlineData.d.results.filter(function(obj) {
            return {
                "Name": obj.preferredname,
                "Initials": obj.initials,
                "Title": obj.jobtitle,
                "Office": obj.office
            }
        })     
       // console.log(res)
        $(".headline-cont,h1").append(JSON.stringify(res));   
    }


loadHeadlineData();
//console.log(headlineData)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="headline-cont h1"></div>