I'm working in a project to help a friend, so most of the code in the services and the backend was already there, so I've been struggling with the structure and sometimes I get lost.
Here's my problem
This is the structure of the data on the API:
{
"title": "",
"iconURL": ",
"linkedRightsIDs": [
""
],
"linkedRights": [
{
"id": ,
"creationDate": "",
"sections": [
"women"
],
"defLanguage": "en",
"countryApplied": "united states",
"statesApplied": [
"all"
],
"title": "",
"translations": [
"en"
],
"disable": false,
"content": null
}
]
}
What I'm trying to achieve, is to make a table inside my component using the LinkedRights data. Right now, this structure only have 1 linkedRight (I deleted the data inside for privacy)
Anyways, here's the method regarding the service and model in my component.ts:
onModelLoadedAsync() {
super.onModelLoadedAsync();
if (this.mode == 'create') {
this.model = LocalityInfo;
} else {
if (this.model.iconURL){
this.imageSrc = this.model.iconURL;
}
}
if(this.mode == 'edit'){
const data= Object.entries(this.model.linkedRights); //this is me just testing
console.log(data);
}
}
here's the html of the table I'm trying to display, this is and edit route so there's a query param for the id in this view
<div class="table-responsive">
<table class="table table-hover">
<thead class="thead-dark">
<tr>
<th>Title</th>
<th>Sections</th>
<th>States</th>
<th>Enabled</th>
<th>Creation Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of data">
<td>{{item.title}}</td>
<td>{{item.sections}}</td>
<td>{{item.statesApplied}}</td>
<td>{{!item.disabled}}</td>
<td>{{item.creationDate}}</td>
</tr>
</tbody>
</table>
</div>
</div>
What I was trying to do, was to convert the JSON into an array so I could display it since there's an error that shows on the console that said this:
core.js:6456 ERROR Error: Cannot find a differ supporting object '[object Object]' of type'object'. NgFor only supports binding to Iterables such as Arrays.
I am building an internal app that displays data in an HTML table. The API returns me an array of up to 20K objects which are stored in data() and the table is populated by each cell calling a method to find the correct object. The object is located via a 3-part key (2 for the row and 1 for the column). Initial rendering performance on my laptop (i7 7thGen and 8GB ram) is acceptable [about 1 minute] for initial render (excel app it is replacing takes almost 3), however an update to a single cell (object in the array) triggers the change detection and an update takes another minute. Sometimes the user will want to update a single cell, sometimes a row and sometimes propagate a change on all rows(or some selected rows) for a single column. Is there a recommended strategy for performance enhancement. I was thinking of restructuring the data that comes back into an object per row (2-part key) with a collection of objects for the column (1-part key). This would mean that the method call will only have to iterate over 2500 'row' objects and then over 8 'column' objects which feels logically like it should be faster but will now consume more memory. I need to be able to identify which objects have changed at a table cell level as I need to write the changes back to the database. Should I discard the original API results and re-hydrate on save or would an option be to use Object.freeze to prevent reactivity on the original array and write changes to a separate array which then takes precedence if a record exists.
[
{
key1:value,
key2:value,
key3:valueA,
displayValue:value
},
{
key1:value,
key2:value,
key3:valueB,
displayValue:value2
},
{
key1:value,
key2:value,
key3:valueC,
displayValue:value3
}...
{
key1:value2,
key2:value2,
key3:valueA,
displayValue:value
},
{
key1:value2,
key2:value2,
key3:valueB,
displayValue:value2
},
{
key1:value2,
key2:value2,
key3:valueC,
displayValue:value3
}...
]
becomes
[
{
key1:value,
key2:value,
key3collection:[
{key3:valueA, displayvalue:value},
{key3:valueB, displayvalue:value2},
{key3:valueC, displayvalue:value3}
]
},
{
key1:value2,
key2:value2,
key3collection:[
{key3:valueA, displayvalue:value},
{key3:valueB, displayvalue:value2},
{key3:valueC, displayvalue:value3}
]
},
]
What I would do is to convert API response (directly on server if you control API or on the client) to something like this:
{
columns: ['ValueA', 'ValueB', 'ValueC'] // same for every row, right ?
rows: [
{
key1:value,
key2:value,
values:[ 'value', 'value2', 'value3' ]
}, {
key1:value2,
key2:value2,
values:[ 'value', 'value2', 'value3' ]
}, ....
]
I'm working with an assumption that every row has same set of columns so why to keep duplicity in the data.
That way you can render the table by following template (pseudo code) without any additional data lookups:
<table>
<thead>
<tr>
<th v-for="column in data.columns">{{ column }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in data.rows">
<td v-for="(rowItem, columnIndex) in row.values">{{ rowItem }}</td>
</tr>
</tbody>
</table>
For change tracking (so you can later send it back to API) just add simple array alongside values like isDirty: [ fasle, false, false ] and change it to true every time you update some cell. When posting just iterate over data structure and recreate updated objects in the format your API expects it....
My question is about how can I edit, delete and add data in Datatables
jsfiddle CODE
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Test</th>
<th>Description</th>
<th>Result</th>
<th>Start Time</th>
<th>End Time</th>
</tr>
</thead>
$(document).ready(function (){
var table = $('#example').DataTable({
"ajax": "https://api.myjson.com/bins/575cy",
"columns": [
{ "data": "tId" },
{ "data": "description"},
{ "data": "rst" },
{ "data": "startDate" },
{ "data": "endDate"}
]
});
});
1: In above link there is code by someone I want to know if it's possible to add, update and delete data.
2: I also want to know how update, delete and edit will change data on json page as well so after refresh or on reopening the page I see updated not the previous data.
EIDTED:: I also have a MySQL database using with servlet and JSP , java if anyone can help me find a solution on using datatables with that as well and edit and delete as well...
Hope I have cleared myself properly.
I have a Vue component that is passed JSON data as a prop. The schema changes depending on the type of the object—the component is generic—and some of the JSON has nested objects/arrays.
The data:
"check": {
"id": "d5d1d763236f3",
"created_on": "2016-08-05T15:49:18.263399Z",
"type": "A",
"header": {
"Host": ["appname.com"]
},
"method": "GET"
}
The template
<div class="results" v-if="type">
<table v-for="item in type">
<tbody>
<tr v-for="(key, val) in item">
<td>{{ key }}</td>
<td><input v-model="val" type="text"/></td>
</tr>
</tbody>
</table>
</div>
Is there a sensible way to dynamically check whether val is of an Object or Array, and if so, recurse over it? It's important to also retain the binding so that the state is updated when those nested fields change (so we can HTTP PATCH any edits).
e.g. function iterate(obj) that can render the nested object. JS is not my strong suite, and isEnumerable or hasOwnProperty('length') seem to be fragile.
I'm getting some JSON returned from a server for which I'd like to iterate over the key value pair label and value. I tried to access the values by using the following but I get nothing.
What am I missing for this to work?
HTML :
<tr ng-repeat="(label, value) in data[0].[label]">
<td>{{label}}</td>
<td>{{value}}</td>
</tr>
JSON input :
"data": {
"title": {
"label": "Title",
"value": "Mr"
},
}
<tr ng-repeat="title in data">
<td>{{title.label}}</td>
<td>{{title.value}}</td>
</tr>
(Assuming your Json is in a variable like $scope.data)