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 sn-p:

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