Filtering JSON data and appending to divs

Question

I have a local JSON file and I'm trying to filter data from it and append that data to divs in my html file. I'm unable to see the data in the console, so I'm not sure if I'm doing console.log incorrectly (see below) or if the data is "inaccessible" based on scope.

JS file:

import $ from 'jquery';
import jsonData from "./test.json";

function _loadDispForm() {
        let dispData = jsonData.d.results.filter(x => {
            return {
                "Title": x.Title,
                "GoalRange": x.GoalRange,
                "Office": x.Office,
                "Role": x.Role,
                "IsFilled": x.IsFilled,
                "Employee": x.Employee,
                "IsActive": x.IsActive,
                "Notes": x.Notes
            }

        })      
        $("#display-form-job-title").append("Title");

        console.log(x.Title);
        console.log(JSON.stringify(dispData));
    }

JSON snippet:

{
  "d": {
    "results": [
      {
        "FileSystemObjectType": 0,
        "Id": 1,
        "Title": "TitleHere",
        "GoalRange": "3",
        "Office": "Somewhere",
        "Role": "FPSL",
        "IsFilled": false,
        "Employee": null,
        "IsActive": true,
        "Notes": null,
        "ID": 1,
        "Attachments": false
...etc

HTML snippet:

<div class="col-6">

  <h3 id="display-form-job-title"></h3>

For the most part, the HTML tags for the other key values are similar to this one.

Answer 1

As other answers have stated, you most likely should be using .map ("morph this length N array to a new length N array"), rather than .filter ("return length <= N array from length N array, including only elements that satisfies the condition").

a = [1,2,3]
console.log(a.map(a => a + 1)) // [2,3,4]
console.log(a.filter(a => a == 2)) // [2]
console.log(a.filter(a => a > 1)) // [2,3]