I have a problem with ExtJS and c# does not show me any data only header, I just want to show the records of my sql table, but I could not, my backend works fine and if it returns the records of my BD, the problem is that it does not they are binding, reason why I believe that my JS file is bad and did not find the error so that the registers are shown.
data that return GetCustomer method
app.js:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*',
'Ext.util.*'
]);
Ext.application({
name: 'Fiddle',
launch: function () {
var myStore = new Ext.data.JsonStore({
// Load data at once
autoLoad: true,
// Override default http proxy settings
proxy: new Ext.data.HttpProxy({
pageParam: false, //to remove param "page"
startParam: false, //to remove param "start"
limitParam: false, //to remove param "limit"
noCache: false, //to remove param "_dc"
// Call web service method using GET syntax
url: 'GetCustomers',
// Ask for Json response
headers: {
'Content-type': 'application/json'
}
}),
// Root variable
root: 'data',
// Record identifier
id: 'EmpleadoId',
//reader:Jreader,
// Fields declaration
fields: ['EmpleadoId', 'NombreEmpleado', 'DirectorId'],
});
var grid = new Ext.grid.GridPanel({
// Set store
store: myStore,
// Columns definition
columns: [{
dataIndex: 'EmpleadoId',
header: 'Empleado Id'
}, {
dataIndex: 'NombreEmpleado',
header: 'Nombre Empleado'
}, {
dataIndex: 'DirectorId',
header: 'Director Id'
}],
// Render grid to dom element with id set to panel
renderTo: 'whitespace',
width: 422,
height: 300
});
}
});
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/charts-all.css" rel="stylesheet" />
<script src="~/Scripts/ext-all.js"></script>
<script src="~/Scripts/app.js"></script>
</head>
<body>
<div id="whitespace"></div>
<div>
</div>
</body>
</html>
Controller:
public JsonResult GetCustomers()
{
List<Empleados> lstPersona = new List<Empleados>();
SqlConnection con = new SqlConnection("Server=PC;Database=TestPersona;Trusted_Connection=yes;");
SqlCommand cmd = new SqlCommand("SELECT EmpleadoId,NombreEmpleado,DirectorId FROM Empleados", con);
cmd.CommandType = CommandType.Text;
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
Empleados emp = new Empleados();
emp.EmpleadoId = Convert.ToInt16(dr["EmpleadoId"]);
emp.NombreEmpleado = dr["NombreEmpleado"].ToString();
emp.DirectorId = Convert.ToInt16(dr["DirectorId"]);
lstPersona.Add(emp);
}
con.Close();
JsonResult res = Json(new { data = lstPersona }, JsonRequestBehavior.AllowGet);
return res;
}
Related
I want to add somes filters on my reports power bi embedded, i have an html file, and i need to add somes filters in javascript but i dont have experience as a developer. I just need to see an exemple to see how to add it.
<head> `enter code here`
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>test</title>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://rawgit.com/Microsoft/PowerBI-JavaScript/master/dist/powerbi.min.js"></script>
</head>
<body>
<h1>test</h1>
<div id="reportContainer" style="width: 80%; height: 800px;"></div>
</body>
<script>
$(document).ready(function () {
var getEmbedToken = "https://testclienttest.azurewebsites.net/api/HttpTrigger1?code=XXXXXXXXXXXXXXXXXXX/XXXXXXXXXXXXX==";
$.ajax({
url: getEmbedToken,
jsonpCallback: 'callback',
contentType: 'application/javascript',
dataType: "jsonp",
success: function (json) {
var models = window['powerbi-client'].models;
var embedConfiguration = {
type: 'report',
id: json.ReportId,
embedUrl: json.EmbedUrl,
tokenType: models.TokenType.Embed,
accessToken: json.EmbedToken
};
var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
},
error: function () {
alert("Error");
}
});
});
</script>
</html>
i think the filters to add is after this line : var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
To filter your embed report, you must construct one or more filters and pass them as array to the JavaScript client - either in filters property of embedConfiguration, or as a parameter to report/page/visual setFilters method.
The filters can be from one of these types:
IBasicFilter
IAdvancedFilter
IRelativeDateFilter
ITopNFilter
IIncludeExcludeFilter
For example, to filter table named Product to show only data, where Count column is 1, 2 or 3 can be constructed as follows:
const basicFilter: pbi.models.IBasicFilter = {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "Product",
column: "Count"
},
operator: "In",
values: [1,2,3],
filterType: 1 // pbi.models.FilterType.BasicFilter
}
Then modify your code to pass this filter to embedConfiguration:
var embedConfiguration = {
type: 'report',
id: json.ReportId,
embedUrl: json.EmbedUrl,
tokenType: models.TokenType.Embed,
accessToken: json.EmbedToken,
filters: [basicFilter]
};
For more information about configuring the embed element, see Embed Configuration Details and to see more information on how to use different filter types and applying them, see Filters.
#Andrey Nikolov
Thank you for your answer but i have an error when i add this line : filters: [basicFilter] to the Embedconfiguration for example in my case i want to filter just with table : "Contract" and column: "IdContract".
So it will be like that :
const basicFilter: pbi.models.IBasicFilter = {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "Contract",
column: "IdContract"
},
operator: "In",
values: [123456],
filterType: 1 // pbi.models.FilterType.BasicFilter
}
Then
var embedConfiguration = {
type: 'report',
id: json.ReportId,
embedUrl: json.EmbedUrl,
tokenType: models.TokenType.Embed,
accessToken: json.EmbedToken,
filters: [basicFilter]
};
I dont know if this is what you meant...
I want to display data from bid table in a form of datatable. But I get this error
"Trying to get property 'bids' of non-object" if it doesn't have bids.The bids model is connected to auction model and the auction model is connected to media site model. How to make it display blank record if it doesn't have data.
Here is my controller:
<?php
namespace App\Http\Controllers;
use App\Auction;
use App\Bid;
use App\User;
use App\Media;
use App\MediaSite;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class MediaSiteController extends Controller
{
public function show(MediaSite $mediaSite)
{
$auction = $mediaSite->auction;
$bids = $auction->bids;
return view('admin.media-site.show', ['mediaSite' => $mediaSite,'auction' => $auction], compact('auction'));
}
My view:
<body>
<div id="datatable-bid"></div>
</body>
<script>
$(document).ready(function () {
var datatableBid = $('#datatable-bid').mDatatable({
// datasource definition
data: {
type: 'local',
source: {!! json_encode($auction->bids) !!},
pageSize: 10
},
// layout definition
layout: {
theme: 'default', // datatable theme
class: '', // custom wrapper class
scroll: false,
footer: false // display/hide footer
},
// column sorting
sortable: true,
pagination: true,
search: {
input: $('#panel-search')
},
// columns definition
columns: [
{
field: "price",
title: "Price",
}, {
field: "month",
title: "Month",
},{
field: "user_id",
title: "User Id",
}
]
});
</script>
Here is my error:
Trying to get property 'bids' of non-object
place following after $auction = $mediaSite->auction;
if($auction){
$bids = $auction->bids;
}else{
//put following line or whatever you need to do if there is no data comes
$auction = [];
}
In the show() function make these changes
$auction = $mediaSite->auction;
if($auction) {
$bids = $auction->bids;
} else {
$bids = [];
}
// now send $bids to view along with $auction
// may be like this
// return view(..., compact($auction, $bids));
Then, in your view make this change
// datasource definition
data: {
type: 'local',
source: {!! json_encode($bids) !!},
pageSize: 10
},
See if this helps.
I have a grid with dynamic columns:
MODEL
Ext.define('App.mdlCriteriosConcurso', {
extend: 'Ext.data.Model',
fields: [
]
});
STORE
Ext.define('App.strCriteriosConcurso', {
extend: 'Ext.data.Store',
model: 'App.mdlCriteriosConcurso',
autoLoad: false,
proxy: {
type: 'ajax',
api: {
read: 'some url',
update: 'some url',
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
},
writer: {
root: 'records',
encode: true,
writeAllFields: true
}
}
});
GRID
var almacenCriteriosConcurso = Ext.create('App.strCriteriosConcurso');
//Some code ...
{
xtype:'grid',
itemId:'gridCriteriosConcursoV4',
store:almacenCriteriosConcurso,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 2})],
columns:[]
}
//Some code...
CONTROLLER
Here in the controller I have the next piece of code:
Ext.ComponentQuery.query('viewFichaDetalle #tabpanelsecundario4_1 #gridCriteriosConcursoV4')[0].getStore().addListener('metachange',function(store,meta){
var columnas=0;
var renderer1 = function(v,params,data){
if(v==''){
return '<div style="background-color:#F5FAC3;color:blue;">'+Ext.util.Format.number(0,'0.000,00/i')+'</div>';
}
else{
return '<div style="background-color:#F5FAC3;color:blue;">'+Ext.util.Format.number(v,'0.000,00/i')+'</div>';
}
};
var renderer2 = function(v,params,data){
if(v=='' || v==0){
return '<div style="background-color:#F5FAC3;color:green;">'+Ext.util.Format.number(0,'0.000,00/i')+'</div>';
//return '';
}
else{
return '<div style="background-color:#F5FAC3;color:green;">'+Ext.util.Format.number(v,'0.000,00/i')+'</div>';
}
};
Ext.each(meta.columns,function(col){
if(columnas==2){
meta.columns[columnas].renderer = renderer1;
}
if(columnas>=3){
meta.columns[columnas].renderer = renderer2;
}
columnas++;
},this);
Ext.suspendLayouts();
Ext.ComponentQuery.query('viewFichaDetalle #tabpanelsecundario4_1 #gridCriteriosConcursoV4')[0].reconfigure(store, meta.columns);
Ext.ComponentQuery.query('viewFichaDetalle #tabpanelsecundario4_1 #gridCriteriosConcursoV4')[0].setTitle("<span style='color:red;font-weight:bold;font-size: 12pt'>Criterios del Concurso con ID:</span> "+"<span style='color:black;font-weight:bold;font-size: 12pt'>"+this.IdConcurso+"</span>");
Ext.resumeLayouts(true);
},this);
I create the columns in the php, using the metadata.
With this code I add some renderers to the grid columns. And I see all the data perfect, and can edit the data.
In the php y generate the column and the field like this:
$array_metadata['columns'][]=array("header"=>"<span style='color:blue;'>Resultado</span>","dataIndex"=>"puntos_resultado","width"=>82,"align"=>"right","editor"=>"textfield");
$array_metadata['fields'][]=array("name"=>"puntos_resultado","type"=>"float");
And then pass $array_metadata to 'metaData' response.
But when I try to sync or autosync the store I get this error:
Uncaught TypeError: Cannot read property 'name' of undefined
at constructor.getRecordData (ext-all-dev.js:62247)
at constructor.write (ext-all-dev.js:62192)
at constructor.doRequest (ext-all-dev.js:102306)
at constructor.update (ext-all-dev.js:101753)
at constructor.runOperation (ext-all-dev.js:106842)
at constructor.start (ext-all-dev.js:106769)
at constructor.batch (ext-all-dev.js:62869)
at constructor.sync (ext-all-dev.js:64066)
at constructor.afterEdit (ext-all-dev.js:64162)
at constructor.callStore (ext-all-dev.js:101428)
UPDATE 1
I have fount this thread in Sencha Forums link , and I have tried all posibles solutions and Im getting allways the same error.
The error tells us that you don't fill the model's fields array properly, because that is where name is a required config. In ExtJS 4, you have to add all fields to the model for the sync to work properly.
To be exact, the Model prototype has to be filled with the correct fields before the instances are created.
This means that you will have to override the reader's getResponseData method, because between Ext.decode and readRecords you will have to prepare the model prototype by setting the fields as returned from the server; something like this:
App.mdlCriteriosConcurso.prototype.fields = data.fields;
Im trying to create search help using Odata service but my table is showing as undefined in controller, here is my code plz help
index.html
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>search_help</title>
<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table,sap.ui.ux3"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"search_help": ""}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "search_help"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
view1.view.js
sap.ui.jsview("search_help.view.View1", {
getControllerName: function() {
return "search_help.controller.View1";
},
createContent : function(oController) {
var oPanel = new sap.ui.commons.Panel({
text : "Select Order ID"
});
var oLayoutMatrix = new sap.ui.commons.layout.MatrixLayout({
width : "60%",
widths : [ "30%", "40%", "30%" ]
});
var oOrderLabel = new sap.ui.commons.Label("idOrderLabel",
{text: "Order ID"});
// Input Field for Material Number with Value Help
var oOrderInput = new sap.ui.commons.ValueHelpField("idOrderInput", {
valueHelpRequest: function(oEvent){
var oValueHelpDialog = new sap.ui.ux3.ToolPopup({
modal: true,
inverted: false,
title: "Select Order Number",
opener: "idOrderInput",
closed: function (oEvent){
}
});
var oOkButton = new sap.ui.commons.Button({
text: "OK",
press: function (oEvent) {
oEvent.getSource().getParent().close();
}
});
var oHelpTable = new sap.ui.table.Table("pTab1",{
selectionMode: sap.ui.table.SelectionMode.Single,
visibleRowCount: 7,
width: "300pt"
});
oHelpTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Maintenance Plane"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Planplant"),
sortProperty: "Planplant",
filterProperty: "Planplant"
})
);
oHelpTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Order Number"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Orderid"),
sortProperty: "Orderid",
filterProperty: "Orderid"
})
);
oHelpTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "OrderType"}),
template: new sap.ui.commons.TextField().bindProperty("value", "OrderType"),
sortProperty: "OrderType",
filterProperty: "OrderType"
})
);
oValueHelpDialog.addContent(oHelpTable);
oValueHelpDialog.addButton(oOkButton);
oValueHelpDialog.open();
}
});
oLayoutMatrix.createRow(oOrderLabel, oOrderInput);
oPanel.addContent(oLayoutMatrix);
return oPanel;
}
});
view1.controller.js
here otable is showing as undefined
sap.ui.define([
"sap/ui/core/mvc/Controller"], function(Controller) {
"use strict";
return Controller.extend("search_help.controller.View1", {
onInit: function()
{
var oModel = new sap.ui.model.odata.ODataModel("/Gateway_Order/sap/opu/odata/SAP/ZP01_FIORI_SRV_01/");
var oTable = this.byId("pTab1");
oTable.setModel(oModel);
oTable.bindRows("/OrderDataSet");
}
});
});
Your problem is how you are fetching the Id of your table.
Solution to your problem is :
var oTable = sap.ui.getCore().byId("pTab1");
However, let us understand the Id creation and fetching.
In JS Views, there are two ways to create Ids.
Way 1: : Provide direct Id. Eg:
var oText = new sap.m.Text('idText'{ text:'Hey!'});
Now, this id -'idText' is associated with your entire application. So, if you have another view, which has a control with same id, you will see duplicate id error in console.
To fetch controls with ids creating with Way1, use the below method:
var oControl = sap.ui.getCore().byId('idText'); // since this is unique everywhere in your application.
Now, let us think 2 or more developers are working in an application and they are creating different views for the application. They may ( with high possibility), create controls with same id. The application will crash when we integrate both views due to duplicate id error. How to solve this?
Way 2: We can use the method createId() of the controller to create a Id for prefixed with view's id. So, this way even if two developers are using the same id, they will end up with different id for controls due to different view Id.
So, let us think we have two views, View1 ( id: view1) and view2 ( id:view2).
If I create a control with same Id in both the controls (using createId() method of controller), two unique id will be generated and duplicate id error will never be raise.
So, View 1( id: view1):
var oText = new sap.m.Text(oController.createId('idText'),{ text:'Hey!'});
Id of oText in view 1 : view1--idText
Similarly,
View 2( id: view2):
var oText = new sap.m.Text(oController.createId('idText'),{ text:'Hey!'});
Id of oText in view 2 : view2--idText
Nicely done. But what if Id of view is auto generated and I might not know what is my view Id? Good question.
Solution is the method : this.byId(). In the cases, where id of controls are prefixed with view's id, always use the method this.byId(). It will append the view's id for you and then search and return the control unique to that view.
So, to fetch oText of View1, you will use (in View1's controller);
var oText = this.byId('idText')// will fetch view1--idText
Again to fetch oText of View2, you will use (in View2's controller);
var oText = this.byId('idText')// will fetch view2--idText
IN XML Views, Id of controls are always prefixed with view's id by framework automatically. This is similar to our Way 2 of JS. ( Way 1 of JS is never possible in XML Views).
View code:
<Text id='idText' text='hey! /> <!-- Id generated is: 'viewid--idText' -->
Hence, when you use XML views, fetching of ID is always done by:
var oControl = this.byId('idText');
I got the output list from odata service to the valuehelprequest table but not able to filter the data.
sap.ui.define([
"sap/ui/core/mvc/Controller
], function(Controller) {
"use strict";
return Controller.extend("Xml_Search.controller.View1", {
handlef4: function(){
var oInput= this.getView().byId("Orderid");
if(!this._oValueHelpDialog){
this._oValueHelpDialog= new sap.ui.comp.valuehelpdialog.ValueHelpDialog("idValueHelp",{
// supportRanges: true,
key: "Orderid",
descriptionKey: "OrderType",
ok: function(oEvent){
var aTokens= oEvent.getParameter("tokens");
oInput.setTokens(aTokens);
this.close();
},
cancel: function(){
this.close();
}
});
}
var oColModel = new sap.ui.model.json.JSONModel();
oColModel.setData({
cols: [
{label: "Orderid", template: "Orderid"},
{label: "OrderType", template: "OrderType"},
{label: "Planplant", template: "Planplant"}
]
});
var oTable = this._oValueHelpDialog.getTable();
oTable.setModel(oColModel,"columns");
var oModel = new sap.ui.model.odata.ODataModel("/Gateway_Order/sap/opu/odata/SAP/ZP01_FIORI_SRV_01/");
oTable.setModel(oModel);
oTable.bindRows({path: "/OrderDataSet", filters: [new
sap.ui.model.Filter("Orderid",sap.ui.model.FilterOperator.EQ,null, oInput)]}
);
this._oValueHelpDialog.open();
}
});
});
I am trying to populate highchart by sending data through servlet . My servlet is like:
package com.sandeep.visual.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import com.sandeep.visual.data.Student;
#WebServlet("/StudentJsonDataServlet")
public class StudentJsonDataServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public StudentJsonDataServlet() {
super();
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
List<Student> listOfStudent = getStudentData();
Gson gson = new Gson();
String jsonString = gson.toJson(listOfStudent);
response.setContentType("application/json");
response.getWriter().write(jsonString);
}
private List<Student> getStudentData() {
List<Student> listOfStudent = new ArrayList<Student>();
Student s1 = new Student();
s1.setName("Sandeep");
s1.setComputerMark(75);
s1.setMathematicsMark(26);
listOfStudent.add(s1);
Student s2 = new Student();
s2.setName("Bapi");
s2.setComputerMark(60);
s2.setMathematicsMark(63);
listOfStudent.add(s2);
Student s3 = new Student();
s3.setName("Raja");
s3.setComputerMark(40);
s3.setMathematicsMark(45);
listOfStudent.add(s3);
Student s4 = new Student();
s4.setName("Sonu");
s4.setMathematicsMark(29);
s4.setComputerMark(78);
listOfStudent.add(s4);
return listOfStudent;
}
}
And I am able to get the desired json in my html page as:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Dynamic HighChart</title>
<script type="text/javascript" src="./js/jquery.min_1.8.2.js"></script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "GET",
url: 'StudentJsonDataServlet',
dataType: "json",
contentType: "application/json",
crossDomain: true,
success: function (data) {
console.log(data);
// Populate series
var nameArr = new Array();
var processed_json = new Array();
for (i = 0; i < data.length; i++) {
nameArr.push([data[i].name]);
processed_json.push([parseInt(data[i].mathematicsMark),parseInt(data[i].computerMark)]);
}
console.log("name array : " + nameArr);
console.log("FinalArray : " + processed_json);
// draw chart
$('#container').highcharts({
chart: {
type: "line"
},
title: {
text: "Marks obtained"
},
xAxis: {
categories: [nameArr]
},
yAxis: {
title: {
text: "Marks obtained"
}
},
series: [{
name: nameArr,
data: processed_json
}]
});
}
});
});
</script>
</body>
</html>
Now the best thing is that I am able to populate the HighChart but it doesn't appear as I want it to.
I have tried the same above example using google chart and I am getting something like this:
Which is my intended result what I want to get.
But with highchart I am getting something like this:
How can I achieve the same result shown in picture 1 through highChart.
Looking forward to your solutions. Thanks in advance.
To achieve that result, you need to create two series in the beginning:
var series = [{
name: "Mathematics mark",
data: []
}, {
name: "Computer mark",
data: []
}];
Now, add points (marks) to these series:
$.each(data, function(i, point) {
series[0].data.push([
point.name,
parseInt(point.mathematicsMark)
]);
series[1].data.push([
point.name,
parseInt(point.computerMark)
]);
});
Now, set xAxis.type as category, so points' names will be used as xAxis labels:
$('#container').highcharts({
xAxis: {
type: 'category'
},
series: series
});
Working demo: https://jsfiddle.net/sg9rghyg/
Here is working fiddle
Update as per JSON shared , below is complete code:
var seriesData=[];
var data =[{"name":"Sandeep","mathematicsMark":26,"computerMark":75}, {"name":"Bapi","mathematicsMark":63,"computerMark":60},{"name":"Raja","mathematicsMark":45,"computerMark":40},{"name":"Sonu","mathematicsMark":29,"computerMark":78}] ;
$.each (data, function(i){
seriesData.push({name:data[i].name,data: [parseInt(data[i].mathematicsMark),parseInt(data[i].computerMark)]});
}) ;
Use this seriesData in chart
Instead of separate arrays of names and data
[{
name: nameArr,
data: processed_json
}]
Do As below:
[{
name: data[i].name,
data: [parseInt(data[i].mathematicsMark),parseInt(data[i].computerMark)] // or your processed_json
}]