How do you get distinct values from dataTables and sum the total specific field using JS

Question

How do you get the distinct values from dataTables. As you can see from below picture

You'll see " Course 1 " has the same values. I would like to get all the distinct values from " Course Names " while adding all the equivalent " Students " from the same distinct values in DataTables using JS.

I would like the return would be

" Course 1 , 4 Students "

EDITED :

HTML CODE:

<table class="table" id="bookingReport" cellspacing="0" width="100%">
    <thead class="thead-inverse">
        <tr>
            <th><h4>Course Names</h4></th>
            <th><h4>Names</h4></th>
            <th><h4>Dates</h4></th>
        </tr>
    </thead>        
</table>

JS CODE:

"dataSrc": function(result) {
    var obj, id, paymentMethod;
    var validatedResult = [];

    $.each(result.aaData, function(index, value) {
        var givenName, surname, organisationName;

        id = value.id;
        dateCreated = value.dateCreated;



        $.each(value.bookingDetail, function(i, v) {


            $.each(v.student.studentCourseDetail, function(ii, sd) {
                obj = new Object();

                obj["id"] = sd.id;
                obj["surname"] = surname;
                obj["givenName"] = givenName;
                obj["dateCreated"] = dateCreated;
                obj["courseName"] = sd.courseName;


                validatedResult.push(obj);



            });




        });

    });

    return validatedResult;

}, },

"aoColumns": [{
        "data": "courseName"
    }, {
        "data": "givenName"
    }, {
        "data": "dateCreated"
    }

],

Answer 1

To count people assigned to each of the courses you can use reduce function of the array. Given below array of student you can easily calculate the result.

 var bookingList = [{ id: 1, name: 'Alice', courseName: 'Physics' }, { id: 2, name: 'Bob', courseName: 'Physics' }, { id: 3, name: 'Emily', courseName: 'Math' }, { id: 1, name: 'Alice', courseName: 'Math' }, { id: 4, name: 'Jane', courseName: 'Biology' }, { id: 5, name: 'Dan', courseName: 'Chemistry' } ] var result = bookingList.reduce(function(prevValue, currValue, index, array) { var bookingEntry = array[index] if (prevValue[bookingEntry.courseName] == null) { prevValue[bookingEntry.courseName] = 1 } else { prevValue[bookingEntry.courseName]++ } return prevValue }, {}); console.log(result) 

Answer 2

Excellent answer from @t3mplar, this is a version using mocked ajax, it also takes into account the possibility of the same course occurring on different dates:

"dataSrc": function(data) {
    return data.reduce(function(returnedArray, currentElement, index, originalArray) {
        let foundOne = returnedArray.findIndex(function(element) {
            return currentElement.course === element.course && currentElement.date === element.date
        });
        if (foundOne < 0) {
            returnedArray.push({
                "course": currentElement.course,
                "date": currentElement.date,
                "students": 1
            });
        } else {
            returnedArray[foundOne].students++;
        }
        return returnedArray
    }, []);
}

Working JSFiddle here .