Develop Reference

How to loop through and reference with an array in an array?

I have this array and it has an array with different number of elements.
var filtered = [Array(3), Array(1), Array(2), Array(7), Array(1), Array(1), Array(5)]
0: Array(3)
0: {fixture: {…}, league: {…}, teams: {…}, goals: {…}, score: {…}}
1: {fixture: {…}, league: {…}, teams: {…}, goals: {…}, score: {…}}
2: {fixture: {…}, league: {…}, teams: {…}, goals: {…}, score: {…}}
1: [{…}] //1 element
2: (2) [{…}, {…}] //2 elements
3: (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}] //7 elements
I want to access the data inside through looping so I try to use this:
for (i = 0; i < filtered.length-1; i++) {
for (x=0; x<filtered[i].length-1;x++){
let league = document.createElement("div")
league.className = 'league'
league.innerHTML = filtered[i].x.league.name //error occurs on .league.name
parent.appendChild(league)
}}
and I get this error message:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'league')
I likely am referencing it wrong but do not know how else to do this.

Type Error, cannot read property 'map' of undefined

I'm reading data in from an API and I'm trying to have the elements in the data array show up in a select tag in HTML using React, but it keeps telling me that the data is not an array even though it seems like it is when I do console.log.
render(){
console.log(this.state.countries.Countries)
return(
<div className = "tables-container">
<h1>Tables</h1>
<label>Please Select a Country to view data for: </label>
<select name = "countries" id = "countries">
<option selected = "selected">Select a Country</option>
{
this.state.countries.Countries.map((data)=>(
<option>{data.Country}</option>
))
}
</select>
</div>
)
}
When I run this, it says "TypeError: Cannot read property 'map' of undefined." The console.log result reads
(188) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
so I'm pretty sure this.state.countries.Countries should be an Array, so the map function should work, but it doesn't.
In my constructor I have
this.state = {
countries: [],
}
and I have the API fetch in
componentDidMount(){
fetch("https://api.covid19api.com/summary")
.then((data) => data.json())
.then((data) => {
this.setState({
countries: data
})
})
}
I've been stuck on this for an hour now I really need help figuring it out. Thanks!

this.state = {
countries: [],
}
this.state.countries starts off as an empty array. It has no .Countries property on it, so for your first render, this.state.countries.Countries is undefined, and you can't map undefined.
You need your state to have the same shape before and after you load data. So if you want the .countries.Countries nesting, change your initial state to this:
this.state = {
countries: {
Countries: []
}
}
If you just want one level of nesting, keep your initial values and change the following:
// In componentDidMount
this.setState({
countries: data.Countries
})
// In render
this.state.countries.map(

Why am I getting a null error when mapping over this array? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I'm trying to map over my API to get the nodes.
Here is the format my API is in:
[
{
"agent": "....",
"managementDomain": "...",
"node": "..."
},
{
"agent": "....",
"managementDomain": "...",
"node": "..."
},
...
]
The format I need to get it into for react-select:
const colourOptions = [
{ value: 'orange', label: 'Orange' },
{ value: 'yellow', label: 'Yellow' },
{ value: 'green', label: 'Green' },
];
How I am mapping over it (using Redux for state management):
const alarms = this.props.dataReducer.alarmDetails
const {test} = alarms.map(alarm => ({value:alarm.node, label: alarm.node}))
The error I am getting:
TypeError: Cannot read property 'node' of null
console.log(this.props.dataReducer.alarmDetails)
(288) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, null, {…}, {…}, {…}, {…}, null, {…}, {…}, null, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, null, null, null, {…}, {…}, {…}, {…}, {…}, null, {…}, {…}, {…}, {…}, {…}, {…}, …]
[0 … 99]
0:
agent: "..."
managementDomain: null
node: "..."
What's the best way to map over the API to get the node from each object within the array?

This error is actually self explanatory. Your map code is alright. Problem seem to exist that some of the objects in array is null or empty, so when javascript is trying to find node property on that object, its hitting the rock.
Actually this.props.dataReducer.alarmDetails this data contains null value, something like..
[
{
"agent": "....",
"managementDomain": "...",
"node": "..."
},
{
"agent": "....",
"managementDomain": "...",
"node": "..."
},
null
...
]
So, maybe you can filter the null values:
this.props.dataReducer.alarmDetails.filter(data=>data)
and put map code here
this.props.dataReducer.alarmDetails.filter(data=>data).map(d => ({value:d.node, label: d.node}))

You can return something like this:
import React from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
import "./styles.css";
const alarms = [
{ agent: 1, managementDomain: null, node: "node1" },
{ agent: 2, managementDomain: null, node: "node2" }
];
let teamsFromApi = alarms.map(team => { return {value: team.agent, label: team.node} });
function App() {
return (
<div className="App">
<Select options={teamsFromApi} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Note: Replace node data.
You can check the example Codebox

JavaScript: Assign an unique identifier to an array and iterate over objects in the array

I have 4 arrays full of objects:
Array(16) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
Array(27) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
Array(21) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
Array(16) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
Each object contains a bit of information, that I want to display to the viewer:
0: Object { exchange: "NYSE", quote: "JPY", price: "3923.76016", … }
​
1: Object { exchange: "DEF", quote: "GBP", price: "3924.60972", … }
​
2: Object { exchange: "FEG", quote: "EUR", price: "3917.31980", … }
​
3: {…}
​​
exchange: "NEX"
​​
price: "3914.70000"
​​
quote: "USD"
​​
timestamp: "2018-12-31T07:47:11.253Z"
​​
<prototype>: Object { … }
How can I
1) Assign a unique value to the array, ie. Array #1 is VTX, Array #2 is DEF, so that when I display it on the page, I don't need to change the ticker symbol (ie. VTX on exchange NEX is $100, and I only need to change the exchange name and currency/amount)
2) iterate over the arrays to where the iterator moves on to the next object in the array, let's say, every 2-3 seconds?
I'm doing this in React and have passed the data on to props, but now I'm stuck trying to figure this out.

1) You can store all your arrays in on object like this :
const myArrays = [
{
uniqueName: 'VTX',
infos: []
},{
uniqueName: 'DEF',
infos: []
}
]
2) You should store the index in the state, and make it change with setInterval in componentDidMount
componentDidMount() {
this.timerID = setInterval(
() => this.nextInfo(),
1000
);
}

Apply Filter on __ob__: Observer (Typescript)

I want to apply filter like
this.Grid.option("dataSource").filter(x => x.Placeholder != null)
but it is not working
when I do
console.log(this.Grid.option("dataSource"));
I get
(72) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, ob: Observer]
0:
{ob: Observer}
1:
Placeholder
:
(...)
PlaceholderDescr
:
(...)
RecordID
:
(...)
ob
:
Observer {value: {…}, dep: Dep, vmCount: 0}
get Placeholder
:
ƒ reactiveGetter()
set Placeholder
:
ƒ reactiveSetter(newVal)
get PlaceholderDescr
:
ƒ reactiveGetter()
set PlaceholderDescr
:
ƒ reactiveSetter(newVal)
get RecordID
:
ƒ reactiveGetter()
set RecordID
:
ƒ reactiveSetter(newVal)
proto
:
Object
2
:
{ob: Observer}

Get DataSource instance via ds = this.Grid.getDataSource() (documentation)
Then you can filter ds via ds.filter(expr) method. For more information, you can inspect this topic