时间戳

首页 > 解决方案 > JSON 数据未附加到 div

javascript - JSON 数据未附加到 div

问题描述

运行时可以看到 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"}]

标签： javascriptjqueryjsonappend

解决方案

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

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

推荐阅读