{ _id: 1, first : "Maria",
travel : [
{ country: "Canada", visits: 3, rating: 7 },
{ country: "Poland", visits: 1, rating: 8 },
{ country: "Thailand", visits: 2, rating: 9 } ] },
{ _id: 2, first : "Chen",
travel : [
{ country: "Thailand", visits: 3, rating: 7 },
{ country: "Canada", visits: 2, rating: 9 },
{ country: "Costa Rica", visits: 4, rating: 8 } ] },
{ _id: 3, first : "Gladys",
travel : [
{ country: "Canada", visits: 1, rating: 8 },
{ country: "Thailand", visits: 2, rating: 9 },
{ country: "Australia", visits: 3, rating: 10 } ]}
])
I need to update the visits Maria made to Canada to 5, so I have to use some sort of "double filter" (?) But I'm not sure how to do that
Okay, I got how to make that "double filter" : Array filters and $[identifier]
Here
db.viajeros.updateOne( { first: "Maria"},
{ $set: {"travel.$[elem].visits": 5}},
{ arrayFilters: [{"elem.country": "Canada"}]} )
as the question suggests I am brand new to react and am trying to create a table to display some data.
Here's what I have so far
const { Component } = React;
const { render } = ReactDOM;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
cars: [
{
"manufacturer": "Toyota",
"model": "Rav4",
"year": 2008,
"stock": 3,
"price": 8500
},
{
"manufacturer": "Toyota",
"model": "Camry",
"year": 2009,
"stock": 2,
"price": 6500
},
{
"manufacturer": "Toyota",
"model": "Tacoma",
"year": 2016,
"stock": 1,
"price": 22000
},
{
"manufacturer": "BMW",
"model": "i3",
"year": 2012,
"stock": 5,
"price": 12000
},
{
"manufacturer": "Chevy",
"model": "Malibu",
"year": 2015,
"stock": 2,
"price": 10000
},
{
"manufacturer": "Honda",
"model": "Accord",
"year": 2013,
"stock": 1,
"price": 9000
},
{
"manufacturer": "Hyundai",
"model": "Elantra",
"year": 2013,
"stock": 2,
"price": 7000
},
{
"manufacturer": "Chevy",
"model": "Cruze",
"year": 2012,
"stock": 2,
"price": 5500
},
{
"manufacturer": "Dodge",
"model": "Charger",
"year": 2013,
"stock": 2,
"price": 16000
},
{
"manufacturer": "Ford",
"model": "Mustang",
"year": 2009,
"stock": 1,
"price": 8000
},]
};
}
render() {
const columns = [{
Header: 'Manufacturer',
accessor: 'manufacturer'
},{
Header: 'Model',
accessor: 'model'
},{
Header: 'Year',
accessor: 'year'
},{
Header: 'Stock',
accessor: 'stock'
},{
Header: 'Price',
accessor: 'price'
},{
Header: 'Option',
accessor: 'option'
}]
return (
<div>
<Table
data = {this.state.cars}
colums = {columns}
/>
</div>
);
};
}
ReactDOM.render(<App />, document.getElementById("app"))
Im getting errors that the table is not defined but when I try to define it, that throws me errors as well. The table doesn't need to be fancy, the simpler the better in fact.
I was thinking of doing something like what was done in this post: https://codereview.stackexchange.com/questions/212250/generating-a-table-based-on-an-array-of-objects.
Any suggestions?
UPDATE
After the very helpful comment from Crispen Gari, I made some tweaks and came up with this
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
cars: [
{
manufacturer: "Toyota",
model: "Rav4",
year: 2008,
stock: 3,
price: 8500,
},
{
manufacturer: "Toyota",
model: "Camry",
year: 2009,
stock: 2,
price: 6500,
},
{
manufacturer: "Toyota",
model: "Tacoma",
year: 2016,
stock: 1,
price: 22000,
},
{
manufacturer: "BMW",
model: "i3",
year: 2012,
stock: 5,
price: 12000,
},
{
manufacturer: "Chevy",
model: "Malibu",
year: 2015,
stock: 2,
price: 10000,
},
{
manufacturer: "Honda",
model: "Accord",
year: 2013,
stock: 1,
price: 9000,
},
{
manufacturer: "Hyundai",
model: "Elantra",
year: 2013,
stock: 2,
price: 7000,
},
{
manufacturer: "Chevy",
model: "Cruze",
year: 2012,
stock: 2,
price: 5500,
},
{
manufacturer: "Dodge",
model: "Charger",
year: 2013,
stock: 2,
price: 16000,
},
{
manufacturer: "Ford",
model: "Mustang",
year: 2009,
stock: 1,
price: 8000,
},
],
};
}
render() {
return (
<div>
<Table data={this.state.cars} />
</div>
);
}
}
class Table extends React.Component {
constructor(props) {
super(props);
}
render() {
const tableHeads = Object.keys(this.props.data[0]);
return (
<table border="1">
<thead>
{tableHeads.map((tableHead, i) => (
<th key={i}>{tableHead}</th>
))}
</thead>
<tbody>
{this.props.data.map((value, key) => (
<tr key={key}>
<td>{value.manufacturer}</td>
<td>{value.model}</td>
<td>{value.year}</td>
<td>{value.stock}</td>
<td>{value.price}</td>
</tr>
))}
</tbody>
</table>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"))
This post can be considered closed
Hey, Try this code if you face any problems of understanding, let me know. I recommend you to copy and paste this code if it works go through it and try to understand. The most important thing is to understand JavaScript higher order function map
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
cars: [
{
manufacturer: "Toyota",
model: "Rav4",
year: 2008,
stock: 3,
price: 8500,
},
{
manufacturer: "Toyota",
model: "Camry",
year: 2009,
stock: 2,
price: 6500,
},
{
manufacturer: "Toyota",
model: "Tacoma",
year: 2016,
stock: 1,
price: 22000,
},
{
manufacturer: "BMW",
model: "i3",
year: 2012,
stock: 5,
price: 12000,
},
{
manufacturer: "Chevy",
model: "Malibu",
year: 2015,
stock: 2,
price: 10000,
},
{
manufacturer: "Honda",
model: "Accord",
year: 2013,
stock: 1,
price: 9000,
},
{
manufacturer: "Hyundai",
model: "Elantra",
year: 2013,
stock: 2,
price: 7000,
},
{
manufacturer: "Chevy",
model: "Cruze",
year: 2012,
stock: 2,
price: 5500,
},
{
manufacturer: "Dodge",
model: "Charger",
year: 2013,
stock: 2,
price: 16000,
},
{
manufacturer: "Ford",
model: "Mustang",
year: 2009,
stock: 1,
price: 8000,
},
],
};
}
render() {
return (
<div>
<Table data={this.state.cars} />
</div>
);
}
}
class Table extends React.Component {
constructor(props) {
super(props);
}
render() {
const tableHeads = Object.keys(this.props?.data[0]);
return (
<table border="1">
<thead>
{tableHeads.map((tableHead, i) => (
<th key={i}>{tableHead}</th>
))}
</thead>
<tbody>
{this.props?.data?.map((value, key) => (
<tr key={key}>
<td>{value?.manufacturer}</td>
<td>{value?.model}</td>
<td>{value?.year}</td>
<td>{value?.stock}</td>
<td>{value?.price}</td>
</tr>
))}
</tbody>
</table>
);
}
}
export default App;
I Hope this will help you, Good Luck
Alright, so I am trying to make an ArtistPage, and I need to put all the albums by that artist, on the page. I put a property called artistName in each album as a way of kinda referencing it but idk if that is the correct practice.
This is the results of a variable called getAlbums that i have in the code that returns an array of objects, which are all the albums in the 'database' -->
[
{name: "The Cool", genre: "Hip-Hop", artistName: "Lupe Fiasco", year: "2006", isExplicit: "true", …}
{name: "Food & Liquor", artistName: "Lupe Fiasco", genre: "Hip-Hop", year: "2006", isExplicit: "true", …}
{name: "Flume", artistName: "Flume", genre: "Electronic", year: "2012", isExplicit: "true", …}
{name: "Skin", artistName: "Flume", isExplicit: "true", genre: "Electronic", year: "2016", …}
{name: "Hybrid Theory", artistName: "Linkin Park", isExplicit: "true", genre: "Nu-Metal", year: "2000", …}
{name: "Views", artistName: "Drake", genre: "Hip-Hop", year: "2016", isExplicit: "true", …}
{name: "2014 Forest Hills Drive", artistName: "J.Cole", isExplicit: "true", genre: "Hip-Hop", year: "2014", …}
{name: "Marshal Matthers LP", artistName: "Eminem", isExplicit: "true", genre: "Hip-Hop", year: "2000", …}
]
I'm using a function to try and loop though all the properties but its wrong ahh.
It only returns one album
getAlbumsByArtist(artistName: any) {
for (var i = 0; i <= this.getAlbums.length - 1; i++) {
if (this.getAlbums[i].artistName === this.artistName) {
return this.getAlbums[i];
}
}
}
So if I wanted to retrieve ALL objects that has the property "artistName: Flume" in this array, how would I go about doing that?
You can use Array.prototype.filter():
getAlbumsByArtist (artistName: any) {
return this.getAlbums.filter(album => album.artistName === artistName);
}
You could even define a generic method to search by any property like this:
getAlbumsByProperty (property: string, value: any) {
return this.getAlbums.filter(album => album[property] === value);
}
and call that like database.getAlbumsByProperty('artistName', 'Flume')
You can use HigherOrder functions in this case.
var albums=array.filter(album=> {
if(album.artistName==='Flume') {
return album;
}
})
console.log("ans", albums);
Working Fiddle:
https://jsfiddle.net/241wkzph/
I want to create an expense tracking app but don't know how to make my schema structure.
The layout:
The schema:
module.exports = {
expenseList: [
{
uid: 'some-uid1',
createdAt: 'some-date1',
expenseItems: [
{
date: 'date11',
desc: 'desc11',
amount: 'amount11'
},
{
date: 'date11',
desc: 'desc11',
amount: 'amount11'
}]
},
{
uid: 'some-uid',
createdAt: 'some-date',
expenseItems: [
{
date: 'date1',
desc: 'desc1',
amount: 'amount1'
},
{
date: 'date1',
desc: 'desc1',
amount: 'amount1'
},
{
date: 'date1',
desc: 'desc1',
amount: 'amount1'
}]
}
]
};
How do I change my schema so I can loop through expenses and display createdAt property as a clickable link that redirects to that expense items?
When do I use Arrays and when do I use Objects in my schema?
Where do I need uid (unique ids)?
I will use firebase for this app
You have an expenseList with a date and expenseItems associated with it. You can have a schema roughly like this. expenseList will be an array of objects. Each expenseList is an object containing uid (to uniquely identify the list), createdAt and array of expenseItems with its own set of properties.
expenseList: [{
uid: 'some-uid',
createdAt: 'some-date',
expenseItems: [
{
date: 'date1',
desc: 'desc1',
amount: 'amount1'
},
{
date: 'date1',
desc: 'desc1',
amount: 'amount1'
}
]
}]
You can iterate over this expenseList to display createdAt in your first screen. On clicking of that, depending on the unique id of that expenseList, fetch the expenseList and display the expenseItems on the second screen.
I have not used firebase before, so you might have to tweak the schema a little.