Develop Reference

React render Table with two arrays

i am trying to Render a Table dynamically based on a JSON File. The header of the Table is working as expected but i don't know how i could achieve to render the Body based on the Layout which is defined in the JSON File and then use the Data i got using an API call.
This is how my JSON File looks like:
{
"Header": [
{
"Column": "Id"
},
{
"Column": "Account Name"
},
{
"Column": "City"
},
{
"Column": "Street"
},
{
"Column": "Created Date"
},
{
"Column": "Industry"
}
],
"Body": [
{
"Body": "id"
},
{
"Body": "accountName"
},
{
"Body": "city"
},
{
"Body": "street"
},
{
"Body": "createdDate"
},
{
"Body": "industry"
}
]
}
Here i am fetching the Data as well as the JSON:
const [header, setHeader] = useState([]);
const [body, setBody] = useState([]);
const [records, setRecords] = useState([]);
const fetchData = async () => {
axios.get("http://localhost:8080/api/v1/files/Account/AccountList")
.then(response => {
setHeader(response.data.Header);
setBody(response.data.Body);
})
axios.get(`http://localhost:8080/api/v1/${object}`)
.then(response => {
setRecords(response.data);
})
}
useEffect(() => {
fetchData();
}, []);
And this is how i render the Table:
<table className="Object-List--Table">
<thead>
<tr className="Object-List--Table-Header">
{header.map((head) => {
return (
<th className="Header-Column">{head.Column}</th>
);
})}
</tr>
</thead>
<tbody>
{records.map((record) => {
return (
<tr className="Object-List--Table--Body" key={record.id}>
<td className="Body-Column">
<Link to={`/${object}/${record.id}`}>{record.id}</Link>
</td>
<td className="Body-Column">{record.accountName}</td>
<td className="Body-Column">{record.city}</td>
<td className="Body-Column">{record.street}</td>
<td className="Body-Column">{record.createdDate}</td>
<td className="Body-Column">{record.industry}</td>
</tr>
);
})}
</tbody>
</table>
This is the Response i get when calling the API
[
{
"id": 1,
"accountName": "Rainer Zufall",
"city": "Dortmund",
"street": "Teststraße 42",
"createdDate": "2021-01-03T23:00:00.000+00:00",
"industry": "Developer"
},
{
"id": 2,
"accountName": "7z226b46",
"city": "ngw4125",
"street": "t3rxjo4v 34",
"createdDate": "2020-01-06T00:00:00.000+00:00",
"industry": "Developer"
}
]
My question is now, how i could achieve to render the Body of the Table based on the Records i am getting through the API as well as through the Body which is defined in the JSON File.
I would like to have the Body of the table like this:
<td className="Body-Column">{record[body].Body}</td>

Pls use below code for tbody map.
records.Body.map( record => {
<tr>
<td className="Body-Column">{record.Body}</td>
...
</tr>
});
records.map((record) => {
return (
<tr className="Object-List--Table--Body" key={record.id}>
<td className="Body-Column">{record.accountName}</td>
...
</tr>
);
})

I tried how to do this and i found a Solution for my Problem. If anyone else has something like this, this is the Code i am using for the Moment:
{records.map((record, index) => {
return (
<tr className="Object-List--Table--Body" key={`Row-${index}`}>
{
body.map((row, index) => {
return (
<td
className="Body-Column"
key={`Cell-${index}`}>{record[row.Body]}</td>
);
})
}
</tr>
);
})}

how to parse array of objects inside an object using maps or forEach

my JSON data looks like this: {
"objects": [
{
"name": "case1",
"description": "description of case1",
"shapes": [
{
"shape_name": "circle"
}
],
"order_ref": [
{
"id": "2233"
}
]
},
{
"name": "case2",
"description": "description of case2",
"shapes": [
{
"shape_name": "heart"
},
{
"shape_name": "square"
}
],
"order_ref": [
{
"id": "1212"
}
]
}
]
}
I need to create a table from the data.
The table should look like this:
Id Shape Name Description
2233 Circle Case1 Desc of case1
1212 Heart Case2 Desc of case2
1212 Square Case2 Desc of case2
I tried to parse JSON data using maps: I am able to get name and description but cannot go inside shapes and order_ref. Can you suggest me a solution using maps or forEach

You can do forEach within a forEach, ex:
let array = [
{
name: "case1",
description: "description of case1",
shapes: [
{
shape_name: "circle"
}
],
order_ref: [
{
id: "2233"
}
]
},
{
name: "case2",
description: "description of case2",
shapes: [
{
shape_name: "heart"
},
{
shape_name: "square"
}
],
order_ref: [
{
id: "1212"
}
]
}
];
let newArray = [];
array.forEach(obj => {
obj.shapes.forEach(shape => {
let newObj = Object.assign({}, obj);
newObj.shape_name = shape.shape_name;
delete newObj.shapes;
newObj.id = obj.order_ref[0].id;
delete newObj.order_ref;
newArray.push(newObj);
});
});
console.log(newArray);
After you are getting the newArray, you can iterate it with and as per normal

You need two forEach() to achieve the table.
You can try the following way
var data = {
"objects": [
{
"name": "case1",
"description": "description of case1",
"shapes": [
{
"shape_name": "circle"
}
],
"order_ref": [
{
"id": "2233"
}
]
},
{
"name": "case2",
"description": "description of case2",
"shapes": [
{
"shape_name": "heart"
},
{
"shape_name": "square"
}
],
"order_ref": [
{
"id": "1212"
}
]
}
]
}
var tr = '';
data.objects.forEach(o => {
o.shapes.forEach(io => {
tr += `<tr><td>${o.order_ref[0].id}</td><td>${io.shape_name}</td><td>${o.name}</td><td>${o.description}</td></tr>`;
});
});
document.querySelector('#tableData tbody').insertAdjacentHTML('beforeend', tr);
table, th, td {
border: 1px solid black;
}
td:first-letter{
text-transform: capitalize
}
<table id="tableData">
<thead>
<th>Id</th>
<th>Shape</th>
<th>Name</th>
<th>Description</th>
</thead>
<tbody></tbody>
</table>

If you need an entry for every order ref id and shape, you can use forEach as per below:
let jsonArray = {
"objects": [
{
"name": "case1",
"description": "description of case1",
"shapes": [
{
"shape_name": "circle"
}
],
"order_ref": [
{
"id": "2233"
}
]
},
{
"name": "case2",
"description": "description of case2",
"shapes": [
{
"shape_name": "heart"
},
{
"shape_name": "square"
}
],
"order_ref": [
{
"id": "1212"
}
]
}
]
}
let output = [];
jsonArray.objects.forEach(object => {
object.order_ref.forEach(order => {
object.shapes.forEach(shape => {
output.push({
id: order.id,
shape: shape.shape_name,
name: object.name,
description: object.description
})
})
})
})

How to access different properties in array of objects - each object has different keys

I tried the below 2 options but both are not working.
JSON
{
"Properties": [
{
"Type": "LEI"
},
{
"Country": "DE"
},
{
"Name": "Credit Institution"
}
]
}
Angular Typescript
Option #1
<ng-template pTemplate="body" let-entity>
<tr>
<td>{{entity.Properties[Type]}}</td>
<td>{{entity.Properties[Country]}}</td>
<td>{{entity.Properties[Name]}}</td>
</tr>
</ng-template>
Option #2
<ng-template pTemplate="body" let-entity>
<tr>
<td>{{entity.Properties.Type}}</td>
<td>{{entity.Properties.Country}}</td>
<td>{{entity.Properties.Name}}</td>
</tr>
</ng-template>
Update:-
My real JSON
{
"_id": "5bcb2dbfe8ffdd1bd0913825",
"_entitykey": "CRD_CRE_INS.CRDINSLEICODE",
"_validfrom": "2018-10-20T13:31:35.040Z",
"_validto": "2100-12-31T00:00:00.000Z",
"_datahash": "84f28a3fed7d3a1e5e2b21e5bc91e8a1",
"_payload": {
"CA_OwnerID": "EU_ECB",
"EntityCode": "CRDINSLEICODE",
"EntityType": "CRD_CRE_INS",
"Properties": [{
"EEA_DEP_GUA_SCH": [
"IS_TIF",
"GB_FSCS"
]
},
{
"ENT_AU": [
"2017-09-05",
"2018-10-05",
"2019-01-01"
]
},
{
"ENT_COD_TYP": "LEI"
},
{
"ENT_COU_RES": "DE"
},
{
"ENT_NAM": "Credit Institution In Germany"
},
{
"ENT_NAT_REF_COD": "REFCODE12342"
},
{
"ENT_TOW_CIT_RES": "GERMAN TOWN1243"
},
{
"INT_CAP_REQ_UND_ART_12": "ART_12_1_CRD"
},
{
"TYP_UND_ACC_CRR_ART_27": "ART_27_1_A1_CRR"
},
{
"IS_HID_NOT_PUB": "0"
}
],
"Services": [{
"DE": [
"PS_010",
"PS_020",
"PS_03A",
"PS_03B"
]
},
{
"GR": [
"PS_010",
"PS_020"
]
}
]
}
}

I have created a sample application to bind property dynamically on stackblitz
Here is the component code.
data = {
"Properties": [
{
"Type": "LEI"
},
{
"Country": "DE"
},
{
"Name": "Credit Institution"
}
]
}
columns:string[] = [];
ngOnInit(){
for(let row of this.data.Properties){
for(var columnName in row){
this.columns.push(columnName)
}
}
}
Here is the Html Code.
<table>
<tr *ngFor="let row of data.Properties; let i = index">
<td >{{row[columns[i]]}}</td>
</tr>
</table>
First you need to create a columns array and bind that in the html.
Please let me know if you have any question.

I think your best bet is to map the properties into a single structure and then you can access the properties as you want to.
The resulting structure would look like the following:
{
"Type": "LEI",
"Country": "DE",
"Name": "Credit Institution"
}
So you will be accessing a single object instead of an array of objects with different properties, like so:
var entity = {
"Properties": ([
{
"Type": "LEI"
},
{
"Country": "DE"
},
{
"Name": "Credit Institution"
}
]).reduce((res, curr) => Object.assign(res, curr), {})
}
console.log(entity.Properties)
<ng-template pTemplate="body" let-entity>
<tr>
<td>{{entity.Properties.Type}}</td>
<td>{{entity.Properties.Country}}</td>
<td>{{entity.Properties.Name}}</td>
</tr>
</ng-template>
Or, if you want to show all properties, you can do so dynamically, like so:
<ng-template pTemplate="body" let-entity>
<tr>
<td *ngFor="let key of entity.Properties">{{entity.Properties[key]}}</td>
</tr>
</ng-template>

Comparing 2 different set of data array

I have an app that are retrieving 2 sets of data. Now I want to do is get the brand of data1 and and the brand of data2 which depends on the date, if true it will render the amount of data2.
so far this is my code
-my data
const data1 = [
{
"data1result": [
{
"brand": "brand1"
},
{
"brand": "brand2"
},
{
"brand": "brand3"
},
{
"brand": "brand4"
}
]
}
];
const data2 = [
{
"data2result": [
{
"date": "12-01",
"details": [
{
"amount": 24250,
"brand": "brand1"
},
{
"amount": 68350,
"brand": "brand2"
},
{
"amount": 60,
"brand": "brand3"
},
{
"amount": 11078,
"brand": "brand4"
}
]
},
{
"date": "12-02",
"details": [
{
"amount": 27340,
"brand": "brand1"
},
{
"amount": 16500,
"brand": "brand2"
},
{
"amount": 210,
"brand": "brand3"
},
{
"amount": 23229,
"brand": "brand4"
}
]
},
]
}
];
and as for my code
export default React.createClass({
render() {
<table>
<thead>
<tr>
<th></th>
{
data1.map(function(i) {
return <th>{i.data1result.brand}</th>;
})
}
</tr>
</thead>
<tbody>
{data2.map(function(a) {
return (
<tr className="salesTarget">
<td className="td-fixed"><b>{a.data2result.date}</b></td>
//help me here
<td className="td-fixed">brand1 amount of date **-**</td>
<td className="td-fixed">brand2 amount of date **-**</td>
<td className="td-fixed">brand3 amount of date **-**</td>
<td className="td-fixed">brand4 amount of date **-**</td>
</tr>
)
})}
</tbody>
</table>
}
})
and the result should be like this

You can map over an array and not an object. In your case to render the brand amounts just create a nested map function assuming the order of brand values is the same. Also have a look at how the outer map is created. Also you must have a return statement in you react class .
var App = React.createClass({
render() {
const data1=[{data1result:[{brand:"brand1"},{brand:"brand2"},{brand:"brand3"},{brand:"brand4"}]}];
const data2=[{data2result:[{date:"12-01",details:[{amount:24250,brand:"brand1"},{amount:68350,brand:"brand2"},{amount:60,brand:"brand3"},{amount:11078,brand:"brand4"}]},{date:"12-02",details:[{amount:27340,brand:"brand1"},{amount:16500,brand:"brand2"},{amount:210,brand:"brand3"},{amount:23229,brand:"brand4"}]}]}];
return (
<table>
<thead>
<tr>
<th></th>
{
data1[0].data1result.map(function(i) {
return <th>{i.brand}</th>;
})
}
</tr>
</thead>
<tbody>
{data2[0].data2result.map(function(a) {
return (
<tr className="salesTarget">
<td className="td-fixed"><b>{a.date}</b></td>
{a.details.map(function(item){
return (
<td className="td-fixed">{item.amount}</td>
)
})}
</tr>
)
})}
</tbody>
</table>
)
}
})
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Adding a map to your data2result[].details, you should be able to render the columns for each brand:
export default React.createClass({
render() {
<table>
<thead>
<tr>
<th></th>
{
data1.map(function(i) {
return <th>{ i.data1result.brand }</th>;
})
}
</tr>
</thead>
<tbody>
{
data2.map(function(a) {
return (
<tr className="salesTarget">
<td className="td-fixed"><b>{ a.data2result.date }</b></td>
{
a.details.map(function(b) {
<td className="td-fixed">{ b.amount }</td>
})
}
</tr>
)
})
}
</tbody>
</table>
}
})

You can try something like this:
Note: This answer just address part of processing data and not binding values to React UI
const data1=[{data1result:[{brand:"brand1"},{brand:"brand2"},{brand:"brand3"},{brand:"brand4"}]}];
const data2=[{data2result:[{date:"12-01",details:[{amount:24250,brand:"brand1"},{amount:68350,brand:"brand2"},{amount:60,brand:"brand3"},{amount:11078,brand:"brand4"}]},{date:"12-02",details:[{amount:27340,brand:"brand1"},{amount:16500,brand:"brand2"},{amount:210,brand:"brand3"},{amount:23229,brand:"brand4"}]}]}];
var result = {};
data1[0].data1result.forEach(function(brand){
data2[0].data2result.forEach(function(res){
result[res.date] = result[res.date] || {};
var amount = res.details.reduce(function(p,c){
p += c.brand === brand.brand ? c.amount : 0;
return p;
}, 0)
if(amount > 0)
result[res.date][brand.brand] = amount;
})
});
console.log(result)

Try this:
export default React.createClass({
render() {
<table>
<thead>
<tr>
<th></th>
{
data1[0].data1result.map(function(i) {
return <th>{ i.brand }</th>;
})
}
</tr>
</thead>
<tbody>
{
data2[0].data2result.map(function(a) {
return (
<tr className="salesTarget">
<td className="td-fixed"><b>{ a.date }</b></td>
{
a.details.map(function(b) {
<td className="td-fixed">{ b.amount }</td>
})
}
</tr>
)
})
}
</tbody>
</table>
}
})

Find into model by key

I want to obtain a "row" from a model querying by key. ¿How can I achieve that?
I´m looking for something like
{{ mysettings.backcolor | searchby(datuak.ref) }} or something like this.
The fact is that I have a model with data, and other model with bacground and forecolor info. The relation between them is the "ref" column.
When printing the table, on the ng-repeat, I want to to obtain the foreground/backcolor querying it by id.
Any help or clue?
I have this two models in my controller:
$scope.mysettings = [
{ ref: '3CI00001', backcolor: '#000000', forecolor: '#ffffff' },
{ ref: '3CI00002', backcolor: '#5cb85c', forecolor: '#000000' }
];
And this is the other model:
$scope.datuak = [
{
linea: '1',
egunak:[{
fetxa: '2014/05/19',
turnoak: [
{
turno: "1",
ordenes: [
{ ref: '3CI00001'},
{ of: 'OF000013'}
]
},
{
turno: "2",
ordenes: [
{ ref:'3CI00001'},
{ of:'112233'},
{ ref:'3CI00001'}
]
},
{
turno: "3",
ordenes: [
{ ref:'3CI00001'}
]
}
]},
{fetxa: '2014/05/20'},
{fetxa: '2014/05/21',
turnoak: [
{
turno: "1",
ordenes: [
{ ref: '3CI00001'},
{ of: 'OF200013'}
]
},
{
turno: "2",
ordenes: [
{ ref:'3CI00001'},
{ of:'OF232233'},
{ of:'OF289977'}
]
},
{
turno: "3",
ordenes: [
{ ref:'3CI00001'},
{ of:'OF200000'},
{ ref:'3CI00001'},
{ of:'OF200000'},
{ ref:'3CI00001'}
]
}
]},
{fetxa: '2014/05/22'},
{fetxa: '2014/05/23'},
{fetxa: '2014/05/24'},
{fetxa: '2014/05/25'}
]
},
{
linea: '2',
egunak:[
{ fetxa: '2014/05/19'},
{
fetxa: '2014/05/20',
turnoak: [
{
turno: "1",
ordenes: [
{ ref: '3CI00001'},
{ of: '2OF000013'}
]
},
{
turno: "2",
ordenes: [
{ ref:'3CI00001'},
{ of:'2OF2233'},
{ ref:'3CI00001'}
]
},
{
turno: "3",
ordenes: [
{ ref:'3CI00001'}
]
}
]},
{fetxa: '2014/05/21'},
{
fetxa: '2014/05/22',
turnoak: [
{
turno: "1",
ordenes: [
{ ref: '3CI00001'},
{ of: '2OF200013'}
]
},
{
turno: "2",
ordenes: [
{ ref:'3CI00001'},
{ of:'2OF232233'},
{ ref:'3CI00001'}
]
},
{
turno: "3",
ordenes: [
{ ref:'3CI00001'},
{ of:'2OF200000'},
{ ref:'3CI00001'},
{ of:'2OF200000'},
{ ref:'3CI00001'}
]
}
]},
{fetxa: '2014/05/23'},
{fetxa: '2014/05/24'},
{fetxa: '2014/05/25'}
]
}
];
With this two model, I have my view like this:
<tbody>
<tr ng-repeat="lineas in datuak">
<td class="tdlinea">Linea:{{ lineas.linea }}</td>
<td data-ng-repeat="nireindex in [0,1,2,3,4,5,6]">
<table class="table text-center table-condensed">
<thead>
<th>Mañana</th>
<th>Tarde</th>
<th>Noche</th>
</thead>
<tbody>
<tr>
<td>
<table>
<tr ng-repeat="orden in lineas.egunak[nireindex].turnoak[0].ordenes" ng-if="checkStatus(lineas.egunak[nireindex].fetxa,nireindex)">
<td>{{ orden.ref }} {{ orden.of }} </td>
</tr>
</table>
</td>
<td>
<table>
<tr ng-repeat="orden in lineas.egunak[nireindex].turnoak[1].ordenes" ng-if="checkStatus(lineas.egunak[nireindex].fetxa,nireindex)"><td>{{ orden.ref }} {{ orden.of }}</td></tr>
</table>
</td>
<td>
<table>
<tr ng-repeat="orden in lineas.egunak[nireindex].turnoak[2].ordenes" ng-if="checkStatus(lineas.egunak[nireindex].fetxa,nireindex)"><td>{{ orden.ref }} {{ orden.of }}</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr> <!-- lineas -->
</tbody>

You may look at angular js filter filter : https://docs.angularjs.org/api/ng/filter/filter
if you need to go further you can create your own that use array.filter() method:
app.filter('searchBy', function() {
return function( array, prop , val ) {
// filter has polyfills for older browsers. Check underscore.js if needed
return array.filter( function(row) {
return row[prop] == val;
} );
// this returns an array. You can pick the first element with [0]
}
} );
then use it in your loop like this:
{{ mySetting | searchBy : 'ref' : linea.ref }}

The easy way to achieve this is to refactor your model to behave like an associative array instead of a common. It should end up like this:
$scope.mysettings = {
3CI00001: { ref: '3CI00001', backcolor: '#000000', forecolor: '#ffffff' },
3CI00002: { ref: '3CI00002', backcolor: '#5cb85c', forecolor: '#000000' }
};
That way you could access objects by it's id simply by doing mysettings[id].backcolor
Cheers!

What you can do is loop through your settings, then loop through each settings object and return the matched item:
function findSetting(s) {
//loop through all settings-->
for (var i = 0; i < mySettings.length; i++) {
//if setting is an object loop through keys in object-->
if (typeof (mySettings[i]) === 'object') {
for (var key in mySettings[i]) {
if (mySettings[i][key] === s) {
//return match-->
return mySettings[i];
}
}
}
}
}
Here is a fiddle