Getting error on row.add()

Numberz

Hi guys,
Before I get a bunch of hate replies. I want it known that I have tried to figure this out on my own and don't seem to have all the skills and understanding necessary to get this working. I ask that you be as specific and detailed as you can if you choose to help with this.

The ERROR I am receiving on click of button below...

DataTables warning: table id=scraped - Requested unknown parameter 'doc._id' for row 63, column 0. For more information about this error, please see http://datatables.net/tn/4

Here is my html table so you can see my structure...

Note: I had an image in the first column, but thought it was causing the problem and removed it. I will worry about figuring out how to skip that row later. For now, there are 4 <th> and 4 assignments within aoColumn.

<div class="row m-3">
<table
id="scraped"
class="table table-sm table-hover dataTable no-footer"
cellspacing="0"
aria-describedby="scraped_info"
role="grid"
style="width: 100%"
>
<thead>
<tr>
<!-- <th>photo</th> -->
<th>ID</th>
<th>Name</th>
<th>Mobile</th>
<th>email</th>
<!-- <th></th>
<th></th> -->
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<!-- end -->

initialization of DataTables (showing that table is available as a variable)....

var table = $('#scraped')
.DataTable({ options})

**My data structure is : **

This data is pulled from a pouchdb locally stored and then replicated to cloudant. (not that it matters, but I am trying to be clear in case this helps another)

[{
"id": "03f62892-bb44-48c6-ac8c-63af7a85326a",
"key": "03f62892-bb44-48c6-ac8c-63af7a85326a",
"value": {
"rev": "1-518f1b325580f23f34f0720157c64aba"
},
"doc": {
"_id": "03f62892-bb44-48c6-ac8c-63af7a85326a",
"_rev": "1-518f1b325580f23f34f0720157c64aba",
"name": "Allan",
"mobile": "555-555-5555",
"email": "email@email.com"
}
}]

**aocolumns structure(works perfectly for receiving data from pouchdb/couchdb: **
I changed my columns to aoColumns and data to mdata.. It loaded exactly the same on my page. Though I believe the mdata version is a bit faster. Anyway, here is my columns.data

aoColumns: [

                { mData: 'doc._id' },
                { mData: 'doc.name' },
                { mData: 'doc.mobile' },
                { mData: 'doc.email' },
            ],

function for click:
I tried to get row.add to work off a function, but it kept giving me an error. I changed over to this....

I have tried this multiple ways... array, object etc... Nothing seems to work for me

$('#addbutton').on('click', function() {
table.row
.add([
{ 'doc._id': '123456' },
{ 'doc.name': 'John' },
{ 'doc.phone': '123-123-1234' },
{ 'doc.email': 'John@John.com' },
])
.draw(true);

and am using this button as my test case to see if the row is superficially added to the screen...

<button type="button" id="addbutton" class="btn btn-default">Add Row</button>

I hope I have provided enough information and it is a glaringly obvious issue. I am very new to programming and DataTables, but I am a fast learner and am willing to take whatever advice you can offer. I also am willing to pass my knowledge on. All this to say please help me to not only fix this issue, but to really understand what's going on here.

... I looked at about 50 examples for row.add() and they were all beautiful and worked flawlessly. I have not been able to replicate the beauty. I keep getting an ugly error!

Thanks for the help and hopefully this will help you too.

colin

Hi @Numberz ,

The first thing to do is to follow the suggestions given in the link within the error you posted. If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

Looks like you have the wrong data structure in your row.add(). You have this:

table.row
.add([
{ 'doc._id': '123456' },
{ 'doc.name': 'John' },
{ 'doc.phone': '123-123-1234' },
{ 'doc.email': 'John@John.com' },
])
.draw(true);

Basically that is an array of 4 objects. Which is not going to work. You will want something similar to the fist example in the row.add() docs:
https://datatables.net/reference/api/row.add()#Examples

Something like this:

table.row
.add( {
   'doc._id': '123456',
   'doc.name': 'John',
   'doc.phone': '123-123-1234',
   'doc.email': 'John@John.com',
} )
.draw(true);

Kevin

Numberz

@colin , @kthorngren

Hey Colin,
I am working on making a JS.Fiddle... I have never done this, but I completely get the need for a mockup that can be played with to get working. Seems much more fun than looking through my snippets and trying to piece it altogether.
Thank you for your reply!

Hey Kevin,
Thank you for your reply as well. I only used the structure you see noted in my post because I had tried it every other way... object, array,.. array of objects... Funny enough, I went to my code to try what you posted and it's exactly what I had there from my final try this afternoon. Unfortunately, this structure isn't working. It's possible that I have something else going on. I find comfort knowing that you found no real flaw in what I was doing and my thought process for doing it. I will get this Fiddle up soon. I will post it even if it is working. There seems to be a real lack of information with respect to PouchDB/CouchDB data for us that are brand new to DataTables and coding in general. I will be back shortly.....

Jason

Numberz

I think... maybe... just maybe... this is an accurate fiddle... I may have to fiddle with it some more! No pun intended.... When pressing the "row add" button, the error is there... I sourced my data from a url, where I uploaded my server's response.

https://jsfiddle.net/Numberz/nog86zsu/27/

kthorngren

Thanks for the test case! Here is the structure you need:

table.row
.add( { 'doc': {
  '_id': '123456',
  'name': 'John',
  'mobile': '123-123-1234',
  'email': 'John@John.com',
  }
} )
.draw(true);

Updated example:
https://jsfiddle.net/vgL0htyo/

Kevin

Numberz

@kthorngren

Hey Kevin!

I feel as if I have been walking around in the dark! I haven’t tried it yet, but man does it look pretty! I think that’s the ticket. Question though.. I want to try to figure out how I missed this setup in the documentation.

So it’s assigned in columns to doc._id, doc.name, etc..

But when you go to add rows to the same DataTable it’s not smart enough to model the structure? Or is it that the Ajax call datasrc: “rows” as the source and then columns points to the doc objects inside of the row structure. Essentially it is a nested structure.

Like I said, I feel like I should have found, read something on this in the hundreds of examples and the documentation. If you have the want and the time, please help me and others to understand. Better yet, link to the part of the docs that I misread/interpreted.

Thanks so much! You know where to find me should you need anything from me.

Numbz

kthorngren

I'm guessing you probably found these links but the data structures supported is discussed here:
https://datatables.net/manual/data/#Objects

This example shows how to access nested objects:
https://datatables.net/examples/ajax/deep.html

I don't think there is specific documentation showing how to use row.add() to add nested objects. What you add using row.add() needs to be in the same format as the original data source. Your original data source looks like this:

    "doc": {
        "_id": "03f62892-bb44-48c6-ac8c-63af7a85326a",
        "_rev": "1-518f1b325580f23f34f0720157c64aba",
        "name": "Allan",
        "mobile": "555-555-5555",
        "email": "email@email.com"
    }

Keep in mind I gave you the wrong answer the first time Its not always easy when you have something more than a simple setup.

HTH,
Kevin

Numberz

@kthorngren

You have really gone above and beyond! I have learned so much from this little bit of back and forth.

I thank you for all your time!

You did give me the wrong answer at first, which is why I felt like I needed to dig a little deeper and really give myself and others enough keywords to learn this lesson. Moreover, it’s a rough road learning to program and even rougher if you’re using an offline first and progressive web app approach. I have degrees in mathematics, science and physics and I can tell you that learning to program in 2019 is INSANE! There are more choices and flavors, enough to make your head spin. I can honestly say it’s the hardest thing I have ever had to learn. It’s people like you that make me want to keep going. I can’t wait to pass it on. I think I need to find a good mentor. Anyway, I think you have cleared this up brilliantly and I want to thank you one last time as what you do isn’t thankless. I see the magic!

Numbz