Comparing 2 different set of data array

Comparing 2 different set of data array - javascript

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>
}
})

Related

How to add JSON data to my datatable if I have 3 nested data?

How to add the JSON file that are nested to the datatable i created.
I always encounter this problem:
DataTables warning: table id=tb_friendlist - Invalid JSON response.
For more information about this error, please see
http://datatables.net/tn/1
HTML
<table id="tb_friendlist" class="table table-bordered table-hover" style="width:100%">
<thead>
<tr>
<th>Steam ID</th>
<th>Relationship</th>
<th>Friend Since</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Steam ID</th>
<th>Relationship</th>
<th>Friend Since</th>
</tr>
</tfoot>
</table>
JS/JQuery I'm Using:
$.ajax({
type : 'GET',
url: 'http://api.steampowered.com/ISteamUser/GetFriendList/v0001/?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&relationship=friend&format=json&steamid=76561197960435530',
success : function(data){
console.log(data.friendslist);
$('#tb_friendlist').DataTable( {
"ajax": data,
"columns": [
{ "data": data.friendslist.friends.steam_id },
{ "data": data.friendslist.friends.relationship },
{ "data": data.friendslist.friends.friend_since }
]
} );
}
});
JSON File:
{"friendslist":{"friends":[{"steamid":"76561197960265731","relationship":"friend","friend_since":0},{"steamid":"76561197960265738","relationship":"friend","friend_since":0},{"steamid":"76561197960265740","relationship":"friend","friend_since":0},{"steamid":"76561197960265744","relationship":"friend","friend_since":1585508613},{"steamid":"76561197960265747","relationship":"friend","friend_since":0},{"steamid":"76561197960265749","relationship":"friend","friend_since":0},{"steamid":"76561197960268093","relationship":"friend","friend_since":1251433222},{"steamid":"76561197960269040","relationship":"friend","friend_since":1436934825},{"steamid":"76561197960270258","relationship":"friend","friend_since":0},{"steamid":"76561197960270457","relationship":"friend","friend_since":1257142334},{"steamid":"76561197960271661","relationship":"friend","friend_since":1327552405},{"steamid":"76561197960273963","relationship":"friend","friend_since":0},{"steamid":"76561197960274006","relationship":"friend","friend_since":0},{"steamid":"76561197960274521","relationship":"friend","friend_since":1283486787},{"steamid":"76561197960279106","relationship":"friend","friend_since":1252902778},{"steamid":"76561197960282696","relationship":"friend","friend_since":0},{"steamid":"76561197960282709","relationship":"friend","friend_since":0},{"steamid":"76561197960299622","relationship":"friend","friend_since":0},{"steamid":"76561197960304647","relationship":"friend","friend_since":0},{"steamid":"76561197960317684","relationship":"friend","friend_since":1251865307},{"steamid":"76561197960323774","relationship":"friend","friend_since":0},{"steamid":"76561197960333589","relationship":"friend","friend_since":0},{"steamid":"76561197960359661","relationship":"friend","friend_since":0},{"steamid":"76561197960389850","relationship":"friend","friend_since":1327992364},{"steamid":"76561197960392503","relationship":"friend","friend_since":1366092272},{"steamid":"76561197960411603","relationship":"friend","friend_since":1346991873},{"steamid":"76561197960423941","relationship":"friend","friend_since":0},{"steamid":"76561197960434622","relationship":"friend","friend_since":1278879949},{"steamid":"76561197960491601","relationship":"friend","friend_since":1230537028},{"steamid":"76561197960505737","relationship":"friend","friend_since":1327552425},{"steamid":"76561197960508417","relationship":"friend","friend_since":1298569205},{"steamid":"76561197960522471","relationship":"friend","friend_since":1230537024},{"steamid":"76561197960529298","relationship":"friend","friend_since":1390366452},{"steamid":"76561197960549564","relationship":"friend","friend_since":0},{"steamid":"76561197960563532","relationship":"friend","friend_since":0},{"steamid":"76561197960568847","relationship":"friend","friend_since":1333079735},{"steamid":"76561197960575737","relationship":"friend","friend_since":1331440292},{"steamid":"76561197960691398","relationship":"friend","friend_since":1333079737},{"steamid":"76561197960789988","relationship":"friend","friend_since":0},{"steamid":"76561197960860649","relationship":"friend","friend_since":0},{"steamid":"76561197960879472","relationship":"friend","friend_since":1331440322},{"steamid":"76561197961004348","relationship":"friend","friend_since":1233376941},{"steamid":"76561197961016107","relationship":"friend","friend_since":1299561164},{"steamid":"76561197961048326","relationship":"friend","friend_since":1305088151},{"steamid":"76561197961301890","relationship":"friend","friend_since":0},{"steamid":"76561197961322701","relationship":"friend","friend_since":1562736913},{"steamid":"76561197961456983","relationship":"friend","friend_since":1436936650},{"steamid":"76561197961493110","relationship":"friend","friend_since":1530844814},{"steamid":"76561197961513395","relationship":"friend","friend_since":0},{"steamid":"76561197961567067","relationship":"friend","friend_since":1280805626},{"steamid":"76561197961635855","relationship":"friend","friend_since":1305088152},{"steamid":"76561197961697514","relationship":"friend","friend_since":1328471606},{"steamid":"76561197961725694","relationship":"friend","friend_since":1249447084},{"steamid":"76561197961903764","relationship":"friend","friend_since":1238215828},{"steamid":"76561197961963491","relationship":"friend","friend_since":1335800301},{"steamid":"76561197961987005","relationship":"friend","friend_since":1261202570},{"steamid":"76561197962090766","relationship":"friend","friend_since":1545426885},{"steamid":"76561197962095245","relationship":"friend","friend_since":1450768354},{"steamid":"76561197962205142","relationship":"friend","friend_since":1246690451},{"steamid":"76561197962313932","relationship":"friend","friend_since":0},{"steamid":"76561197962413930","relationship":"friend","friend_since":1452293804},{"steamid":"76561197962783665","relationship":"friend","friend_since":0},{"steamid":"76561197962833771","relationship":"friend","friend_since":1246340239},{"steamid":"76561197962844216","relationship":"friend","friend_since":0},{"steamid":"76561197963562041","relationship":"friend","friend_since":1300220501},{"steamid":"76561197963585314","relationship":"friend","friend_since":0},{"steamid":"76561197963687679","relationship":"friend","friend_since":1251777207},{"steamid":"76561197964165126","relationship":"friend","friend_since":1451974958},{"steamid":"76561197964770089","relationship":"friend","friend_since":1325652265},{"steamid":"76561197964865846","relationship":"friend","friend_since":0},{"steamid":"76561197965400579","relationship":"friend","friend_since":1509136774},{"steamid":"76561197965532939","relationship":"friend","friend_since":1350963678},{"steamid":"76561197965576021","relationship":"friend","friend_since":1258548993},{"steamid":"76561197965640811","relationship":"friend","friend_since":1267240082},{"steamid":"76561197965656609","relationship":"friend","friend_since":1347214065},{"steamid":"76561197965686610","relationship":"friend","friend_since":1312001126},{"steamid":"76561197966056073","relationship":"friend","friend_since":1234811002},{"steamid":"76561197966089529","relationship":"friend","friend_since":1348200708},{"steamid":"76561197966106312","relationship":"friend","friend_since":0},{"steamid":"76561197966109336","relationship":"friend","friend_since":1284524815},{"steamid":"76561197966589084","relationship":"friend","friend_since":0},{"steamid":"76561197966591880","relationship":"friend","friend_since":1282803048},{"steamid":"76561197966652320","relationship":"friend","friend_since":0},{"steamid":"76561197967027289","relationship":"friend","friend_since":0},{"steamid":"76561197967346751","relationship":"friend","friend_since":1419372025},{"steamid":"76561197967377359","relationship":"friend","friend_since":1375241965},{"steamid":"76561197967454254","relationship":"friend","friend_since":0},{"steamid":"76561197967823929","relationship":"friend","friend_since":1268222378},{"steamid":"76561197968282875","relationship":"friend","friend_since":0},{"steamid":"76561197968304048","relationship":"friend","friend_since":0},{"steamid":"76561197968343660","relationship":"friend","friend_since":0},{"steamid":"76561197968403639","relationship":"friend","friend_since":1274246179},{"steamid":"76561197968411673","relationship":"friend","friend_since":1258327120},{"steamid":"76561197968452293","relationship":"friend","friend_since":0},{"steamid":"76561197968459473","relationship":"friend","friend_since":1286855142},{"steamid":"76561197968493120","relationship":"friend","friend_since":1318097746},{"steamid":"76561197968499581","relationship":"friend","friend_since":1298522642},{"steamid":"76561197968575517","relationship":"friend","friend_since":1283140137},{"steamid":"76561197968662512","relationship":"friend","friend_since":1243048442},{"steamid":"76561197968887855","relationship":"friend","friend_since":0},{"steamid":"76561197969013812","relationship":"friend","friend_since":1320344898},{"steamid":"76561197969044631","relationship":"friend","friend_since":1283486596},{"steamid":"76561197969204208","relationship":"friend","friend_since":0},{"steamid":"76561197969221324","relationship":"friend","friend_since":1261119417},{"steamid":"76561197969266938","relationship":"friend","friend_since":1285385050},{"steamid":"76561197969321754","relationship":"friend","friend_since":1599851854},{"steamid":"76561197969363440","relationship":"friend","friend_since":0},{"steamid":"76561197969363506","relationship":"friend","friend_since":0},{"steamid":"76561197969389470","relationship":"friend","friend_since":0},{"steamid":"76561197969507292","relationship":"friend","friend_since":1580456777},{"steamid":"76561197969518075","relationship":"friend","friend_since":1287104617},{"steamid":"76561197969593376","relationship":"friend","friend_since":1251777234},{"steamid":"76561197970125572","relationship":"friend","friend_since":0},{"steamid":"76561197970166754","relationship":"friend","friend_since":1283486539},{"steamid":"76561197970188759","relationship":"friend","friend_since":1258311040},{"steamid":"76561197970280218","relationship":"friend","friend_since":1254978747},{"steamid":"76561197970282885","relationship":"friend","friend_since":1591890829},{"steamid":"76561197970323416","relationship":"friend","friend_since":1272505770},{"steamid":"76561197970389205","relationship":"friend","friend_since":0},{"steamid":"76561197970404169","relationship":"friend","friend_since":1260340950},{"steamid":"76561197970496388","relationship":"friend","friend_since":0},{"steamid":"76561197970498549","relationship":"friend","friend_since":1305400189},{"steamid":"76561197970522250","relationship":"friend","friend_since":1252469387},{"steamid":"76561197970545345","relationship":"friend","friend_since":0},{"steamid":"76561197970553411","relationship":"friend","friend_since":1280805662},{"steamid":"76561197970565175","relationship":"friend","friend_since":0},{"steamid":"76561197970572119","relationship":"friend","friend_since":1262234024},{"steamid":"76561197970610844","relationship":"friend","friend_since":0},{"steamid":"76561197970667119","relationship":"friend","friend_since":1331440337},{"steamid":"76561197970792670","relationship":"friend","friend_since":1252469394},{"steamid":"76561197970822785","relationship":"friend","friend_since":0},{"steamid":"76561197970953718","relationship":"friend","friend_since":0},{"steamid":"76561197970968871","relationship":"friend","friend_since":1414954611},{"steamid":"76561197971025345","relationship":"friend","friend_since":1333079747},{"steamid":"76561197971057511","relationship":"friend","friend_since":1312778874},{"steamid":"76561197971085582","relationship":"friend","friend_since":1356718664},{"steamid":"76561197971124276","relationship":"friend","friend_since":0},{"steamid":"76561197971128200","relationship":"friend","friend_since":1254974887},{"steamid":"76561197971238476","relationship":"friend","friend_since":1249447170},{"steamid":"76561197971332340","relationship":"friend","friend_since":1347679040},{"steamid":"76561197971400048","relationship":"friend","friend_since":1336893966},{"steamid":"76561197971521071","relationship":"friend","friend_since":1455533991},{"steamid":"76561197971951755","relationship":"friend","friend_since":0},{"steamid":"76561197972291076","relationship":"friend","friend_since":1585508607},{"steamid":"76561197972345559","relationship":"friend","friend_since":1278650650},{"steamid":"76561197972495328","relationship":"friend","friend_since":1380689769},{"steamid":"76561197972790745","relationship":"friend","friend_since":1244528575},{"steamid":"76561197972799883","relationship":"friend","friend_since":1346896735},{"steamid":"76561197973185198","relationship":"friend","friend_since":1257142395},{"steamid":"76561197973639804","relationship":"friend","friend_since":0},{"steamid":"76561197974284838","relationship":"friend","friend_since":1295845647},{"steamid":"76561197974616601","relationship":"friend","friend_since":1319599842},{"steamid":"76561197974777179","relationship":"friend","friend_since":1289893342},{"steamid":"76561197974807412","relationship":"friend","friend_since":0},{"steamid":"76561197975724041","relationship":"friend","friend_since":1337920161},{"steamid":"76561197975914763","relationship":"friend","friend_since":0},{"steamid":"76561197976244853","relationship":"friend","friend_since":1299561095},{"steamid":"76561197977035150","relationship":"friend","friend_since":0},{"steamid":"76561197977450070","relationship":"friend","friend_since":1347343394},{"steamid":"76561197978181900","relationship":"friend","friend_since":1234074199},{"steamid":"76561197978236369","relationship":"friend","friend_since":1258442642},{"steamid":"76561197978266558","relationship":"friend","friend_since":1418699542},{"steamid":"76561197979187556","relationship":"friend","friend_since":0},{"steamid":"76561197979435127","relationship":"friend","friend_since":1236474691},{"steamid":"76561197979480245","relationship":"friend","friend_since":1305088194},{"steamid":"76561197979536477","relationship":"friend","friend_since":1246340263},{"steamid":"76561197980388693","relationship":"friend","friend_since":1275536464},{"steamid":"76561197981291930","relationship":"friend","friend_since":1334029416},{"steamid":"76561197982240193","relationship":"friend","friend_since":0},{"steamid":"76561197982656766","relationship":"friend","friend_since":1257142470},{"steamid":"76561197982998220","relationship":"friend","friend_since":1316632423},{"steamid":"76561197983491300","relationship":"friend","friend_since":0},{"steamid":"76561197983540634","relationship":"friend","friend_since":1347896489},{"steamid":"76561197984212648","relationship":"friend","friend_since":1524288546},{"steamid":"76561197984476370","relationship":"friend","friend_since":1252037969},{"steamid":"76561197985244272","relationship":"friend","friend_since":0},{"steamid":"76561197985279592","relationship":"friend","friend_since":0},{"steamid":"76561197985536977","relationship":"friend","friend_since":1350704086},{"steamid":"76561197985866466","relationship":"friend","friend_since":1289893378},{"steamid":"76561197986695451","relationship":"friend","friend_since":1244788670},{"steamid":"76561197987101307","relationship":"friend","friend_since":1274940404},{"steamid":"76561197987393094","relationship":"friend","friend_since":1298522644},{"steamid":"76561197988042654","relationship":"friend","friend_since":1265486190},{"steamid":"76561197988052879","relationship":"friend","friend_since":1373949178},{"steamid":"76561197988197730","relationship":"friend","friend_since":1276488085},{"steamid":"76561197988221501","relationship":"friend","friend_since":1283451661},{"steamid":"76561197989222171","relationship":"friend","friend_since":1377143565},{"steamid":"76561197989701891","relationship":"friend","friend_since":1316837417},{"steamid":"76561197989870485","relationship":"friend","friend_since":0},{"steamid":"76561197990525201","relationship":"friend","friend_since":1252469413},{"steamid":"76561197990859622","relationship":"friend","friend_since":0},{"steamid":"76561197990949369","relationship":"friend","friend_since":1230537020},{"steamid":"76561197991390878","relationship":"friend","friend_since":0},{"steamid":"76561197991518342","relationship":"friend","friend_since":1347601219},{"steamid":"76561197991751968","relationship":"friend","friend_since":0},{"steamid":"76561197991840415","relationship":"friend","friend_since":1479705086},{"steamid":"76561197991899002","relationship":"friend","friend_since":1286082214},{"steamid":"76561197992152522","relationship":"friend","friend_since":1280287926},{"steamid":"76561197992219796","relationship":"friend","friend_since":1311828146},{"steamid":"76561197992295963","relationship":"friend","friend_since":1278650658},{"steamid":"76561197992459511","relationship":"friend","friend_since":1291491332},{"steamid":"76561197992577188","relationship":"friend","friend_since":0},{"steamid":"76561197992594628","relationship":"friend","friend_since":0},{"steamid":"76561197992720132","relationship":"friend","friend_since":0},{"steamid":"76561197992927490","relationship":"friend","friend_since":0},{"steamid":"76561197993345099","relationship":"friend","friend_since":0},{"steamid":"76561197993552969","relationship":"friend","friend_since":1286082108},{"steamid":"76561197993620247","relationship":"friend","friend_since":1263011646},{"steamid":"76561197993630232","relationship":"friend","friend_since":1249148398},{"steamid":"76561197993751379","relationship":"friend","friend_since":1283486349},{"steamid":"76561197994223774","relationship":"friend","friend_since":1299734097},{"steamid":"76561197994242870","relationship":"friend","friend_since":1347937824},{"steamid":"76561197994359533","relationship":"friend","friend_since":1276230703},{"steamid":"76561197994365894","relationship":"friend","friend_since":1294605278},{"steamid":"76561197994871291","relationship":"friend","friend_since":1372582055},{"steamid":"76561197994894204","relationship":"friend","friend_since":1335159140},{"steamid":"76561197995035454","relationship":"friend","friend_since":1330072067},{"steamid":"76561197995390971","relationship":"friend","friend_since":1296715379},{"steamid":"76561197995557785","relationship":"friend","friend_since":1356718679},{"steamid":"76561197995620521","relationship":"friend","friend_since":1242272781},{"steamid":"76561197996055531","relationship":"friend","friend_since":1358916974},{"steamid":"76561197996226415","relationship":"friend","friend_since":1352804786},{"steamid":"76561197996599994","relationship":"friend","friend_since":1298522768},{"steamid":"76561197997296694","relationship":"friend","friend_since":1250832422},{"steamid":"76561197997348592","relationship":"friend","friend_since":1567223810},{"steamid":"76561197997374662","relationship":"friend","friend_since":1274246279},{"steamid":"76561197997412731","relationship":"friend","friend_since":1346896747},{"steamid":"76561197997491987","relationship":"friend","friend_since":1252728718},{"steamid":"76561197998048607","relationship":"friend","friend_since":1283486669},{"steamid":"76561197998113407","relationship":"friend","friend_since":1285649640},{"steamid":"76561197998287308","relationship":"friend","friend_since":1316499408},{"steamid":"76561197998342021","relationship":"friend","friend_since":1286338395},{"steamid":"76561197998653180","relationship":"friend","friend_since":1376112288},{"steamid":"76561197999644177","relationship":"friend","friend_since":1335800276},{"steamid":"76561197999825207","relationship":"friend","friend_since":1449120235},{"steamid":"76561198000167056","relationship":"friend","friend_since":1274246426},{"steamid":"76561198000175595","relationship":"friend","friend_since":1241840395},{"steamid":"76561198000198761","relationship":"friend","friend_since":1274246470},{"steamid":"76561198000613320","relationship":"friend","friend_since":1609138583},{"steamid":"76561198000778598","relationship":"friend","friend_since":1383625609},{"steamid":"76561198002118002","relationship":"friend","friend_since":1343104953},{"steamid":"76561198002524224","relationship":"friend","friend_since":1449120327},{"steamid":"76561198002826921","relationship":"friend","friend_since":1299561235},{"steamid":"76561198004860018","relationship":"friend","friend_since":1290812641},{"steamid":"76561198006930795","relationship":"friend","friend_since":1370242583},{"steamid":"76561198007105082","relationship":"friend","friend_since":1290812487},{"steamid":"76561198007754155","relationship":"friend","friend_since":1290812651},{"steamid":"76561198009095613","relationship":"friend","friend_since":1325652348},{"steamid":"76561198009246617","relationship":"friend","friend_since":1530164209},{"steamid":"76561198010062752","relationship":"friend","friend_since":1351306468},{"steamid":"76561198010168695","relationship":"friend","friend_since":1248755147},{"steamid":"76561198011246300","relationship":"friend","friend_since":1330192563},{"steamid":"76561198011742416","relationship":"friend","friend_since":1348542115},{"steamid":"76561198012882785","relationship":"friend","friend_since":1331440377},{"steamid":"76561198013560482","relationship":"friend","friend_since":1283486799},{"steamid":"76561198014254115","relationship":"friend","friend_since":1254806199},{"steamid":"76561198014273977","relationship":"friend","friend_since":1347773002},{"steamid":"76561198015234450","relationship":"friend","friend_since":1351306412},{"steamid":"76561198026562132","relationship":"friend","friend_since":1346715463},{"steamid":"76561198026610207","relationship":"friend","friend_since":1346739192},{"steamid":"76561198027956837","relationship":"friend","friend_since":1316052135},{"steamid":"76561198031319803","relationship":"friend","friend_since":1363325130},{"steamid":"76561198031708819","relationship":"friend","friend_since":1372582136},{"steamid":"76561198037225309","relationship":"friend","friend_since":1297316926},{"steamid":"76561198037252562","relationship":"friend","friend_since":1346219433},{"steamid":"76561198040984261","relationship":"friend","friend_since":1445142960},{"steamid":"76561198042468117","relationship":"friend","friend_since":1347491840},{"steamid":"76561198042665686","relationship":"friend","friend_since":1453440326},{"steamid":"76561198045945967","relationship":"friend","friend_since":1350704096},{"steamid":"76561198046379753","relationship":"friend","friend_since":1370242520},{"steamid":"76561198046983307","relationship":"friend","friend_since":1346817023},{"steamid":"76561198047404672","relationship":"friend","friend_since":1454562868},{"steamid":"76561198050396055","relationship":"friend","friend_since":1318826201},{"steamid":"76561198059223364","relationship":"friend","friend_since":1468562520},{"steamid":"76561198065538643","relationship":"friend","friend_since":1448169802},{"steamid":"76561198072330588","relationship":"friend","friend_since":1387764448},{"steamid":"76561198075307934","relationship":"friend","friend_since":1446007075},{"steamid":"76561198085350447","relationship":"friend","friend_since":1362335241},{"steamid":"76561198090691972","relationship":"friend","friend_since":1581753542},{"steamid":"76561198109901633","relationship":"friend","friend_since":1418699578},{"steamid":"76561198113967572","relationship":"friend","friend_since":1383948235},{"steamid":"76561198119266856","relationship":"friend","friend_since":1403374765},{"steamid":"76561198829441805","relationship":"friend","friend_since":1580526105},{"steamid":"76561198851945186","relationship":"friend","friend_since":1559687431},{"steamid":"76561199013049287","relationship":"friend","friend_since":1577157657},{"steamid":"76561199064639120","relationship":"friend","friend_since":1605227570},{"steamid":"76561199147650161","relationship":"friend","friend_since":1614836906}]}}

Instead of passing the friendslist object as the data source, pass in the friendslist.friends array
// lets take 5 friends as an example
var data = {
"friendslist": {
"friends": [
{ "steamid": "76561197960265731", "relationship": "friend", "friend_since": 0 }
, { "steamid": "76561197960265738", "relationship": "friend", "friend_since": 0 }
, { "steamid": "76561197960265740", "relationship": "friend", "friend_since": 0 }
, { "steamid": "76561197960265744", "relationship": "friend", "friend_since": 1585508613 }
, { "steamid": "76561197960265747", "relationship": "friend", "friend_since": 0 }
]
}
};
$('#tb_friendlist').DataTable( {
data : data.friendslist.friends
, columns : [
{ "data": 'steamid' }
, { "data": 'relationship' }
, { "data": 'friend_since' }
]
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<table id="tb_friendlist" class="table table-bordered table-hover" style="width:100%">
<thead>
<tr>
<th>Steam ID</th>
<th>Relationship</th>
<th>Friend Since</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Steam ID</th>
<th>Relationship</th>
<th>Friend Since</th>
</tr>
</tfoot>
</table>

You will need to provide array in ajax datatable call
$.ajax({
type : 'GET',
url: 'http://api.steampowered.com/ISteamUser/GetFriendList/v0001/?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&relationship=friend&format=json&steamid=76561197960435530',
success : function(data){
console.log(data.friendslist);
$('#tb_friendlist').DataTable( {
"data": data.friendslist.friends,
"columns": [
{ "data": "steam_id" },
{ "data": "relationship" },
{ "data": "friend_since" }
]
} );
}
});
This might solve your problem

how to display the rendered data correctly in their respective columns?

I am having trouble displaying the arr dummy API into columns similar to the below image, where each column has a header followed by their children, but however, I am getting everything inside the first column when it should be parent > child
layout data rendering
I am getting the following UI
const arr = [
{
"demo": [
{
"_id": "xx122",
"name": "Historian",
"tags": [
"demo"
],
"things": [],
"list": [],
"queries": [],
"notes": []
}
],
"demo_2": [
{
"_id": "xx123",
"name": "Demo",
"tags": [
"demo_2"
],
"things": [],
"list": [],
"queries": [],
"notes": []
}
],
}
]
const modArray = Object.keys(arr[0]).map(i => {
return {id: i, ...arr[0][i]}
});
export default function Demo() {
return (
<div>
<table className="table">
<thead>
<tr>
{modArray.map((i) => (
<th key={i.id}>{i.id}</th>
))}
</tr>
</thead>
<tbody>
{modArray.map((items, index) => {
console.log(items.id);
return (
<tr key={items.id}>
{Object.keys(items).map((key) => {
console.log(items[key]._id);
return <td key={items[key]._id}>{items[key]._id}</td>;
})}
</tr>
);
})}
</tbody>
</table>
</div>
);
}

This is because you are returning a row for each item in the array, rather than a column. It should look just like the head. Here's an example of the pattern.
<tr> // wrapper row
{modArray.map((items) => {
return (
<td key={items.id}>
<table>
<tr>{/* keys map logic goes here */}</tr>
</table>
</td>
)
})}
</tr>

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 create complex table from json using angular 6?

I am trying to create table from the given json. here is json Structure. i am using simple html table to make table structure same like mentioned in below snapshot.as data's are dynamic table structure is not displaying proper in my case.
{
"e_id": "1234",
"e_o_name": "Contact_info",
"matching_details": [
{
"me_value": "value1",
"matching_attributes": [
{
"me_id": "1234",
"me_name": "28 sai",
"me_list": [
{
"me_type": "Email ID",
"me_email_list": [
{
"me_value": "a#gmail"
},
{
"me_value": "b#gmail"
}
],
"me_percent": "100"
}
]
},
{
"me_id": "5678",
"me_name": "29 meena",
"me_list": [
{
"me_type": "Email ID",
"me_email_list": [
{
"me_value": "c#gmail.com"
},
{
"me_value": ",d#gmail.com"
}
],
"me_percent": "100"
}
]
}
]
},
{
"me_value": "value2",
"matching_attributes": [
{
"me_id": "1234",
"me_name": "rimzim",
"me_list": [
{
"me_type": "Email ID",
"me_email_list": [
{
"me_value": "p#gmail"
},
{
"me_value": "q#gmail"
}
],
"me_percent": "100"
}
]
},
{
"me_id": "5678",
"me_name": "ranu",
"me_list": [
{
"me_type": "Email ID",
"me_email_list": [
{
"me_value": "t#gmail.com"
},
{
"me_value": ",u#gmail.com"
}
],
"me_percent": "100"
}
]
}
]
},
]}
above structure is the actual output.I tried creating the same but for
me data's are coming in single row.
enter code here<table>
<tbody>
<tr>
<th>contact</th>
<th>ty</th>
<th>ed</th>
<th>mail</th>
<th>percent</th>
</tr>
<tr>
<td rowspan="4">data.e_o_name</td>
<td rowspan="2" *ngFor="let match of data.matching_details">{{match.me_value}}</td>
<td>28 sai</td>
<th>a#gmail,b#gmail</th>
<td>100</td>
</tr>
</tbody>
Help for the same is highly appriciated... Thanks in advance

I would prepare proper table rows structure in order to render this complex table.
component.ts(or service.ts)
rows = [];
generateTable() {
if (!this.data) {
return;
}
this.rows.push([
{
text: this.data.e_o_name,
rowspan: 0
}
]);
let maxRowSpan = 0;
this.data.matching_details.forEach((detail, i) => {
const elemRowSpan = Math.max(detail.matching_attributes.length, 1);
maxRowSpan += elemRowSpan;
if (i > 0) {
this.rows.push([])
}
this.rows[this.rows.length - 1].push({
text: detail.me_value,
rowspan: elemRowSpan
});
detail.matching_attributes.forEach((attr, j) => {
if (j > 0) {
this.rows.push([])
}
const mail = attr.me_list[0];
this.rows[this.rows.length - 1].push(
{
text: attr.me_name,
rowspan: 1
},
{
text: mail.me_email_list.map(({ me_value }) => me_value).join(', '),
rowspan: 1
},
{
text: mail.me_percent,
rowspan: 1
}
);
})
});
this.rows[0][0].rowspan = maxRowSpan;
}
template.html
<table>
<tbody>
<tr>
<th>contact</th>
<th>ty</th>
<th>ed</th>
<th>mail</th>
<th>percent</th>
</tr>
<tr *ngFor="let row of rows">
<td *ngFor="let col of row" [attr.rowSpan]="col.rowspan">{{ col.text }}</td>
</tr>
</tbody>
</table>
Ng-run Example

AngularJs Table Sorting when Data is nested

How can I approach table sorting in angularjs, when my data is nested and not all columns are first level citizens of the objects.
Data (excerpt)
[
{
"name": "Team A",
"categories": [
{
"label": "FG%",
"value": 4676,
"points": 7
},
{
"label": "FT%",
"value": 8387,
"points": 9
}
]
}, {
"name": "Team B",
"categories": [
{
"label": "FG%",
"value": 5285,
"points": 10
},
{
"label": "FT%",
"value": 6111,
"points": 1
}
]
}
]
HTML
<div ng-controller="mainCtrl">
<table class="table table-striped table-condensed">
<thead>
<tr>
<th ng:click="changeSorting('name')">Name</th>
<th ng:click="changeSorting('name')">Points</th>
<th ng:click="changeSorting(value.label)" ng-repeat="(index, value) in data.teams[0].categories">{{value.label}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="team in data.teams | orderBy:sort.column:sort.descending ">
<td>{{team.name}}</td>
<td>{{team.totalPoints}}</td>
<td ng-repeat="(name, cat) in team.categories">
{{cat.value}}
</td>
</tr>
</tbody>
</table>
</div>
Here is a approach I found a few times. Anyway, because of the structure of my data, I am afraid this isn't the right idea.
Sorting on Controller
$scope.sort = {
column: 'name',
descending: false
};
$scope.changeSorting = function(column) {
var sort = $scope.sort;
if (sort.column == column) {
sort.descending = !sort.descending;
} else {
sort.column = column;
sort.descending = false;
}
};
Here is the updated fiddle: http://jsfiddle.net/SunnyRed/mTywq/2/

I modified your code based on angular documentation at http://docs.angularjs.org/api/ng.filter:orderBy
HTML
<div ng-controller="mainCtrl">
<table class="table table-striped table-condensed">
<thead>
<tr>
<th ng:click="predicate = 'name'; reverse = !reverse">Name</th>
<th ng:click="predicate = 'totalPoints'; reverse = !reverse">Points</th>
<th ng:click="toggleSort($index)" ng-repeat="category in data.teams[0].categories">{{category.label}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="team in data.teams | orderBy:predicate:reverse">
<td>{{team.name}}</td>
<td>{{team.totalPoints}}</td>
<td ng-repeat="(name, cat) in team.categories">
{{cat.value}}
</td>
</tr>
</tbody>
</table>
</div>
Sorting parts
$scope.toggleSort = function(index){
$scope.reverse = !$scope.reverse;
$scope.predicate = function(team){
return team.categories[index].points;
}
}
Here is the fiddle: http://jsfiddle.net/mgalela/Br5Wb/14/

Since you need to lookup the correct category based on it's label and then sort using it's associated value I'd create a custom orderBy function.
To use new function sortFunc we add it here:
<tr ng-repeat="team in data.teams | orderBy: sortFunc ">
Then let the user pick options:
<select ng-model="sortVal">
<option value="name">Name</option>
<option value="points">points</option>
<option value="3PM">3PM</option>
<option value="PTS">PTS</option>
</select>
Finally here's the sort function which pulls in the chosen option using $scope.sortVal and returns the appropriate value for orderBy to sort.
$scope.sortFunc = function(val) {
if ($scope.sortVal == 'name') {
return(val.name);
} else if ($scope.sortVal == 'points') {
return(val.totalPoints);
} else if ($scope.sortVal == '3PM' ||
$scope.sortVal == 'PTS') {
for (var i = 0; i < val.categories.length; i++) {
category = val.categories[i];
if (category.label == $scope.sortVal){
return(category.value);
}
}
}
}
Here's the fiddle of this working: http://jsfiddle.net/mTywq/4/

Develop Reference

JavaScript is the programming language of the Web.

Comparing 2 different set of data array - javascript

Related

How to add JSON data to my datatable if I have 3 nested data?

how to display the rendered data correctly in their respective columns?

React render Table with two arrays

how to create complex table from json using angular 6?

AngularJs Table Sorting when Data is nested

Categories

Resources