I have an Angular application in which I am doing a http-request. The output of this request is a type: object. When I console.log the data I can see that it is an array of objects.
My question now is:
How can I save the data to display it afterwards in a chart?
Here is my code:
setInterval(() => {
// API request
this.service.getMesswerte().subscribe({
next: data => {
this.chartData = data;
console.log(this.chartData);
}
})
}, 10000)
And here is the console.log output:
(5) [{…}, {…}, {…}, {…}, {…}]
0: {id: 4, temperatur: 25.9, luftfeuchtigkeit: 90, co2: 20.6, becken: 83, …}
1: {id: 5, temperatur: 25.9, luftfeuchtigkeit: 90, co2: 20.6, becken: 83, …}
2: {id: 6, temperatur: 25.4, luftfeuchtigkeit: 91, co2: 19.8, becken: 80, …}
3: {id: 7, temperatur: 23.1, luftfeuchtigkeit: 90, co2: 3.8, becken: 87, …}
4: {id: 8, temperatur: 24.3, luftfeuchtigkeit: 95, co2: 120.4, becken: 98, …}
length: 5
[[Prototype]]: Array(0)
i dont unterstand what you need exactly but you can store the data like that to build a chart :
//Add interface on the top
export interface Result : {
id: number,
//other fields ..
}
//#Component....
data: any[] = [];
setInterval(() => {
this.service.getMesswerte()
.subscribe({
next: result=> {
this.data = [];
for (let row in result as Result[]) {
this.data.push([
result[row].temperatur,
result[row].luftfeuchtigkeit,
//other attr...
]);
}
}
})
}, 10000)
My filter function is currently returning an empty array. Instead of an array containing the matched object based on the Id.
console:
operators (51) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]0: created_at: "2022-06-02T07:21:08.492Z"id: 3name: "operator1"phone: 1478subdomain: "test101"updated_at: "2022-06-02T07:21:08.492Z"user_id: 1[[Prototype]]: Object1: {id: 4, name: 'operator4', phone: 14785, subdomain: 'test104', created_at: '2022-06-02T13:13:42.898Z', …}2: {id: 5, name: 'operator12', phone: 14782, subdomain: 'test20', created_at: '2022-06-03T06:51:12.950Z', …}3: {id: 2, name: 'test1r', phone: 1234451699, subdomain: 'sub10', created_at: '2022-06-01T15:51:29.098Z', …}4: {id: 6, name: 'operator16', phone: 147823, subdomain: 'test21', created_at: '2022-06-06T14:17:25.576Z', …}5: {id: 7, name: 'operator22', phone: 1478237, subdomain: 'test213', created_at: '2022-06-06T14:59:30.342Z', …}6: {id: 8, name: 'operator23', phone: 14782376, subdomain: 'test2153', created_at: '2022-06-06T17:07:34.840Z', …}7: {id: 9, name: 'crystal parking', phone: 81059218, subdomain: 'sub27', created_at: '2022-06-07T17:56:09.142Z', …}8: {id: 10, name: 'lay park', phone: 70255956, subdomain: 'sub11', created_at: '2022-06-07T22:32:54.829Z', …}9: {id: 11, name: 'monk parking', phone: 82059218, subdomain: 'sub07', created_at: '2022-06-07T22:35:24.980Z', …}10: {id: 12, name: 'mabilla park', phone: 71255956, subdomain: 'sub04', created_at: '2022-06-07T22:38:09.079Z', …}11: {id: 13, name: 'java parking', phone: 81055418, subdomain: 'sub19', created_at: '2022-06-07T23:07:42.734Z', …}12: {id: 14, name: 'loading park', phone: 81159215, subdomain: 'sub24', created_at: '2022-06-07T23:11:51.894Z', …}13: {id: 15, name: 'laya park', phone: 70255752, subdomain: 'test2167', created_at: '2022-06-07T23:25:47.786Z', …}14: {id: 16, name: 'cornerStone park', phone: 70980956, subdomain: 'sub21', created_at: '2022-06-09T08:23:47.909Z', …}15: {id: 17, name: 'IPC Staging', phone: null, subdomain: 'ipc-staging', created_at: '2022-06-09T19:31:21.886Z', …}16: {id: 18, name: 'operator121331', phone: 1245787989, subdomain: 'test46', created_at: '2022-06-16T11:43:54.280Z', …}17: {id: 19, name: 'operator81', phone: 124548, subdomain: 'dsrt7', created_at: '2022-06-16T12:36:08.918Z', …}18: {id: 20, name: 'operator87', phone: 124542, subdomain: 'dsrt5', created_at: '2022-06-16T13:40:33.744Z', …}19: {id: 21, name: 'operator88', phone: 124541, subdomain: 'dsrt9', created_at: '2022-06-17T21:25:24.321Z', …}20: {id: 23, name: 'operator89', phone: 124544, subdomain: 'dsrt11', created_at: '2022-06-17T21:29:02.275Z', …}21: {id: 24, name: 'PLECCO Technologies, Inc.', phone: 184334589, subdomain: 'titos1', created_at: '2022-06-18T05:46:53.596Z', …}22: {id: 25, name: 'sat park', phone: 1923671, subdomain: 'sub13', created_at: '2022-06-18T11:49:40.806Z', …}23: {id: 26, name: 'me park', phone: 1923679, subdomain: 'sub14', created_at: '2022-06-18T13:25:14.101Z', …}24: {id: 27, name: 'lushu park', phone: 1923673, subdomain: 'sub06', created_at: '2022-06-20T07:21:06.236Z', …}25: {id: 28, name: 'lome park', phone: 1923672, subdomain: 'sub09', created_at: '2022-06-20T08:37:14.750Z', …}26: {id: 29, name: 'operator85', phone: 124546, subdomain: 'dsrt13', created_at: '2022-06-21T15:08:52.690Z', …}27: {id: 30, name: 'ladaf park', phone: 1923677, subdomain: 'sub18', created_at: '2022-06-21T15:13:51.959Z', …}28: {id: 31, name: 'operator123', phone: 147821, subdomain: 'test120', created_at: '2022-06-23T00:35:39.639Z', …}29: {id: 32, name: 'operator121339', phone: 1245787982, subdomain: 'test09', created_at: '2022-06-24T13:05:35.451Z', …}30: {id: 33, name: 'operator121332', phone: 1245787981, subdomain: 'test01', created_at: '2022-06-24T23:30:48.697Z', …}31: {id: 34, name: 'authen parking', phone: 19236731, subdomain: 'sub16', created_at: '2022-06-26T14:53:01.328Z', …}32: {id: 35, name: 'larky', phone: 1923675, subdomain: 'sub023', created_at: '2022-06-26T17:21:51.401Z', …}33: {id: 36, name: 'operator131332', phone: 1245747981, subdomain: 'test03', created_at: '2022-06-26T22:18:44.953Z', …}34: {id: 37, name: 'warm park', phone: 1225747981, subdomain: 'test04', created_at: '2022-06-26T22:21:44.050Z', …}35: {id: 38, name: 'wood park', phone: 1623673, subdomain: 'sub018', created_at: '2022-06-26T22:58:01.366Z', …}36: {id: 39, name: 'look park', phone: 1523672, subdomain: 'sub33', created_at: '2022-06-26T23:06:42.957Z', …}37: {id: 40, name: 'vodo park', phone: 1123676, subdomain: 'sub221', created_at: '2022-06-26T23:37:22.580Z', …}38: {id: 41, name: 'demo park', phone: 1923372, subdomain: 'sub031', created_at: '2022-06-27T13:21:47.356Z', …}39: {id: 42, name: 'hilltop parking', phone: 1923674, subdomain: 'sub034', created_at: '2022-06-27T14:11:32.882Z', …}40: {id: 43, name: 'lagos park', phone: 1923572, subdomain: 'sub035', created_at: '2022-06-28T14:21:40.734Z', …}41: {id: 44, name: 'ooiuwdddt', phone: 787494, subdomain: 'subd', created_at: '2022-07-06T16:07:18.592Z', …}42: {id: 45, name: 'latam park', phone: 1922671, subdomain: 'sub091', created_at: '2022-07-06T16:29:14.202Z', …}43: {id: 46, name: 'find parking', phone: 1920674, subdomain: 'sub049', created_at: '2022-07-06T21:06:55.743Z', …}44: {id: 47, name: 'lotus', phone: 787491, subdomain: 'sub016', created_at: '2022-07-07T08:25:42.692Z', …}45: {id: 48, name: 'manti park', phone: 1913676, subdomain: 'sub019', created_at: '2022-07-07T12:34:14.164Z', …}46: {id: 49, name: 'lumbak parking', phone: 1913671, subdomain: 'sub087', created_at: '2022-07-07T17:29:36.156Z', …}47: {id: 50, name: 'agbor park', phone: 1923670, subdomain: 'sub071', created_at: '2022-07-07T17:52:41.114Z', …}48: {id: 51, name: 'lotus1', phone: 787496, subdomain: 'sub634', created_at: '2022-07-07T19:14:03.874Z', …}49: {id: 52, name: 'peak park', phone: 1923676, subdomain: 'sub041', created_at: '2022-07-07T19:39:53.717Z', …}50: {id: 53, name: 'fungy park', phone: 1923571, subdomain: 'sub032', created_at: '2022-07-07T19:53:41.606Z', …}length: 51[[Prototype]]: Array(0)
NewLocation.js:41
operator []
length: 0[[Prototype]]: Array(0)
My code:
const NewLocations = () => {
const { operatorId } = useParams();
console.log('id', operatorId);
const [successful, setSuccessful] = useState(false);
const operators = useSelector((state) => state.operators.data)
console.log('operators', operators);
const operator = operators.filter((operator) => operator.id === operatorId)
console.log('operator', operator);
remaining codes...
I really don't know what I'm missing...
I have check similar questions/solutions, but none solve my issue.
The useParams hook will return any values as strings. In your case, you need the operatorId to be a number. You can use parseInt to make the comparison work:
const operator = operators.filter((operator) => operator.id === parseInt(operatorId));
Might be the id that you are extracting is not there in the operators array, that's why you are getting an empty array
you can run this line of code whether the id is there or not
const operator = operators.filter((operator) => operator.id !== operatorId)
currently I have the problem to not be able to display some data in a dropdown. I want to create two different components in which the dropdowns could be. In one of them the dropdown is displayed properly, in the other I'm not able to make it running.
Here a small code snippet - I hope this is enough.
Working example:
component.html
<select class="test-table__input-filter table__input-filter" [formControl]="filter.control">
<option *ngFor="let entity of (entities | dropdownData: filter.name) | async">{{entity.name}}</option>
</select>
In the ts I have following line in ngOnInit:
this.entities.subscribe(val => console.log(val));
Which gives the following output in console:
{displayRole: Array(4)}
displayRole: Array(4)
0: {id: 1, name: "TEST1", title: "TEST1", priorityError: 4, priorityOffline: 3, …}
1: {id: 2, name: "TEST2", title: "TEST2", priorityError: 4, priorityOffline: 4, …}
2: {id: 3, name: "TEST3", title: "TEST3", priorityError: 4, priorityOffline: 4, …}
3: {id: 4, name: "TEST4", title: "TEST4", priorityError: 3, priorityOffline: 1, …}
length: 4
__proto__: Array(0)
__proto__: Object
Not working example:
<select class="test-form__field form__field form__field--error" [name]="field.name" [formControlName]="field.name">
<option *ngFor="let item of (field.data | dropdownData : field.name) | async">{{item.name}}</option>
</select>
In the ts I have following line in ngOnInit:
field.data.subscribe(val => console.log(val));
Which prints the following output in console:
{displayRole: Array(4)}
displayRole: Array(4)
0: {id: 1, name: "TEST1", title: "TEST1", priorityError: 4, priorityOffline: 3, …}
1: {id: 2, name: "TEST2", title: "TEST2", priorityError: 4, priorityOffline: 4, …}
2: {id: 3, name: "TEST3", title: "TEST3", priorityError: 4, priorityOffline: 4, …}
3: {id: 4, name: "TEST4", title: "TEST4", priorityError: 3, priorityOffline: 1, …}
length: 4
__proto__: Array(0)
__proto__: Object
So the console prints the same result twice. Hope you can help me.
Appreciate it!
Fr34k
Your error is that you are chaining wrong the pipes.
Check the following resource:
https://angular.io/guide/pipes#chaining-pipes
You should apply first: async and then dropdownData: filter.name
Your code should be like this:
component.html
<select class="test-table__input-filter table__input-filter" [formControl]="filter.control">
<option *ngFor="let entity of entities | async | dropdownData: filter.name">{{entity.name}}</option>
</select>
another component
<select class="test-form__field form__field form__field--error" [name]="field.name" [formControlName]="field.name">
<option *ngFor="let item of field.data | async | dropdownData : field.name">{{item.name}}</option>
</select>
Check if works with that change.
I'm working with the unTappd API to create a tap list for a website. I've used axios to pull in the data and store it in state. So far I've been able to connect to the api and display data with that conditional. The conditional was returning true and I was able to display the brewery.name but once I added the .map it was showing undefined. I've checked and brewery.items is truthy so I'm not sure whats up. Here's the output from the console.log
Object
created_at : "2016-12-24T03:46:21.229877Z"
description : ""
id :39418
items : (13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
menu_id : 10416
name : "Beer List"
position : 0
public : true
type : "Section"
updated_at : "2018-09-03T21:55:14.232759Z"
__proto__ : Object
Output of the items objects:
Array(13)
0
:
{id: 6101131, section_id: 39418, position: 0, untappd_id: 2638818, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
1
:
{id: 4449771, section_id: 39418, position: 1, untappd_id: 2465457, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
2
:
{id: 6908154, section_id: 39418, position: 2, untappd_id: 801790, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-801790_dd500_sm.jpeg", …}
3
:
{id: 5356739, section_id: 39418, position: 3, untappd_id: 1238244, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-1238244_5ba42_sm.jpeg", …}
4
:
{id: 8086786, section_id: 39418, position: 4, untappd_id: 2719716, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
5
:
{id: 7623610, section_id: 39418, position: 5, untappd_id: 2791052, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-2791052_0985c_sm.jpeg", …}
6
:
{id: 5882390, section_id: 39418, position: 6, untappd_id: 1238253, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-1238253_bf376_sm.jpeg", …}
7
:
{id: 7723598, section_id: 39418, position: 7, untappd_id: 2800225, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
8
:
{id: 7975683, section_id: 39418, position: 8, untappd_id: 2707563, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
9
:
{id: 7548213, section_id: 39418, position: 9, untappd_id: 2767218, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
10
:
{id: 7975604, section_id: 39418, position: 10, untappd_id: 2820742, label_image: "https://untappd.akamaized.net/site/brewery_logos/brewery-219856_0fbfb.jpeg", …}
11
:
{id: 7777162, section_id: 39418, position: 11, untappd_id: 2587293, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-2587293_49972_sm.jpeg", …}
12
:
{id: 7777158, section_id: 39418, position: 12, untappd_id: 2681664, label_image: "https://untappd.akamaized.net/site/beer_logos/beer-2681664_e47db_sm.jpeg", …}
length
:
13
Here's the component that I'm working with: I've only set up that conditional for testing purposes. If I were to remove the beers map the page runs fine and displays the menu name.
I'm confused what I'm doing wrong here to map this function. I had trouble with this before which is why I map through section in the response. Any ideas would be helpful!
import { Component } from "react";
import axios from 'axios';
class Untappd extends Component {
constructor(){
super();
this.state = {
brewery: []
}
}
componentWillMount() {
axios({
method:'get',
url:'https://business.untappd.com/api/v1/menus/10416?full=true',
headers: {
"authorization": "Basic UN_API_KEY_HERE"
}
})
.then(res => {
let section = res.data.menu.sections.map((section, index) => {
return section
});
this.setState({ brewery: section["0"] });
console.log(this.state.brewery);
});
}
render() {
const { brewery } = this.state
const beers = brewery.items.map((beer, index) => {
<li key={index}>{beer.id}</li>
})
return(
<div>
<h1>{brewery && <h1 style={{zIndex: "9999",position: "absolute", color: "red"}}>{brewery.name}</h1>}</h1>
<ul>{beers}</ul>
</div>
)
}
}
export default Untappd;
You aren't returning anything in your brewery.items.map call
const beers = brewery.items.map((beer, index) => {
// this will not return
<li key={index}>{beer.id}</li>
});
You should do this to return your <li />. (Or you can use an explicit return statement in your anonymous function)
const beers = brewery.items.map((beer, index) => (
<li key={index}>{beer.id}</li>
));
within the map we may have to return the li.
const beers = brewery.items.map((beer, index) => (
return <li key={index}>{beer.id}</li>
));
Here's my updated code that is working after thinking about it a little harder. Now I have the tap list I need. Only problem is that it doesn't load until a second after the page is fully rendered. Anyone have any ideas of what could cause this?
import { Component } from "react";
import axios from 'axios';
class Untappd extends Component {
constructor(){
super();
this.state = {
brewery: []
}
}
componentDidMount() {
axios({
method:'get',
url:'https://business.untappd.com/api/v1/menus/10416?full=true',
headers: {
"authorization": "Basic AUTH_TOKEN_HERE"
}
})
.then(res => {
let items = res.data.menu.sections["0"].items.map((items)=>{
return items
})
this.setState({ brewery: items });
});
}
render() {
const { brewery } = this.state
const beers = brewery.map((beer, index) => {
return(
<li key={index}>{beer.name}</li>
);
});
console.log(brewery)
return(
<div>
<h1>Beer List</h1>
<ul>{beers}</ul>
</div>
)
}
}
export default Untappd;