Insert an array to existing datatable javascript

Question

I have a dataTable where I insert data manually with a form

this is my dataTable

I trying to create an import CSV function with an import button

I would like to use dataTable.rows.add (for example) with an array that I have since I get the CSV,

this is my array result that I like to add to my table

[{"URL":"htpp://www.google.com2","Business Type":"Restaurant2"},{"URL":"htpp://www.google.com3","Business Type":"Hotel"}]

how can I add this data to my table? actually, my dataTable is already initialized with this code

let dataTable = $('#task-place-table').DataTable({
        processing: true,
        autoWidth: false,
        responsive: true,
        dom: '<t>ip',
        order: [0, 'asc'],
        language: {
           "url": '{{session('locale') == 'en' ? "//cdn.datatables.net/plug-ins/1.10.20/i18n/English.json" : "//cdn.datatables.net/plug-ins/1.10.20/i18n/Japanese.json"}}',
        "buttons": {
        "reload": '{{__('tableButtons.reload')}}'
                    }
                }
            });

and I add rows with "add place" buttons with row.add using this code

  dataTable.row.add([
     itemCounter,
     placeUrl,
     businessType[0].text,
     '<button id="btn-remove-' + itemCounter + '" class="btn btn-outline btn-primary btn-xs deleted" ' +
      'data-id="' + itemCounter + '" data-toggle="tooltip" title="Delete" type="button"><i class="fa fa-trash"></i></button>'
     ]).draw(false);

actually, placeUrl, itemCounter and businessType are obtained by form elements with document.getElementById.value

the respected result is this

Item = itemCounter (this is already calculated)
Place URL = first data in array
Business Type = second data in array

my HTML table only has this

<table id="task-place-table" class="table table-striped table-bordered table-hover">
       <thead>
         <tr>
           <th class="desktop mobile">{{__('task.columns.item')}}</th>
           <th class="desktop tablet mobile">{{__('task.columns.place_url')}}</th>
           <th class="desktop tablet">{{__('task.columns.business_type')}}</th>
           <th class="desktop">{{__('task.columns.actions')}}</th>
         </tr>
       </thead>
      <tbody></tbody>
 </table>

thanks for read this :)

Gustavo Shigueo · Accepted Answer · 2021-02-10 12:38:52Z

1

I am assuming your add function already works for an individual object { URL: 'some URL', 'Business Type': 'some text' } and calling it add() - just replace that with your actual function

If so, then you can use .forEach() on your array as follows:

const arr = [
  { "URL": "http://www.google.com2", "Business Type": "Restaurant2" }, 
  { "URL": "http://www.google.com3", "Business Type": "Hotel" }
]

arr.forEach(item => dataTable.row.add([
  itemCounter,
  item['URL'],
  item['Business Type'],
  `<button id="btn-remove-${itemCounter}" class="btn btn-outline btn-primary btn-xs deleted" data-id="${itemCounter}" data-toggle="tooltip" title="Delete" type="button"><i class="fa fa-trash"></i></button>`
]).draw(false))

If this doesn't work or if I misunderstood the question, let me know and i will try to fix it

edited Feb 10, 2021 at 12:38

answered Feb 10, 2021 at 12:26

Gustavo Shigueo

5125 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Andre Over a year ago

thanks for reply, this table actually works only with a form, I'm using .on('click' function (). rows are obtained from form fields

Gustavo Shigueo Over a year ago

It should work by putting the .forEach() method wherever it is you receive your array of objects, unless your problem is with getting the array

Gustavo Shigueo Over a year ago

If that is the case, could you include an HTML snippet?

Andre Over a year ago

Shuigeo I updated my question, and I tried with your code, I get this error DataTables warning: table id=task-place-table - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see datatables.net/tn/4

Gustavo Shigueo Over a year ago

Use console.log(placesArray) to see in the console what is happening to the array

|

Dharman · Accepted Answer · 2021-02-10 12:36:07Z

1

All you need to do is to iterate over your array and put the values, where they belong.

const result = [{"URL":"url1","Business Type":"Restaurant2"},{"URL":"url2","Business Type":"Hotel"}];

for (let item of result) {
  dataTable.row.add([
     itemCounter,
     item["URL"],
     item["Business Type"],
     '<button id="btn-remove-' + itemCounter + '" class="btn btn-outline btn-primary btn-xs deleted" ' +
      'data-id="' + itemCounter + '" data-toggle="tooltip" title="Delete" type="button"><i class="fa fa-trash"></i></button>'
     ]).draw(false);
  itemCounter++;
}

edited Feb 10, 2021 at 12:36

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Feb 10, 2021 at 12:30

Der Alex

8865 silver badges22 bronze badges

Collectives™ on Stack Overflow

Insert an array to existing datatable javascript

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related