Перенос строки при парсинге JSON, как побороть?

Question

[sergey]

Использую metronic datatables:

JSON парсит цикл в котором джанговские переменные (оставил как пример одну order.notes с которой и возникла проблема)

var dataJSONArray = JSON.parse('[{% for order in orders %} ' +
'{"orderNotes":"{{ order.notes }}"}\n' +
'{% if not forloop.last %},{% endif %}' +
'{% endfor %}]');

менеджер в джанговской админке вводит комментарий, и если использует энтер, переход на новую строчку, то при парсинге я получаю ошибку: Uncaught SyntaxError: Invalid or unexpected token и datatables не работает.
Знаю что подобную беду в js можно обыграть функцией .replace(/\n/g, " "); Но как ее к джанговской переменной применить?

Comments

[tema_sun]

А не могли бы вы пояснить (для общего развития) зачем вы делаете так как делаете?

[sergey]

Не совсем понял Ваш вопрос: есть Metronic с его datetables, взято оттуда, если вопрос о коде. Поставлена задача - нужно выполнить.

[sim3x]

Sagan, там прям так и написано?

[sergey]

sim3x, нет конечно, тут уже бекенд немного поучаствовал

[sim3x]

Sagan,
Вы же понимаете, что ето говнокод?

[sergey]

sim3x, если бы я принимал решение, то наверняка не задавал бы этот вопрос и не показывал кусок этого кода, но на данном этапе меня интересует лишь возможность использовать функцию, менять код или его переписывать никто не будет, объем не позволяет.

[sim3x]

Sagan, тогда опишите задачу полностью, со всеми ограничениями

[sergey]

sim3x, ограничений нет, есть лишь данные с джанговской админки , которые парсятся и с помощью скрипта преобразуются в таблицу, с одним из полей возникла ошибка после ввода данных с использованием энтер (переходом на вторую строку).

Как это реализовать на jQuery/js имею представление. Но как это сделать с джанговской переменной не знаю.
Вот весь js с джанговскими вставками, слешами и экранированием

spoiler

var DatatableAutoColumnHideDemo = function() {
        var demo = function () {
            var dataJSONArray = JSON.parse('[{% for order in orders %} ' +
                '{"#": "{{ order.id }}","updateUrl":"{% url "staff:order-update" order.id %}", "link":"{% if order.has_payment_link %}{{ order.get_direct_payment_link }}{% endif %}", "client":"{{ order.client }}", "total":"{{ order.final_price }}", "servicesOrderedCount":"{{ order.ordered_services.count }}", "originalPrice":"{{ order.original_price }}","promoPrice":"{{ order.promo_price_impact }}", "clientCompany":"{{ order.client.company }}", "orderedServices":"{% for service in order.ordered_services.all %}<li>{{ service.service.name }}-{{ service.service.get_service_type_display }}-{{ service.service.quan_number }}-{{ service.service.price }}</li>{% endfor %}", "directLinkToPay":"{% if order.has_payment_link %}{{ order.get_direct_payment_link }}{% endif %}", "orderNotes":"{{ order.notes }}", "payment":"{{ order.get_payment_gateway_display }}","status":"{{ order.get_status_display }}"}\n' +
                '{% if not forloop.last %},{% endif %}' +
                '{% endfor %}]');


            var datatable = $('.m_datatable').mDatatable({
                data: {
                    type: 'local',
                    source: dataJSONArray,
                    pageSize: 10
                },

                // column sorting
                sortable: true,

                pagination: true,

                toolbar: {
                    items: {
                        pagination: {
                            pageSizeSelect: [10, 20, 30, 50, 100],
                        },
                    },
                },

                search: {
                    input: $('#generalSearch'),
                },

                rows: {
                    autoHide: true,
                },

                // columns definition
                columns: [{
                    field: "#",
                    title: "#",
                    type: "number",
                    width: 35,
                    textAlign: 'right'
                }, {
                    field: "link",
                    title: "",
                    width: 15,
                    textAlign: 'left',

                    template: function(data) {
                        if (link = data.directLinkToPay){
                            return '<a class="fas fa-link dis" href="">' + data.directLinkToPay + '</a>';
                        } else {
                            return '<a class="" href="">' + '</a>';
                        }

                    }

                }, {
                    field: "client",
                    title: "client",
                    width: 325

                },  {
                    field: "total",
                    title: "total",
                    type: "number",
                    width: 100
                }, {
                    field: "servicesOrderedCount",
                    title: "services ordered count",
                    type: "number"
                }, {
                    field: "originalPrice",
                    title: "original price",
                    type: "number"
                }, {
                    field: "promoPrice",
                    title: "promo price impact",
                    type: "number"
                }, {
                    field: "clientCompany",
                    title: "company"
                }, {
                    field: "orderedServices",
                    title: "ordered services",
                    width: 300
                }, {
                    field: "directLinkToPay",
                    title: "direct link to pay",
                    width: 300,
                    template: function(data) {
                        return '<a class="m-link" href="' + data.directLinkToPay +
                            '">' +
                            data.directLinkToPay + '</a>';
                    }

                }, {
                    field: "orderNotes",
                    title: "order notes",
                    width: 300,
                    template: function (row) {

                        return '<span class="notes">' + row.orderNotes +'</span>';
                    }

                }, {
                    field: "payment",
                    title: "",
                    width: 10,
                    template: function (row) {

                        var payment = {
                            Stripe: {'title': 'stripe', 'class': 'fab fa-stripe'},
                            PayPal: {'title': 'paypal', 'class': 'fab fa-paypal'}
                        };
                        return '<i class="' + payment[row.payment].class + '">' + '</i>';
                    }

                },  {
                    field: "status",
                    title: "status-gateway",
                    width: 125,

                    template: function (row) {
                        var status = {
                            NEW: {'title': 'new', 'class': ' m-badge--metal'},
                            PAYMENT_SUCCESSFUL: {'title': 'successful', 'class': ' m-badge--success'},
                            PAYMENT_IN_PROGRESS: {'title': 'in progress', 'class': ' m-badge--primary'},
                            FINISHED: {'title': 'finished', 'class': ' m-badge--primary'},
                            PAYMENT_ERROR: {'title': 'error', 'class': ' m-badge--danger'},
                            CANCELED: {'title': 'canseled', 'class': ' m-badge--danger'},
                            REFUNDED: {'title': 'refunded', 'class': ' m-badge--danger'}
                        };
                        return '<span class="m-badge ' + status[row.status].class + ' m-badge--wide">' + status[row.status].title + '</span>';
                    }
                }, {

                    field: "Actions",
                    width: 110,
                    title: "Actions",
                    sortable: false,
                    overflow: 'visible',
                    visibility: true,
                    textAlign: 'center',

                    template: function (row, index, datatable) {
                        var dropup = (datatable - index) <= 4 ? 'dropup' : '';
                        return '\
						<div class="dropdown ' + dropup + '">\
							<a href="#" class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="dropdown">\
                                <i class="la la-ellipsis-h"></i>\
                            </a>\
						  	<div class="dropdown-menu dropdown-menu-right">\
						    	<a class="dropdown-item" href="' + row['updateUrl'] +'"><i class="la la-edit"></i> Edit Details</a>\
						    	<a class="dropdown-item" href="#"><i class="la la-leaf"></i> Update Status</a>\
						    	<a class="dropdown-item" href="#"><i class="la la-print"></i> Generate Report</a>\
						  	</div>\
						</div>\
						<a href="#" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="View ">\
                            <i class="la la-edit"></i>\
                        </a>\
					';
                    },
                }]
            });


            var query = datatable.getDataSourceQuery();

        };

        return {
            init: function () {
                demo();
            }
        };
    }();

    jQuery(document).ready(function() {
        DatatableAutoColumnHideDemo.init();
    });

[sim3x]

Sagan, если ограничений нет - ответ уже дан

[tema_sun]

Sagan, я не работал с metronic. Я имел ввиду, что не представляю use case когда нужно джанговский шаблонный код передавать через ajax. Т.е. сарказма там не было, мне реально интересно зачем это может понадобиться.

[sergey]

tema_sun, мне также, но задачи себя не я ставлю:)))

Answer 1

[sim3x]

Сделайте в вью жсон почеловечески и всуньте его в темплейт целиком

А еще лучше сделайте вью и оттуда отадавайте только джсон с заказами