Replace variable in javascript

Question

Apologies for all the code in this post, but I don't know how else to describe it.

I have some Javascript, which is in a Vue component (the component is to encapsulate a Datatable):

let table = $('#datatables-table').DataTable({ 

    "ajax": {
        "url": self.dataUrl,
        "type": "POST",

        "data": function(d){
            d.table = self.table;
        },

    },


"columns": self.tableColumns,
    order: [1, 'asc'],
    dom: "Bfrtip",
    responsive: false,//true wont let me hide columns
    "scrollY": "600px",
    "scrollCollapse": true,

    "paging": false,
    select: {
        style: 'single',
        selector: 'td:first-child',
        blurable: true

    },

    buttons: self.buttons,

});

I am trying to pass the buttons (self.buttons) configuration in, this is what I want it to look like:

[{extend:'remove', editor: editor},{extend:'create', editor: editor},{extend:'edit', editor: editor},],

The variables get populated, in my mounted method. via AJAX:

axios.get(self.tableUrl)
            .then(function (response) {

                self.tableHeaders = response.data.tableHeaders;
                self.panelTitle = response.data.panelTitle;
                self.table = response.data.table;
                self.editorFields = response.data.editorFields;
                self.tableColumns = response.data.tableColumns;
                self.buttons = response.data.buttons;

This is the PHP (Laravel), to form the response:

$dt->buttons = array(
    array('extend' => 'remove', 'editor' => 'editor'),
    array('extend' => 'create', 'editor' => 'editor'),
    array('extend' => 'edit', 'editor' => 'editor')

);

Then I do a JSON.stringify in the JS, but the problem here is that I end up with this:

"[{"extend":"remove","editor":"editor"},{"extend":"create","editor":"editor"},{"extend":"edit","editor":"editor"}]"

So, how can I pass the buttons in, so that they are not a string and the editor is not "editor" (double quoted).

I think I need to somehow pass it as a string, but remove the quotes.

Mick

Update: editor is defined above:

 let editor = new $.fn.dataTable.Editor({
                 "ajax": {
                "url": self.dataUrl,
                "type": "POST",
                data: {table: self.table}
            },

    table: "#datatables-table",
    idSrc: self.table + '.id',
    fields: [self.editorFields]
        });

Full code here: http://artisantinkerer.github.io/2016/12/15/Vue-Datatables.html

I can't see where that would help? It turns strings to objects. — Mick
– Mick, Commented Apr 10, 2017 at 14:51
Apparently I'm missing something. You indicate you want to pass an array of objects to the buttons property of your DataTable initialization object. What is the content of response.data.buttons? If you're getting the JSON string, then JSON.parse(response.data.buttons) should turn it into the array you want. — Bert
– Bert, Commented Apr 10, 2017 at 15:02
[{extend: "remove", editor: "editor"}, {extend: "create", editor: "editor"},…] but this is not any use because of the double quotes around "editor". — Mick
– Mick, Commented Apr 10, 2017 at 15:04
I need it to look like this: [{extend:'remove', editor: editor},{extend:'create', editor: editor},{extend:'edit', editor: editor},], — Mick
– Mick, Commented Apr 10, 2017 at 15:05

Bert · Accepted Answer · 2017-04-10 15:15:54Z

1

If response.data.buttons is truly a javascript array, then you could replace the value of the editor property this way.

response.data.buttons.map(b => ({extend: b.extend, editor: editor}))

Or just not render the editor property at all from the server and map over and add it clientside.

answered Apr 10, 2017 at 15:15

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

2 Comments

Mick Over a year ago

So, I just added this self.buttons = self.buttons.map(b => ({extend: b.extend, editor: editor})); just after the editor definition. It worked! Brilliant. Thanks.

Mick Over a year ago

Yes, editor hadn't been defined in the AJAX success, so I had to do it later.

Collectives™ on Stack Overflow

Replace variable in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related