CODEWITHSUNDEEP
javascriptjqueryjsonappend
Bodrov
Bodrov

Reputation: 867

JSON data isn't appending to div

I can see the JSON when I run console.log, and I think the problem has something to do with my return statement.

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 snippet:

<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"}]

Upvotes: 0

Views: 43

Answers (2)

ellipsis
ellipsis

Reputation: 12162

Use , to separate the two classes used in the selector

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

Upvotes: 1

Sunny Pun
Sunny Pun

Reputation: 726

Several points:

  1. (Before OP edited) Inside filter, it should be an expression that returns true / false. filter takes in an array, returning an array which evaluates to true. E.g. [1,2,3].filter( n => n % 2 === 1 ); gives [1,3]. Do you want to use map instead?

  2. When we use append, we should be appending jQuery DOM objects, e.g. $(...).append($("<h1>"+res+"</h1>"));; Do you want to use text() instead? (If the <h1> is already there) If not there, you may instead delete h1 from the selector and use append.

  3. Currently res is an array (no matter map or filter is used). You may want to use res[0].Name finally. However if you do really want to output the whole array / json, use JSON.stringify.

Upvotes: 1

Related Questions