JSON数据未追加到div

Question

运行console.log时可以看到JSON，我认为问题与我的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

使用,分隔选择器中使用的两个类

$(".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>

Answer 2

几点：

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。