Attach JSON data to a table cell for each row

Attach JSON data to a table cell for each row

lfischerlfischer Posts: 1Questions: 1Answers: 0

For each item in the JSON data (a course), the table row is generating properly. I need a button at the end of each row that contains all the data for that course to use to generate a course detail page. Just padding an ID and then doing another AJAX call is inefficient when we've already done one to build the dataTable. How do I pass a whole item from the JSON to the data for that cell, instead of the course_id?

JS

courseTable = $('.js-course-list').DataTable( {
      "processing": false,
      "searching": false,
      "lengthChange": false,
      "pageLength": 20,
      "ajax":{"url":"/api/courses.json?" + type + "=" + id + "&year=" + year,"dataSrc":""},
      "columnDefs": [ {
        "targets": 7,
        "data": "details",
        "render": function ( data, type, row, meta ) {
          return DO STUFF WITH DATA ITEM;
        }
        }
      } ],
      "columns": [
          { "data": "institution_name" },
          { "data": "course_details[0].prefix" },
          { "data": "course_details[0].number" },
          { "data": "course_details[0].he_gen_ed_code" },
          { "data": "course_details[0].title" },
          { "data": "course_details[0].core_code" },
          { "data": "course_details[0].core_title" },
          { "data": PASS WHOLE ITEM }
      ]
    });

SAMPLE JSON (There are more than 800 entries like this)

{
    "id":542,
    "institution_id":8,
    "created_at":"2017-08-10T20:04:17.248Z",
    "updated_at":"2017-09-07T18:52:10.815Z",
    "first_term":"fall",
    "last_term":"",
    "first_term_year":2015,
    "last_term_year":null,
    "likes_count":0,
    "course_details":[
        {
            "id":906,
            "course_id":542,
            "hs_core_flag":false,
            "prefix":"CMST",
            "number":"2110",
            "title":"Interpersonal Communications",
            "created_at":"2017-10-18T14:52:13.637Z",
            "updated_at":"2017-11-21T17:37:15.190Z",
            "year":2017,
            "notes":"",
            "available_in_grades":"10, 11, 12",
            "typically_available_in_grades":"11, 12",
            "core_code":"06010013020",
            "core_title":"Applied Communication 1 CE",
            "cip_code":null,
            "enrollment_conditions":"All sections must be capped at 30 students.",
            "he_gen_ed_code":"H",
            "like_courses":179,
            "college_credit_hours":3,
            "short_description":"Examination of theories, methods, and competencies relevant to studying, establishing, and maintaining interpersonal relationships in family, intercultural, professional, and other contexts. Classroom experiences with topics such as perception, language, nonverbal behavior, conflict resolution, and listening.",
            "long_description":"",
            "delivery_method":9,
            "approval_date":"2014-11-30",
            "exploratory_major":null,
            "status":"active",
            "first_term":"fall",
            "last_term":"",
            "perkins_cluster":3,
            "world_of_work_map":"c",
            "fulfillment_type":"",
            "award_names":"",
            "award_types":"",
            "usbe_cte_pathways":"",
            "deleted_at":null,
            "he_gen_ed_text":"Humanities",
            "exploratory_subpathways":[
                {
                    "id":44,
                    "external_id":36,
                    "name":"Communication",
                    "exploratory_major":"Artistic",
                    "created_at":"2017-02-15T19:34:41.010Z",
                    "updated_at":"2017-02-15T19:34:41.010Z"
                }
            ]
        }
    ],
    "liked":false,
    "institution_name":"University"
}

Answers

  • allanallan Posts: 63,461Questions: 1Answers: 10,466 Site admin

    Two options:

    1. Set columns.data to be null in which case the entire object is passed in as the data
    2. The entire data structure for the row is available in the third parameter passed into the columns.render callback - in the case above it is called row, so you could just set the data property to be the id and then use the row parameter.

    Allan

This discussion has been closed.