Related
I have fairly limited experience with React Native. I've set up similar API-calls before without trouble, but for some reason can't get this one to work.
I have the following code which includes state variables and the API fetch function.
export default function App() {
const [users, setUsers] = useState([]);
const [villages, setVillages] = useState([]);
async function getUsers() {
const response = await fetch("https://localhost:7108/PlayersAPI/1");
const users = await response.json();
setUsers(users[0]);
console.log("Before calling setVillages:", users[0].villages[0]); // log the value before calling setVillages
setVillages(users[0].villages[0].villageId);
console.log(villages);
console.log("After calling setVillages:", users[0].villages[0]); // log the value after calling setVillages
}
The function runs from a useEffect:
useEffect(() => {
getUsers();
console.log(villages);
}, []);
The response I get from the API looks like this:
[
{
"playerId": 1,
"username": "Sebastian",
"villages": [
{
"villageId": 1,
"name": "Söderstadion",
"resourceFields": [
{
"resourceFieldId": 1,
"level": 2,
"typeOfResource": 0,
"villageId": 1,
"village": null
},
{
"resourceFieldId": 2,
"level": 1,
"typeOfResource": 1,
"villageId": 1,
"village": null
},
{
"resourceFieldId": 3,
"level": 2,
"typeOfResource": 2,
"villageId": 1,
"village": null
},
{
"resourceFieldId": 4,
"level": 1,
"typeOfResource": 3,
"villageId": 1,
"village": null
}
],
"player": null,
"playerId": 1,
"villageData": {
"villageDataId": 1,
"wood": 7900,
"iron": 7900,
"clay": 7900,
"maxStorage": 8000,
"crop": 20,
"maxCrop": 8000,
"woodProduction": 100,
"ironProduction": 150,
"clayProduction": 100,
"cropProduction": 100,
"resourcesLastUpdated": "2022-12-08T21:52:35.8305912",
"villageId": 1,
"village": null
},
"armies": null,
"tileId": 11,
"tile": {
"tileId": 11,
"worldMapId": 1,
"worldMap": null,
"coordinate": null,
"village": null
}
},
{
"villageId": 2,
"name": "Kennedy",
"resourceFields": [
{
"resourceFieldId": 5,
"level": 1,
"typeOfResource": 0,
"villageId": 2,
"village": null
},
{
"resourceFieldId": 6,
"level": 2,
"typeOfResource": 1,
"villageId": 2,
"village": null
},
{
"resourceFieldId": 7,
"level": 2,
"typeOfResource": 2,
"villageId": 2,
"village": null
},
{
"resourceFieldId": 8,
"level": 1,
"typeOfResource": 3,
"villageId": 2,
"village": null
}
],
"player": null,
"playerId": 1,
"villageData": {
"villageDataId": 2,
"wood": 8000,
"iron": 8000,
"clay": 8000,
"maxStorage": 8000,
"crop": 120,
"maxCrop": 8000,
"woodProduction": 150,
"ironProduction": 150,
"clayProduction": 100,
"cropProduction": 100,
"resourcesLastUpdated": "2022-12-08T21:52:35.8319058",
"villageId": 2,
"village": null
},
"armies": null,
"tileId": 12,
"tile": {
"tileId": 12,
"worldMapId": 1,
"worldMap": null,
"coordinate": null,
"village": null
}
},
{
"villageId": 3,
"name": "Ludwigsson",
"resourceFields": [
{
"resourceFieldId": 9,
"level": 1,
"typeOfResource": 0,
"villageId": 3,
"village": null
},
{
"resourceFieldId": 10,
"level": 2,
"typeOfResource": 1,
"villageId": 3,
"village": null
},
{
"resourceFieldId": 11,
"level": 1,
"typeOfResource": 2,
"villageId": 3,
"village": null
},
{
"resourceFieldId": 12,
"level": 2,
"typeOfResource": 3,
"villageId": 3,
"village": null
}
],
"player": null,
"playerId": 1,
"villageData": {
"villageDataId": 3,
"wood": 8000,
"iron": 8000,
"clay": 8000,
"maxStorage": 8000,
"crop": 120,
"maxCrop": 8000,
"woodProduction": 150,
"ironProduction": 100,
"clayProduction": 100,
"cropProduction": 150,
"resourcesLastUpdated": "2022-12-08T21:52:35.8319149",
"villageId": 3,
"village": null
},
"armies": null,
"tileId": 13,
"tile": {
"tileId": 13,
"worldMapId": 1,
"worldMap": null,
"coordinate": null,
"village": null
}
}
],
"playerData": {
"playerDataId": 1,
"wood": 100,
"iron": 750,
"clay": 350,
"maxStorage": 800,
"crop": 120,
"maxCrop": 800,
"woodProduction": 100,
"ironProduction": 100,
"clayProduction": 100,
"cropProduction": 0,
"resourcesLastUpdated": "2022-12-04T20:00:09.3110368",
"playerId": 1,
"player": null
}
}
]
The users state works as expected, it fetches everything that has to do with the first player (in this case there is only one though). I can then console.log(users[0].villages[0]) and get the exact output I'm interested in, an object looking like this:
{
"villageId": 1,
"name": "Söderstadion",
"resourceFields": [
{
"resourceFieldId": 1,
"level": 2,
"typeOfResource": 0,
"villageId": 1,
"village": null
},
{
"resourceFieldId": 2,
"level": 1,
"typeOfResource": 1,
"villageId": 1,
"village": null
},
{
"resourceFieldId": 3,
"level": 2,
"typeOfResource": 2,
"villageId": 1,
"village": null
},
{
"resourceFieldId": 4,
"level": 1,
"typeOfResource": 3,
"villageId": 1,
"village": null
}
],
"player": null,
"playerId": 1,
"villageData": {
"villageDataId": 1,
"wood": 7900,
"iron": 7900,
"clay": 7900,
"maxStorage": 8000,
"crop": 20,
"maxCrop": 8000,
"woodProduction": 100,
"ironProduction": 150,
"clayProduction": 100,
"cropProduction": 100,
"resourcesLastUpdated": "2022-12-08T21:52:35.8305912",
"villageId": 1,
"village": null
},
"armies": null,
"tileId": 11,
"tile": {
"tileId": 11,
"worldMapId": 1,
"worldMap": null,
"coordinate": null,
"village": null
}
}
But for the life of me I cannot get setVillages(users[0].villages[0].villageId); to work. All it returns is an empty array. I've set up a console.log before and after setVillages is used, and both return the object. But when I console.log(villages) it returns an empty array [].
What is it that I'm missing here?
use it inside a useEffect to detect changes since usestate is asynchronous.
useEffect(() => {
console.log(villages)
}, [villages])
I am trying to display JSON data to a DataTable in Flutter. The data is coming from an API, getting data is no problem. But I am running to a problem displaying the list of some data in DataTable, I think is because of the JSON structure.
Here is the JSON sample
"response": [
{
"league": {
"id": 1,
"name": "World Cup",
"country": "World",
"logo": "https://media.api-sports.io/football/leagues/1.png",
"flag": null,
"season": 2018,
"standings": [
[
{
"rank": 1,
"team": {
"id": 7,
"name": "Uruguay",
"logo": "https://media.api-sports.io/football/teams/7.png"
},
"points": 9,
"goalsDiff": 5,
"group": "FIFA World Cup: Group A",
"form": "WWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 3,
"draw": 0,
"lose": 0,
"goals": {
"for": 5,
"against": 0
}
},
"home": {
"played": 2,
"win": 2,
"draw": 0,
"lose": 0,
"goals": {
"for": 4,
"against": 0
}
},
"away": {
"played": 1,
"win": 1,
"draw": 0,
"lose": 0,
"goals": {
"for": 1,
"against": 0
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 2,
"team": {
"id": 4,
"name": "Russia",
"logo": "https://media.api-sports.io/football/teams/4.png"
},
"points": 6,
"goalsDiff": 4,
"group": "FIFA World Cup: Group A",
"form": "LWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 2,
"draw": 0,
"lose": 1,
"goals": {
"for": 8,
"against": 4
}
},
"home": {
"played": 2,
"win": 2,
"draw": 0,
"lose": 0,
"goals": {
"for": 8,
"against": 1
}
},
"away": {
"played": 1,
"win": 0,
"draw": 0,
"lose": 1,
"goals": {
"for": 0,
"against": 3
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 3,
"team": {
"id": 23,
"name": "Saudi Arabia",
"logo": "https://media.api-sports.io/football/teams/23.png"
},
"points": 3,
"goalsDiff": -5,
"group": "FIFA World Cup: Group A",
"form": "WLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 1,
"draw": 0,
"lose": 2,
"goals": {
"for": 2,
"against": 7
}
},
"home": {
"played": 1,
"win": 1,
"draw": 0,
"lose": 0,
"goals": {
"for": 2,
"against": 1
}
},
"away": {
"played": 2,
"win": 0,
"draw": 0,
"lose": 2,
"goals": {
"for": 0,
"against": 6
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 4,
"team": {
"id": 32,
"name": "Egypt",
"logo": "https://media.api-sports.io/football/teams/32.png"
},
"points": 0,
"goalsDiff": -4,
"group": "FIFA World Cup: Group A",
"form": "LLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 0,
"draw": 0,
"lose": 3,
"goals": {
"for": 2,
"against": 6
}
},
"home": {
"played": 1,
"win": 0,
"draw": 0,
"lose": 1,
"goals": {
"for": 0,
"against": 1
}
},
"away": {
"played": 2,
"win": 0,
"draw": 0,
"lose": 2,
"goals": {
"for": 2,
"against": 5
}
},
"update": "2020-06-18T00:00:00+00:00"
}
],
[
{
"rank": 1,
"team": {
"id": 9,
"name": "Spain",
"logo": "https://media.api-sports.io/football/teams/9.png"
},
"points": 5,
"goalsDiff": 1,
"group": "FIFA World Cup: Group B",
"form": "WWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 1,
"draw": 2,
"lose": 0,
"goals": {
"for": 6,
"against": 5
}
},
"home": {
"played": 1,
"win": 0,
"draw": 1,
"lose": 0,
"goals": {
"for": 2,
"against": 2
}
},
"away": {
"played": 2,
"win": 1,
"draw": 1,
"lose": 0,
"goals": {
"for": 4,
"against": 3
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 2,
"team": {
"id": 27,
"name": "Portugal",
"logo": "https://media.api-sports.io/football/teams/27.png"
},
"points": 5,
"goalsDiff": 1,
"group": "FIFA World Cup: Group B",
"form": "LWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 1,
"draw": 2,
"lose": 0,
"goals": {
"for": 5,
"against": 4
}
},
"home": {
"played": 2,
"win": 1,
"draw": 1,
"lose": 0,
"goals": {
"for": 4,
"against": 3
}
},
"away": {
"played": 1,
"win": 0,
"draw": 1,
"lose": 0,
"goals": {
"for": 1,
"against": 1
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 3,
"team": {
"id": 22,
"name": "Iran",
"logo": "https://media.api-sports.io/football/teams/22.png"
},
"points": 4,
"goalsDiff": 0,
"group": "FIFA World Cup: Group B",
"form": "WLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 1,
"draw": 1,
"lose": 1,
"goals": {
"for": 2,
"against": 2
}
},
"home": {
"played": 2,
"win": 0,
"draw": 1,
"lose": 1,
"goals": {
"for": 1,
"against": 2
}
},
"away": {
"played": 1,
"win": 1,
"draw": 0,
"lose": 0,
"goals": {
"for": 1,
"against": 0
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 4,
"team": {
"id": 31,
"name": "Morocco",
"logo": "https://media.api-sports.io/football/teams/31.png"
},
"points": 1,
"goalsDiff": -2,
"group": "FIFA World Cup: Group B",
"form": "LLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 0,
"draw": 1,
"lose": 2,
"goals": {
"for": 2,
"against": 4
}
},
"home": {
"played": 1,
"win": 0,
"draw": 0,
"lose": 1,
"goals": {
"for": 0,
"against": 1
}
},
"away": {
"played": 2,
"win": 0,
"draw": 1,
"lose": 1,
"goals": {
"for": 2,
"against": 3
}
},
"update": "2020-06-18T00:00:00+00:00"
}
],
[
{
"rank": 1,
"team": {
"id": 2,
"name": "France",
"logo": "https://media.api-sports.io/football/teams/2.png"
},
"points": 7,
"goalsDiff": 2,
"group": "FIFA World Cup: Group C",
"form": "WWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 2,
"draw": 1,
"lose": 0,
"goals": {
"for": 3,
"against": 1
}
},
"home": {
"played": 2,
"win": 2,
"draw": 0,
"lose": 0,
"goals": {
"for": 3,
"against": 1
}
},
"away": {
"played": 1,
"win": 0,
"draw": 1,
"lose": 0,
"goals": {
"for": 0,
"against": 0
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 2,
"team": {
"id": 21,
"name": "Denmark",
"logo": "https://media.api-sports.io/football/teams/21.png"
},
"points": 5,
"goalsDiff": 1,
"group": "FIFA World Cup: Group C",
"form": "LWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 1,
"draw": 2,
"lose": 0,
"goals": {
"for": 2,
"against": 1
}
},
"home": {
"played": 2,
"win": 0,
"draw": 2,
"lose": 0,
"goals": {
"for": 1,
"against": 1
}
},
"away": {
"played": 1,
"win": 1,
"draw": 0,
"lose": 0,
"goals": {
"for": 1,
"against": 0
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 3,
"team": {
"id": 30,
"name": "Peru",
"logo": "https://media.api-sports.io/football/teams/30.png"
},
"points": 3,
"goalsDiff": 0,
"group": "FIFA World Cup: Group C",
"form": "WLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 1,
"draw": 0,
"lose": 2,
"goals": {
"for": 2,
"against": 2
}
},
"home": {
"played": 1,
"win": 0,
"draw": 0,
"lose": 1,
"goals": {
"for": 0,
"against": 1
}
},
"away": {
"played": 2,
"win": 1,
"draw": 0,
"lose": 1,
"goals": {
"for": 2,
"against": 1
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 4,
"team": {
"id": 20,
"name": "Australia",
"logo": "https://media.api-sports.io/football/teams/20.png"
},
"points": 1,
"goalsDiff": -3,
"group": "FIFA World Cup: Group C",
"form": "LLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 0,
"draw": 1,
"lose": 2,
"goals": {
"for": 2,
"against": 5
}
},
"home": {
"played": 1,
"win": 0,
"draw": 0,
"lose": 1,
"goals": {
"for": 0,
"against": 2
}
},
"away": {
"played": 2,
"win": 0,
"draw": 1,
"lose": 1,
"goals": {
"for": 2,
"against": 3
}
},
"update": "2020-06-18T00:00:00+00:00"
}
],
The code display the data in the datatable
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FutureBuilder<Standings>(
future: _apiService.getStandings(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
Standings datas = snapshot.data;
return ListView.builder(
itemCount: datas.response[0].league.standings.length,
itemBuilder: (BuildContext ctx, int i) {
return Card(
child: DataTable(
// ignore: prefer_const_constructors
// ignore: prefer_const_literals_to_create_immutables
// ignore: prefer_const_constructors
columns: <DataColumn>[
DataColumn(
label: Text('Team'),
),
],
rows: <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(
Text(datas.response[0].league.standings[0][0]
.team.name),
),
],
),
],
),
);
});
}
return Center(
child: CircularProgressIndicator(),
);
}),
));
The result
Result when ran code
I know the reason one team is showing is because of this code
<DataCell>[
DataCell(
Text(datas.response[0].league.standings[i][0]
.team.name),
),
But how can I display the rest of teams automatically? Thanks in advance.
For anyone that was facing the same problem, based on this question(Link) that was answered, this help me modified the code.
return ListView.builder(
itemCount: datas.response[0].league.standings.length,
itemBuilder: (BuildContext ctx, int i) {
return Column(
children: <Widget>[
ListTile(
title: Text(
datas.response[0].league.standings[i][0].group),
),
Row(
children: [
Text('Position'),
Text(''),
Text('Team'),
],
),
Card(
child: Row(
children: <Widget>[
Column(
children: <Widget>[
Text(datas
.response[0].league.standings[i][0].rank
.toString()),
Text(datas
.response[0].league.standings[i][1].rank
.toString()),
Text(datas
.response[0].league.standings[i][2].rank
.toString()),
Text(datas
.response[0].league.standings[i][3].rank
.toString()),
],
),
Column(children: <Widget>[
Image(
image: NetworkImage(datas.response[0].league
.standings[i][0].team.logo),
height: 30,
width: 20,
),
Image(
image: NetworkImage(datas.response[0].league
.standings[i][1].team.logo),
height: 30,
width: 20,
),
Image(
image: NetworkImage(datas.response[0].league
.standings[i][2].team.logo),
height: 30,
width: 20,
),
Image(
image: NetworkImage(datas.response[0].league
.standings[i][3].team.logo),
height: 30,
width: 20,
),
]),
Column(
children: [
Text(datas.response[0].league.standings[i][0]
.team.name),
Text(datas.response[0].league.standings[i][1]
.team.name),
Text(datas.response[0].league.standings[i][2]
.team.name),
Text(datas.response[0].league.standings[i][3]
.team.name)
],
)
],
),
)
],
);
});
I have a JSON array as follows
{
"id": "00000005",
"Name": "Test5",
"hours": 7.5,
"day": 1
},
{
"id": "00000005",
"Name": "Test5",
"hours": 2,
"day": 2
},
{
"id": "00000005",
"Name": "Test5",
"hours": 3,
"day": 3
},
{
"id": "00000005",
"Name": "Test5",
"hours": 3,
"day": 4
},
{
"id": "00000004",
"Name": "Test4",
"hours": 1,
"day": 1
},
{
"id": "00000004",
"Name": "Test4",
"hours": 4,
"day": 2
},
{
"id": "00000004",
"Name": "Test4",
"hours": 4,
"day": 3
},
{
"id": "00000003",
"Name": "Test3",
"hours": 7.5,
"day": 1
},
{
"id": "00000003",
"Name": "Test3",
"hours": 6,
"day": 2
},
{
"id": "00000003",
"Name": "Test3",
"hours": 4,
"day": 3
},
{
"id": "00000003",
"Name": "Test3",
"hours": 5,
"day": 4
}
By using the above json array I want to draw a bar chart grouped by id and day. That is I need to the graph to be drawn for id 00000005,00000004,00000003 in day 1 and id 00000005,00000004,00000003 in day 2 and id 00000005,00000004,00000003 in day 3 and id 00000005,00000004,00000003 in day 4.
I know the basic code for drawing a bar chart using angular-chart.js and chart.js. But I can't understand how should I pass my array values to $scope.labels and $scope.data.
Basic code for bar chart
angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
})
UPDATE
I managed to group the array according to the day and following is the arranged array
"data": {
"1": [
{
"id": "00000005",
"Name": "Test5",
"hours": 7.5,
"day": 1
},
{
"id": "00000004",
"Name": "Test4",
"hours": 1,
"day": 1
},
{
"id": "00000003",
"Name": "Test3",
"hours": 7.5,
"day": 1
}
],
"2": [
{
"id": "00000005",
"Name": "Test5",
"hours": 2,
"day": 2
},
{
"id": "00000004",
"Name": "Test4",
"hours": 4,
"day": 2
},
{
"id": "00000003",
"Name": "Test3",
"hours": 6,
"day": 2
}
],
"3": [
{
"id": "00000005",
"Name": "Test5",
"hours": 3,
"day": 3
},
{
"id": "00000004",
"Name": "Test4",
"hours": 4,
"day": 3
},
{
"id": "00000003",
"Name": "Test3",
"hours": 4,
"day": 3
},
],
"4": [
{
"id": "00000005",
"Name": "Test5",
"hours": 3,
"day": 4
},
{
"id": "00000003",
"Name": "Test3",
"hours": 5,
"day": 4
}
]
}
}
Now how can I assign these values to $scope.data and $scope.labels ?
If you take a run at the basic code, applied to your data, do you want something like this (if I were reporting on this data):
angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
$scope.labels = ['00000005', '00000004', '00000003'];
$scope.series = ['Day 1', 'Day 2', 'Day 3', 'Day 4'];
$scope.data = [
[7.5, 1, 7.5],
[2, 4, 6],
[3, 4, 4],
[3, ?, 5],
];
})
Note entirely sure how you want to handle missing data, you'll have to play around with a combination of 0 or undefined within the chart. If you have issues splitting the data in this way, or this isn't what you're looking for, will need more details.
https://plnkr.co/edit/ouHu5R0UbbkxyDfUerru?p=preview
I've got ES index products with data like this (simplified version, there are about 20 fields actually):
{_id: 1, _score: 1, color: red, size: S}
{_id: 2, _score: 1, color: red, size: M}
{_id: 3, _score: 1, color: red, size: L}
{_id: 4, _score: 1, color: blue, size: S}
{_id: 5, _score: 1, color: blue, size: M}
{_id: 6, _score: 1, color: blue, size: L}
I want to filter products by attributes (color and size) but I need all of them be presented in results, the filter condition should affect only scores. Examples:
Query: color == red
Result:
{_id: 1, _score: 1}
{_id: 2, _score: 1}
{_id: 3, _score: 1}
{_id: 4, _score: 0}
{_id: 5, _score: 0}
{_id: 6, _score: 0}
Query: size == M
Result:
{_id: 1, _score: 0}
{_id: 2, _score: 1}
{_id: 3, _score: 0}
{_id: 4, _score: 0}
{_id: 5, _score: 1}
{_id: 6, _score: 0}
Query: color == red && size == M
Result:
{_id: 1, _score: 0}
{_id: 2, _score: 1}
{_id: 3, _score: 0}
{_id: 4, _score: 0}
{_id: 5, _score: 0}
{_id: 6, _score: 0}
Any ideas how can I achieve that? Does it look like work for elasticsearch? Maybe I should consider to switch some other store/database.
ES version is 1.7.5
I am not sure what your use case is but this is not something I would recommend that you do trying to fix your relevancy score. Here is an example for one of the cases and there are multiple ways of doing this
POST /_search
{
"query":{
"bool":{
"should":[
{
"constant_score":{
"filter":{
"term":{
"color":"red"
}
},
"boost":1
}
},
{
"bool":{
"must_not":{
"term":{
"color":"red"
}
},
"boost":0
}
}
]
}
}
}
and the result is
{
"took": 3,
"timed_out": false,
"_shards": {
"total": 5,
"successful": 5,
"skipped": 0,
"failed": 0
},
"hits": {
"total": 6,
"max_score": 1,
"hits": [
{
"_index": "test",
"_type": "_doc",
"_id": "2",
"_score": 1,
"_source": {
"color": "red",
"size": "M"
}
},
{
"_index": "test",
"_type": "_doc",
"_id": "1",
"_score": 1,
"_source": {
"color": "red",
"size": "S"
}
},
{
"_index": "test",
"_type": "_doc",
"_id": "3",
"_score": 1,
"_source": {
"color": "red",
"size": "L"
}
},
{
"_index": "test",
"_type": "_doc",
"_id": "5",
"_score": 0,
"_source": {
"color": "blue",
"size": "M"
}
},
{
"_index": "test",
"_type": "_doc",
"_id": "4",
"_score": 0,
"_source": {
"color": "blue",
"size": "S"
}
},
{
"_index": "test",
"_type": "_doc",
"_id": "6",
"_score": 0,
"_source": {
"color": "blue",
"size": "L"
}
}
]
}
}
Hi im new to angularjs i need to explore the data in xlsx format but
im having my data in nested json array format which is not posiible to
explore the data in xlsx format.
index.html
<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.12/xlsx.core.min.js"></script>
<script src="https://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>
<div class="box-body">
<button ng-click="exportData()" class="btn btn-primary" style="float:right;margin-right:30px; margin-bottom:30px;">Export <i class="fa fa-arrow-do
wn"></i></button>
</div>
export.js
dashboard.controller('excelreportController',function($scope,$html){
$scope.inverters = [
{
"InvDetails": "UPS",
"LstRecords": [
{
"Id": 1,
"Invertor_Id": 1,
"Time_of_Reading": "20170214",
"Lastreading": 0,
"Readingby": 0
},
{
"Id": 87,
"Invertor_Id": 1,
"Time_of_Reading": "20170215",
"Lastreading": 5,
"Readingby": 10
},
{
"Id": 110,
"Invertor_Id": 1,
"Time_of_Reading": "20170216",
"Lastreading": 10,
"Readingby": 92
},
{
"Id": 111,
"Invertor_Id": 1,
"Time_of_Reading": "20170216",
"Lastreading": 92,
"Readingby": 95
}
]
},
{
"InvDetails": "Power Supply",
"LstRecords": [
{
"Id": 2,
"Invertor_Id": 2,
"Time_of_Reading": "20170214",
"Lastreading": 0,
"Readingby": 0
},
{
"Id": 88,
"Invertor_Id": 2,
"Time_of_Reading": "20170215",
"Lastreading": 7,
"Readingby": 13
},
{
"Id": 109,
"Invertor_Id": 2,
"Time_of_Reading": "20170216",
"Lastreading": 13,
"Readingby": 25
},
{
"Id": 112,
"Invertor_Id": 2,
"Time_of_Reading": "20170216",
"Lastreading": 25,
"Readingby": 49
}
]
}
];
$scope.exportData = function () {
var data = "";
$scope.headers = [];
angular.forEach($scope.inverters, function (value, key) {
var we = value.InvDetails;
$scope.headers.push(we);
$scope.last = value.LstRecords;
angular.forEach($scope.last, function (value, key) {
data = {
"Id": value.Id,
"Invertor_Id": value.Invertor_Id,
"Time_of_Reading": value.Time_of_Reading,
"Lastreading": value.Lastreading,
"Readingby": value.Readingby
};
})
})
$scope.result = [];
$scope.result0 = [];
$scope.result.push({
"Invertor": JSON.stringify(data)
})
alasql('SELECT * INTO XLSX("john.xlsx",{headers:true}) FROM ?', [$scope.result]);
};
please let me know any how to export this data in xlsx format using angularjs i have tried all the ways from more 24 hrs but i didnt get how to do please use my json data which i have give send me the working fiddle it will grate help for me in angularjs just i need to export my data in xlsx format.
You can flatten your complex json to simple as follows.
var data = [
{
"InvDetails": "UPS",
"LstRecords": [
{
"Id": 1,
"Invertor_Id": 1,
"Time_of_Reading": "20170214",
"Lastreading": 0,
"Readingby": 0
},
{
"Id": 87,
"Invertor_Id": 1,
"Time_of_Reading": "20170215",
"Lastreading": 5,
"Readingby": 10
},
{
"Id": 110,
"Invertor_Id": 1,
"Time_of_Reading": "20170216",
"Lastreading": 10,
"Readingby": 92
},
{
"Id": 111,
"Invertor_Id": 1,
"Time_of_Reading": "20170216",
"Lastreading": 92,
"Readingby": 95
}
]
},
{
"InvDetails": "Power Supply",
"LstRecords": [
{
"Id": 2,
"Invertor_Id": 2,
"Time_of_Reading": "20170214",
"Lastreading": 0,
"Readingby": 0
},
{
"Id": 88,
"Invertor_Id": 2,
"Time_of_Reading": "20170215",
"Lastreading": 7,
"Readingby": 13
},
{
"Id": 109,
"Invertor_Id": 2,
"Time_of_Reading": "20170216",
"Lastreading": 13,
"Readingby": 25
},
{
"Id": 112,
"Invertor_Id": 2,
"Time_of_Reading": "20170216",
"Lastreading": 25,
"Readingby": 49
}
]
}
];
and then create a prototype for Array method as
Array.prototype.concatAll = function() {
var results = [];
this.forEach(function(subArray){
subArray.forEach(function(item) {
results.push(item);
});
})
return results;
};
and after that you can simple use array map function to flatten your complex json to simple
var newData =
data.
map(function(invertor){
return invertor.LstRecords;
}).
concatAll();
console.log(newData)