I am trying to add a row to a HTML table from JSON input using AJAX. I only want specific columns added. I am able to get the table to show; however the rows are not added.
Please see below for the HTML and AJAX (with the returned JSON).
HTML:
<html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="js/table2excel.js"></script>
<link rel="stylesheet" href="style.css">
<script src="js/tableTest.js"></script>
</head>
<body>
<p><button id="btn-export">Export</button></p>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Activity Name</th>
<th>Start Date</th>
<th>End Date</th>
</tr>
</thead>
<tbody>
<tr>
<td id='adActivityName'></td>
<td id='adStartDate'></td>
<td id='adEndDate'></td>
</tr>
</tbody>
</table>
</body>
</html>
AJAX (with JSON):
function e1ActivitySelect() {
var dataToBeSent = {
ssAccountLevel : sessionStorage.getItem('ssAccountLevel'),
ssAccountID : sessionStorage.getItem('ssAccountID'),
ssArchived : sessionStorage.getItem('ssArchived'),
};
$.ajax({
url: "E1ActivitySelectView",
data : dataToBeSent,
type: "POST",
cache: false
})
.fail (function(jqXHR, textStatus, errorThrown) {
$('#ajaxGetUserServletResponse').text('An error occured getting the Activity information.');
})
.done(function(responseJson1a) {
dataType: "json";
// alert(JSON.stringify(responseJson1a));
// [{"adId":"2","grpId":"2","adActivityID":"2","adActivityName":"Visit Ryde Fire Station","adStartDate":"2017-05-24","adEndDate":"2017-05-24"}]
for (i=0; i < responseJson1a.length; i++) {
$('#adActivityName').append("<td>"+a[i].adActivityName+"</td>");
$('#adStartDate').append("<td>"+a[i].adStartDate+"</td>");
$('#adEndDate').append("<td>"+a[i].adEndDate+"</td>");
}
});
}
You are Not appending table rows in a proper way
When you have multiple rows to append you need to create multiple row tags and append the data like this
HTML:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Activity Name</th>
<th>Start Date</th>
<th>End Date</th>
</tr>
</thead>
<tbody id="mytablebody">
</tbody>
</table>
Javascript:
function e1ActivitySelect() {
var dataToBeSent = {
ssAccountLevel : sessionStorage.getItem('ssAccountLevel'),
ssAccountID : sessionStorage.getItem('ssAccountID'),
ssArchived : sessionStorage.getItem('ssArchived'),
};
$.ajax({
url: "E1ActivitySelectView",
data : dataToBeSent,
type: "POST",
cache: false
})
.fail (function(jqXHR, textStatus, errorThrown) {
$('#ajaxGetUserServletResponse').text('An error occured getting the Activity
information.');
})
.done(function(responseJson1a) {
var tablebody = "";
try{
for (i=0; i < responseJson1a.length; i++) {
tablebody += "<tr><td>"+responseJson1a[i].adActivityName+"</td><td>"++responseJson1a[i].adStartDate+"</td><td>"++responseJson1a[i].adEndDate+"</td></tr>";
}
$("#mytablebody").empty();
$("#mytablebody").append(tablebody);
}
catch(e){
console.log(e);
}
});
}
Related
An example of the problem:
The page first loads with a list of items in the default order: [0,1,2,3,4,5]
The user rearranges the order to: [4,5,2,3,1,0]
When the serialized form is posted, it is still the default order: [0,1,2,3,4,5]
I think this is happening because the list items are generated at the page load with a set order, and that order does not change when the UI is updated. Is there a way to submit the updated list of SortOrderOptions?
The list of items:
<div class="row">
<ul id="sortable" style="list-style: none; padding-left: 0px; width: 100%;">
#for (var x = 0; x < Model.SortOrderOptions.Count; x++)
{
<li style="width: 100%;">
<div class="row">
<div class="col-6" style="padding-left:30px;">
<label class="kt-checkbox kt-checkbox--brand"><input type="checkbox" asp-for="#Model.SortOrderOptions[x].SortBy" class="sortBox" /><span></span></label>
<label>#Model.SortOrderOptions[x].Name</label>
<input type="hidden" asp-for="#Model.SortOrderOptions[x].Name" value="#Model.SortOrderOptions[x].Name" />
</div>
<div class="col-3 center">
<label asp-for="#Model.SortOrderOptions[x].Subtotal">
<label class="kt-checkbox kt-checkbox--brand"><input type="checkbox" disabled="#(Model.SortOrderOptions[x].SortBy != true ? "disabled" : null)" asp-for="#Model.SortOrderOptions[x].Subtotal" class="subtotalBox" /><span></span></label>
</label>
</div>
<div class="col-3">
<label asp-for="#Model.SortOrderOptions[x].NewPage">
<label class="kt-checkbox kt-checkbox--brand"><input type="checkbox" disabled="#(Model.SortOrderOptions[x].SortBy != true ? "disabled" : null)" asp-for="#Model.SortOrderOptions[x].NewPage" class="newPageBox" /><span></span></label>
</label>
</div>
</div>
</li>
}
</ul>
</div>
<script src="~/libs/js/jquery.js"></script>
<script src="~/libs/jqueryui/jquery-ui.js"></script>
Javascript:
$("#sortable").sortable({
axis: "y",
containment: "parent"
});
$('#submit').off('click').on('click', function (evt) {
var data = $('form').serialize();
var url = "#Context.Request.Path.Value.Replace("/Test","", StringComparison.OrdinalIgnoreCase)";
evt.preventDefault();
//Ajax form post
$.ajax({
type: 'POST',
data: data,
contentType: dataType,
url: '#Url.Action("PBSCSubmit","Reports")',
beforeSend: function(){
// Show loading spinner while processing
$('#loader').modal({
backdrop: 'static',
keyboard: false
});
},
success: function (data) {
if (data.success) {
//Success with warnings
if (data.warning) {
$('#loader').modal('toggle');
//Toggle the error modal and display messages
$('#errorsModal').modal('toggle');
//Add <br> tags when there is a linebreak in the string. This will add the line breaks into the HTML.
$('#errorsModal .modal-body p').html(data.message.replace(/(?:\r\n|\r|\n)/g, '<br>'));
//Open PDF on warning modal "OK" button click
$('#modalConfirm').on('click', function () {
window.open(url + "/ShowPDF?path=" + data.pdf, "_blank");
});
} else {
//Success without warnings
$('#loader').modal('toggle');
window.open(url + "/ShowPDF?path=" + data.pdf, "_blank");
if (data.csvCreated) {
window.open(url + "/DownloadFile?path=" + data.csv + "&fileName=" + CSVFileName, "_blank");
}
}
} else {
$('#loader').modal('toggle');
//Toggle the error modal and display messages
$('#errorsModal').modal('toggle');
//Add <br> tags when there is a linebreak in the string. This will add the line breaks into the HTML.
$('#errorsModal .modal-body p').html(data.message.replace(/(?:\r\n|\r|\n)/g, '<br>'));
}
},
error: function (jqXHR) {
$('#loader').modal('toggle');
handleAjaxError(jqXHR);
}
});
});
Controller:
public IActionResult PBSCSubmit(PaymentsBySelectionCriteria report)
{
var convertedReport = new PaymentsBySelectionCriteria().ConvertToCriteria(report);
convertedReport.PathToProjectFile = reportPath;
var path = Path.GetDirectoryName(env.WebRootPath) + "\\pdfs\\" + Guid.NewGuid() + ".pdf";
var csvPath = Path.GetDirectoryName(env.WebRootPath) + "\\csvs\\" + Guid.NewGuid() + ".csv";
var reportModel = new ReportPaymentsBySelection();
if (convertedReport.CreateCSVFile == true)
{
convertedReport.CSVFileName = csvPath;
}
reportModel.CreateReportAsPDFOrAddToQueue(convertedReport, path, loggedInUserID, out Notification notification, out bool addedToQueue);
//Add the report to the process queue
if (addedToQueue == true)
{
return Json(new
{
success = false,
message = "The report has been added to the queue."
});
}
if (notification.HasErrors)
{
return Json(new
{
success = false,
message = notification.GetConcatenatedErrorMessage(Environment.NewLine + Environment.NewLine)
});
}
return Json(new
{
success = true,
warning = notification.HasWarnings,
message = notification.GetConcatenatedWarningMessage(Environment.NewLine + Environment.NewLine),
pdf = path,
csvCreated = convertedReport.CreateCSVFile,
csv = csvPath
});
}
I came up with my own solution for this by creating a new property to keep track of the index. I created some hidden inputs and added the class sort-index to each of them.
public class SortOrder
{
public string Name { get; set; }
public bool SortBy { get; set; }
public bool Subtotal { get; set; }
public bool NewPage { get; set; }
public int SortIndex { get; set; }
}
When the submit button is clicked, I update the hidden index inputs to re-order to the current position in the UI.
//Update the SortIndex value of each sort order option
$(".sort-index").each(function (i, el) {
//console.log("Index: " + i + ". Value: " + $(this).val());
//Set the value of the sort index input to the index
$(this).val(i);
});
you can do this in one method with Html Table
Create the same thing inside a table
Then allow user to drag and drop the list
finaly get the table rows as a list with the javascript
Above list will be in user arranged way, I will add an example code below
You sort this list as your wish and click the 'ClickMe' button
this code for your reference only,it is different from your code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Easy Drag and Drop HTML Table Rows With jQuery</title>
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/4.0/examples/starter-template/starter-template.css" rel="stylesheet">
</head>
<body>
<main role="main" class="container">
<table class="table table-striped table-hover" id="tbl">
<thead class="thead-dark">
<tr>
<th>Row</th>
<th>Name</th>
<th>ID Number</th>
<th>Location</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Rahim Hawkins</td>
<td>1640060874099</td>
<td>Bursa</td>
<td>May 29, 2017</td>
</tr>
<tr>
<td>02</td>
<td>Carter James</td>
<td>1672062705399</td>
<td>Geer</td>
<td>Mar 30, 2019</td>
</tr>
<tr>
<td>03</td>
<td>Merritt Fernandez</td>
<td>1669120981299</td>
<td>Gooik</td>
<td>Jun 3, 2017</td>
</tr>
<tr>
<td>04</td>
<td>Ross Robbins</td>
<td>1640092139299</td>
<td>Lint</td>
<td>Mar 22, 2018</td>
</tr>
<tr>
<td>05</td>
<td>Allistair Warren</td>
<td>1690102625999</td>
<td>Bicester</td>
<td>Dec 22, 2017</td>
</tr>
<tr>
<td>06</td>
<td>Yoshio Finch</td>
<td>1643051322099</td>
<td>Baulers</td>
<td>Sep 15, 2018</td>
</tr>
<tr>
<td>07</td>
<td>Wylie Holland</td>
<td>1662122249099</td>
<td>Penicuik</td>
<td>Apr 22, 2018</td>
</tr>
<tr>
<td>08</td>
<td>Maxwell Lindsay</td>
<td>1637021237499</td>
<td>St. John's</td>
<td>Nov 30, 2018</td>
</tr>
<tr>
<td>09</td>
<td>Orson Schneider</td>
<td>1610061567599</td>
<td>Gresham</td>
<td>Mar 7, 2018</td>
</tr>
<tr>
<td>10</td>
<td>Ahmed Puckett</td>
<td>1626021923499</td>
<td>Valbrevenna</td>
<td>Jul 20, 2018</td>
</tr>
</tbody>
</table>
<button onclick="fun()">ClickMe</button>
</main><!-- /.container -->
<!-- Bootstrap & Core Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('tbody').sortable();
function fun(){
var table = document.getElementById("tbl");
var noOfrows=table.rows.length;
var res = new Array(noOfrows);
for (var i=0;i<noOfrows;i++){
res[i]=table.rows[i].cells[0].innerHTML;
}
alert(res);
}
</script>
</body>
</html>
Im learnign angularJs, and i want to import an array from a json on my controller Like that:
myApp.controller("demoCtrl", function ($scope, $http) {
var promise = $http.get("todo.json");
promise.then(function (data) {
$scope.todos = data;
});
});
and im using a table to display the data on todos:
<table class="table">
<tr>
<td>Action</td>
<td>Done</td>
</tr>
<tr ng-repeat="item in todos">
<td>{{item.action}}</td>
<td>{{item.done}}</td>
</tr>
</table>
and this results on the flowing html page:
<!DOCTYPE html>
<html ng-app="demo">
<head>
<title>Example</title>
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/bootstrap-theme.css" rel="stylesheet" />
<script src="angular.js"></script>
<script type="text/javascript">
var myApp = angular.module("demo", []);
myApp.controller("demoCtrl", function ($scope, $http) {
var promise = $http.get("todo.json");
promise.then(function (data) {
$scope.todos = data;
});
});
</script>
</head>
<body ng-controller="demoCtrl">
<div class="panel">
<h1>To Do</h1>
<table class="table">
<tr>
<td>Action</td>
<td>Done</td>
</tr>
<tr ng-repeat="item in todos">
<td>{{item.action}}</td>
<td>{{item.done}}</td>
</tr>
</table>
</div>
</body>
The normal way of getting access to the json is from the data within the returned object from the http request - you are tying to use the entire returned object.
I use "response" as the return from the get request - then the data is "response.data". This is needed because there are other properties returned within the response object from the get request.
Try changing your promise to be as follows:
promise.then(function (response) {
$scope.todos = response.data;
});
Also you should be having a thead and th's and tbody in the table to show a more semantically correct table
<table class="table">
<thead>
<tr>
<th scope="col">Action</th>
<th scope="col">Done</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in todos">
<td>{{item.action}}</td>
<td>{{item.done}}</td>
</tr>
</tbody>
</table>
Promise return entire response in callback Data is in response.data
myApp.controller("demoCtrl", function ($scope, $http) {
var promise = $http.get("todo.json");
// Entire response in callback
promise.then(function (response) {
$scope.todos = response.data; // Data is in response.data
});
});
More: https://docs.angularjs.org/api/ng/service/$http
So this is my code
<script>
export default {
name: "app",
data() {
return {
items: []
};
},
created: function() {
this.makeAjaxCall("books.json", "get").then(res => {
this.items = res
return res
}),
this.makeAjaxCall("authors.json", "get").then(resA => {
this.items = resA
return resA
})
},
methods: {
makeAjaxCall:function(url, methodType){
var promiseObj = new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.open(methodType, url, true);
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4){
if (xhr.status === 200){
//alert("xhr done ok");
var response = xhr.responseText;
var respJson = JSON.parse(response);
resolve(respJson);
} else {
reject(xhr.status);
//alert("xhr failed");
}
} else {
//alert("xhr processing");
}
}
//alert("request sent succesfully");
});
return promiseObj;
}
}
};
</script>
<template>
<div id="app">
<table class="booksTable">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Image</th>
<th>Availability</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items.books" :key="item.name">
<td>{{item.name}}</td>
<td>{{item.author}}</td>
<td>{{item.genre}}</td>
<td><img id="imageBook" :src="item.imageUrl"></td>
</tr>
</tbody>
</table>
</div>
</template>
I have the function makeAjaxCall that brings me the books.json, but I want to use it for multiple jsons.
I tried to call it under created, with a different json, authors.json, but it doesn't work.
I guess the syntax is wrong.
I know the function could have been created better, but I would like to keep its initial form or maybe add a parameter to be the json file.(Tried that, but didn't work for me)
Any ideas, pretty please?
To bind the data you have to declare first items: {books:[],authors:[]}
Also you are overwriting this.items use this.items.books and this.items.authors to assign.
Below is the example which works without ajax
new Vue ({
el: "#app",
data() {
return {
items: {books:[],authors:[]}
};
},
created: function() {
this.items.books = this.makeAjaxCall("books", "get");
this.items.authors = this.makeAjaxCall("authors", "get");
},
methods: {
makeAjaxCall:function(url, methodType){
if(url == 'books'){
promiseObj= [{name:'name11',author:'author11',genre:'genre11'},{name:'name12',author:'author12',genre:'genre12'}]
}else{
promiseObj= [{name:'name22',author:'author22',genre:'genre22'}]
}
return promiseObj;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
<div id="app">
<table class="booksTable">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items.books" :key="item.name">
<td>{{item.name}}</td>
<td>{{item.author}}</td>
<td>{{item.genre}}</td>
<td><img :src="item.imageUrl"></td>
</tr>
</tbody>
</table>
<table class="authorsTable">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items.authors" :key="item.name">
<td>{{item.name}}</td>
<td>{{item.author}}</td>
<td>{{item.genre}}</td>
<td><img :src="item.imageUrl"></td>
</tr>
</tbody>
</table>
</div>
So I found the answer, after millions of tries and it's pretty simple.
<script>
import './styling.scss'
export default {
name: "app",
data() {
return {
items: {books:[], authors:[]}
};
},
created: function() {
this.makeAjaxCall("books.json", "get").then(res => {
this.items.books = res.books;
return res;
}),
this.makeAjaxCall("authors.json", "get").then(res => {
this.items.authors = res.authors;
return res;
})
},
methods: {
makeAjaxCall:function(url, methodType){
var promiseObj = new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.open(methodType, url, true);
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4){
if (xhr.status === 200){
//alert("xhr done ok");
var response = xhr.responseText;
var respJson = JSON.parse(response);
resolve(respJson);
} else {
reject(xhr.status);
//alert("xhr failed");
}
} else {
//alert("xhr processing");
}
}
//alert("request sent succesfully");
});
return promiseObj;
}
}
};
</script>
<template>
<div id="app">
<table class="booksTable">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Image</th>
<th>Availability</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items.books" :key="item.name">
<td>{{item.name}}</td>
<td>{{item.author}}</td>
<td>{{item.genre}}</td>
<td><img id="imageBook" :src="item.imageUrl"></td>
<td>
<button class="btn add"> Add</button>
<button class="btn edit"> Edit</button>
<button class="btn delete"> Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
I'm trying to fill a table based on the selected tab, I'm using JQuery-UI tabs library with ajax, the problem is that only the last function
$('#tabs, #tab-4').tabs()
is working (Actually all functions are executed but I can see only the last one), therefore it only brings the information from the last tab. I'm not sure if i'm doing the things right.
<ul id="tabs">
<li>Abiertos</li>
<li>Solucionados</li>
<li>Cerrados</li>
<li>Cancelados</li>
</ul>
<div class="containerTab" id="tab-1">
<table class="table table-striped" id="records_table">
<thead>
<tr>
<th class="text-center">Id</th>
<th class="text-center">Cliente</th>
<th class="text-center">Producto</th>
<th class="text-center">Descripción</th>
<th class="text-center">Fecha</th>
<th class="text-center">Incidente</th>
<th class="text-center">Operación</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
</div>
<div class="containerTab" id="tab-4">
<table class="table table-striped" id="records_table4">
<thead>
<tr>
<th class="text-center">Id</th>
<th class="text-center">Cliente</th>
<th class="text-center">Producto</th>
<th class="text-center">Descripción</th>
<th class="text-center">Fecha</th>
<th class="text-center">Incidente</th>
<th class="text-center">Cancelado por</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
</div>
This is my script section (I removed tab-2 and tab-3 for the sake of not making it longer)
$('#tabs, #tab-1').tabs({
activate: function (event, ui) {
$("#records_table tbody tr").remove();
$.ajax({
type: "POST",
url: "/Servicios/GetIncidentes",
contentType: "application/json; charset=utf-8",
data: "{'incidente':'Abiertos'}",
dataType: "json",
success: function (response) {
$(function () {
$.each(response, function (i, item) {
var $tr = $('<tr>').append(
$('<td>').text(item.Id).addClass('text-center'),
$('<td>').text(item.Cliente).addClass('text-center'),
$('<td>').text(item.Producto).addClass('text-center'),
$('<td>').text(item.Descripcion).addClass('text-center'),
$('<td>').text(item.Fecha).addClass('text-center'),
$('<td>').text(item.Incidente).addClass('text-center'),
$('<td>').text('').addClass('text-center').prepend($('<i />', { 'class': 'fa fa-eye' }))
).appendTo('#records_table');
});
});
},
error: function (ts) { alert(ts.responseText) }
})
}
});
$('#tabs, #tab-4').tabs({
activate: function (event, ui) {
$("#records_table4 tbody tr").remove();
$.ajax({
type: "POST",
url: "/Servicios/GetIncidentes",
contentType: "application/json; charset=utf-8",
data: "{'incidente':'Cancelados'}",
dataType: "json",
success: function (response) {
$(function () {
$.each(response, function (i, item) {
var $tr = $('<tr>').append(
$('<td>').text(item.Id).addClass('text-center'),
$('<td>').text(item.Cliente).addClass('text-center'),
$('<td>').text(item.Producto).addClass('text-center'),
$('<td>').text(item.Descripcion).addClass('text-center'),
$('<td>').text(item.Fecha).addClass('text-center'),
$('<td>').text(item.Incidente).addClass('text-center'),
$('<td>').text('').addClass('text-center').prepend($('<i />', { 'class': 'fa fa-eye' }))
).appendTo('#records_table4 tbody');
});
});
},
error: function (ts) { alert(ts.responseText) }
})
}
});
The GetIncidentes method recieves a string (string incidente) and returns a parsed Json list.
I am new to angularjs. I want to display the data in the following json file using ng-repeat.
http://www.cricbuzz.com/api/match/current
But I'm confused as there is a number in the data as key to each object. Can someone help me?
THis is a basic way to do it
Partial
<div ng-controller="Ctrl" >
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td>#{{ row.id}}</td>
<td>{{ row.series.name | uppercase }}</td>
</tr>
</tbody>
</table>
</div>
Controller
angular.module('app').controller('Ctrl', ['$scope', 'Resource', function ($scope, Resource) {
var pageChanged = function () {
$scope.myPromise = Resource.get({}, function (response) {
$scope.rows = response;
});
};
pageChanged();
}])
.factory('Resource', ['$resource', function($resource) {
return $resource('http://www.cricbuzz.com/api/match/current', {
}, {
'get': {
method: 'GET',
headers: {"Content-Type": "application/json"}
}
});
}]);