Trying to use mui-datatables. Have managed to use it using sample data.
Instead of my sample data values, i want to change it so that i use my response from API which is this.props.meeting.
API response >> this.props.meetings
"2021-07-06T00:00:00Z" : [ {
"type" : "meeting",
"name" : "Test JP morgan asia meeting",
"agenda" : "<p>Test</p>",
"location" : "Test",
"startOn" : "2021-07-06T07:14:52.563Z",
"endOn" : "2021-07-06T08:14:52.563Z",
} ],
"2021-07-01T00:00:00Z" : [ {
"type" : "meeting",
"name" : "Future meeting",
"agenda" : "<p>This is a test meeting session</p>",
"location" : "Asia",
"startOn" : "2021-07-01T06:13:00.000Z",
"endOn" : "2021-07-01T06:54:00.000Z",
} ]
Full Component
class Meeting extends React.Component {
constructor(props) {
super(props);
...
}
render() {
const {
meetings,
} = this.props;
console.log(this.props.meetings);
const columns = ['Date', 'Time', 'Title', 'Location', 'Published'];
const data = [
['4 Jul 2021', '12:00PM - 1:00PM', 'Lunch catch up with CEO of MS', 'Test', 'No'],
['4 Jul 2021', '2:00PM - 3:00PM', 'Meeting with ICBC Chairman', 'Test', 'No'],
['5 Jul 2021', '4:00PM - 5:00PM', 'Discussion with JP Morgan Head of APAC', 'Test', 'No'],
];
const options = {
...
};
return (
<MUIDataTable
title="Meetings"
data={data}
columns={columns}
options={options}
/>
);
}
}
....
I'm not sure if this is what you are looking for.
Have a look at my code.
First of all you need to create a new array which has the same length as all the meetings (with equivalent date keys).
Then you need to flatten the arrays in order to get only the values and then merge them with the date key.
let meetings = {
"2021-07-06T00:00:00Z" : [ {
"type" : "meeting",
"name" : "Test JP morgan asia meeting",
"agenda" : "<p>Test</p>",
"location" : "Test",
"startOn" : "2021-07-06T07:14:52.563Z",
"endOn" : "2021-07-06T08:14:52.563Z",
} ],
"2021-07-01T00:00:00Z" : [ {
"type" : "meeting",
"name" : "Future meeting",
"agenda" : "<p>This is a test meeting session</p>",
"location" : "Asia",
"startOn" : "2021-07-01T06:13:00.000Z",
"endOn" : "2021-07-01T06:54:00.000Z",
} , {
"type" : "meeting2",
"name" : "Future meeting2",
"agenda" : "<p>This is a test meeting session</p>",
"location" : "Asia",
"startOn" : "2021-07-01T06:13:00.000Z",
"endOn" : "2021-07-01T06:54:00.000Z",
} ]
}
let arr1 = []
Object.entries(meetings).forEach(ar => ar[1].forEach(ar1 => arr1.push([ ar[0], ar1 ])))
console.log('FINAL ARRAY', arr1.map(obj => [obj[0], Object.values(obj[1])].flat()))
console.log('WITH SLICE', arr1.map(obj => [obj[0], Object.values(obj[1])].flat()).map(arr => arr.slice(0, arr.length - 1)))
First, check you're this.props.meetings object it's containing the same definition which you're providing, if yes then it will render automatic and handle by the mui datatabel it self.
Related
I am using mongoDB as backend server, I have nested array(one level array) like this
{
"_id" : ObjectId("60b1fc6d3c43f74e0c1dba92"),
"seriesId" : "60acebf73acb5b3a98d14331",
"name" : "Season 1",
"logoURL" : "uploads/season/1622277216401.png",
"yearOfPublish" : "2021-05-29",
"description" : "Season 1",
"createdBy" : ObjectId("609cbf49ba46cc3924859ab5"),
"createdOn" : "2021-05-29T08:33:49.480Z",
"episode" : [
{
"seasonId" : "60b1fc6d3c43f74e0c1dba92",
"name" : "Episode 1",
"id" : 0,
"logoURL" : "uploads/episode/1622278616899.png",
"dateOfTelecast" : null,
"description" : "sadfgh",
"duration" : "30",
"videoType" : "customURL",
"embedCode" : "",
"url" : "https://youtu.be/kbpsXMUr7ss",
"liveboxChannel" : "",
"createdOn" : "2021-05-29T08:56:59.230Z",
"createdBy" : ObjectId("609cbf49ba46cc3924859ab5"),
"_id" : "ZaVrpOLO5"
},
{
"seasonId" : "60b1fc6d3c43f74e0c1dba92",
"name" : "Episode 2",
"id" : 0,
"logoURL" : "uploads/episode/1622279206607.png",
"dateOfTelecast" : null,
"description" : "adfd",
"duration" : "30",
"videoType" : "customURL",
"embedCode" : "",
"url" : "https://youtu.be/kbpsXMUr7ss",
"liveboxChannel" : "",
"createdOn" : "2021-05-29T09:06:48.637Z",
"createdBy" : ObjectId("609cbf49ba46cc3924859ab5"),
"_id" : "9GKqXhxcH"
},}
I have more no of seasons. from the season collection,i have episode array under the name of Episode.
Now My frontend page required that episode array alone.
response = {episode: all the episode data} and this episode data is based on skip and limit value
I have tried something in mongodb,
db.getCollection('season_copy').aggregate([
{$project: {
episodes: {
$cond:{ if: { $isArray: "$episode" }, then: { input:"$episode" }, else: 0 }
},
},
},
])
Can anyone suggest me some idea?
Check this out:
Without aggregate:
db.getCollection('season_copy')
.find({ _id: ObjectID(id)})
.project({ episode: 1 }).toArray();
With aggregate:
MongoDB playground
db.getCollection('season_copy')
.aggregate([
{
$match: {
_id: ObjectId("60b1fc6d3c43f74e0c1dba92")
}
},
{
$project: {
episode: 1
}
}
])
I am having trouble to access title inside an ID object.
I want to access item.title. But i am not able to give a name to the object ID.
I tried doing order.cart.items.item.title
"_id" : ObjectId("5d60d1752cda6403e4f868af"),
"created_at" : ISODate("2019-08-24T05:55:34.741Z"),
"user" : ObjectId("5d60d00e4c865312ccf3f18a"),
"cart" : {
"items" : {
"5d60cddb69f460191c680e96" : {
"item" : {
"_id" : "5d60cddb69f460191c680e96",
"imagePath" : "https://dks.scene7.com/is/image/GolfGalaxy/18NIKWRMX270XXXXXLFS_Black_Cream?wid=1080&fmt=jpg",
"title" : "Nike ",
"description" : "Nike Airmax",
"price" : 10,
"category" : "shoes",
"__v" : 0
},
"qty" : 1,
"price" : 10
}
},
"totalQty" : 1,
"totalPrice" : 10
},
You need to use Object.values for that, because of the ID. This allows you to get the object with the key of 5d60cddb69f460191c680e96 without the key:
Object.values(order.cart.items)[0].item.title
const data = {
"cart" : {
"items" : {
"5d60cddb69f460191c680e96" : {
"item" : {
"_id" : "5d60cddb69f460191c680e96",
"imagePath" : "https://dks.scene7.com/is/image/GolfGalaxy/18NIKWRMX270XXXXXLFS_Black_Cream?wid=1080&fmt=jpg",
"title" : "Nike ",
"description" : "Nike Airmax",
"price" : 10,
"category" : "shoes",
"__v" : 0
},
"qty" : 1,
"price" : 10
}
},
"totalQty" : 1,
"totalPrice" : 10
}};
for (let id in data.cart.items)
console.log(data.cart.items[id].item.title);
You can simply achieve this by getting key name of an object using Object.keys() methods, This methods returns an array of key names
const obj = { id: 1 };
const keysArray = Object.keys(obj);
console.log(keysArray);. // ["id"]
In your case only one keys are present in the object, So we can directly get that name with index 0 (Object.keys(obj)[0])
Check below snippet
const cart ={
"items": {
"5d60cddb69f460191c680e96": {
"item": {
"_id":
"5d60cddb69f460191c680e96",
"imagePath": '',
"title": "Nike ",
"description": "Nike",
"price": 10,
"category": "shoes",
"__v": 0
},
"qty": 1,
"price": 10
}
}
};
const id =
Object.keys(cart.items)[0];
console.log(
cart.items[id].item.title
);
I have this two schema, fruits schema and user schema. I split them in 2 different collection, but a fruit schema can have a reference to a user.
const FruitSchema = new Schema({
title: {
type: String
},
buyer: {
_id: {
type: Schema.Types.ObjectId,
default: null
}
}
})
const UserSchema = new Schema({
name: {
type: String
},
age: {
type: Number
},
gender: {
type: String
}
})
How would you query all fruits with the user info? What I can think of is find all fruits, get the buyer._id then find each user, map them back the fruit array, sounds so tedious and complicated. If it's mysql I just JOIN.
You need to use $lookup to join buyer id with user id, for all matching collections, it will return the user info as an embedded document
db.fruitz.aggregate(
[
{
$lookup : {
from : "userz",
localField : "buyer_id",
foreignField: "_id",
as : "buyerInfo"
}
}
]
)
fruits collection
> db.fruitz.find().pretty()
{ "_id" : 2, "title" : "apple", "buyer_id" : 1 }
{ "_id" : 1, "title" : "banana", "buyer_id" : 2 }
users collection
> db.userz.find().pretty()
{ "_id" : 1, "name" : "abc", "age" : 20, "gender" : "M" }
>
$lookup aggregate
> db.fruitz.aggregate( [ { $lookup : { from : "userz", localField : "buyer_id", foreignField: "_id", as : "buyerInfo" } } ] ).pretty()
output
{
"_id" : 2,
"title" : "apple",
"buyer_id" : 1,
"buyerInfo" : [
{
"_id" : 1,
"name" : "abc",
"age" : 20,
"gender" : "M"
}
]
}
{ "_id" : 1, "title" : "banana", "buyer_id" : 2, "buyerInfo" : [ ] }
>
MongoDB Provides $lookup to join records from two collections:
In your case you can join fruits and user using $lookup:
db.fruits.aggregate([
{
$lookup:
{
from: "fruits",
localField: "buyer",
foreignField: "_id",
as: "buyer_info"
}
}
])
$lookup hat got more powerful in 3.6(if you're using 3.6) which allows adding expressions and on the things you're joining from right collection
I have a simple document, which has 3 location objects in an array.
Data:
{
"_id" : ObjectId("57c3c479a306b3613cf1ee5b"),
"location_history" : [
{
"location_name" : "Area 1",
"date" : 1472447609,
"_id" : ObjectId("57c3c479ac5a69612f0e0899"),
"location" : [
24.9532107, 67.1790576
]
},
{
"location_name" : "Area 2",
"date" : 1472448059,
"_id" : ObjectId("57c3c63bac5a69612f0e089c"),
"location" : [
24.9663937, 67.1462044
]
},
{
"location_name" : "Area 3",
"date" : 1472448987,
"_id" : ObjectId("57c3c9dbac5a69612f0e08a0"),
"location" : [
-24.987325, 115.1862298
]
}
}
Question: I need to fetch closest locations in this array.
Query I have tried:
db.getCollection('consumers_locations').aggregate([
{"$unwind": "$location_history"},
{"$match":{"_id":ObjectId("57c3c479a306b3613cf1ee5b")}},
{"$project" : { "abc" : "$location_history.location"} },
{ $geoNear: {
near: { type: "Point", coordinates: [ 24.942785, 67.157855 ] },
distanceField: "distance",
query : {"_id" : "_id"},
uniqueDocs: true,
includeLocs: "search_history.location",
maxDistance : 10000
}
}
])
But I get an error:
"ok" : 0,
"errmsg" : "$geoNear is only valid as the first stage in a pipeline.",
"code" : 2,
"codeName" : "BadValue"
Expected Output:
{
"_id" : ObjectId("57c3c479a306b3613cf1ee5b"),
"location_history" : [
{
"location_name" : "Area 1",
"date" : 1472447609,
"_id" : ObjectId("57c3c479ac5a69612f0e0899"),
"location" : [
24.9532107, 67.1790576
]
},
{
"location_name" : "Area 2",
"date" : 1472448059,
"_id" : ObjectId("57c3c63bac5a69612f0e089c"),
"location" : [
24.9663937, 67.1462044
]
}
}
It is not doable with your schema. Indexes are used to order documents in a collection, not sorting subdocuments within a document.
Consider to create a separate location_history collection with references to the parent document in consumers_locations. E.g. for your object, the collection may look like:
db.getCollection('location_history').insert([
{
"consumer_location": ObjectId("57c3c479a306b3613cf1ee5b"),
"location_name" : "Area 1",
"date" : 1472447609,
"_id" : ObjectId("57c3c479ac5a69612f0e0899"),
"location" : [
24.9532107, 67.1790576
]
},
{
"consumer_location": ObjectId("57c3c479a306b3613cf1ee5b"),
"location_name" : "Area 2",
"date" : 1472448059,
"_id" : ObjectId("57c3c63bac5a69612f0e089c"),
"location" : [
24.9663937, 67.1462044
]
},
{
"consumer_location": ObjectId("57c3c479a306b3613cf1ee5b"),
"location_name" : "Area 3",
"date" : 1472448987,
"_id" : ObjectId("57c3c9dbac5a69612f0e08a0"),
"location" : [
-24.987325, 115.1862298
]
}
]);
Regarding to the error, the docs read:
You can only use $geoNear as the first stage of a pipeline.
since only the first stage can benefit from indexes.
I have this data in Mongo:
{'_id':1,
'name':'Root',
'taskId':1,
'parentId':"",
'path':[1],
'tasks':[ {"taskId":3,parentId:1,name:'A',type:'task'},
{"taskId":4,parentId:1,name:'D',type:'task'},
{"taskId":5,parentId:4,name:'B',type:'task'},
{'type':'project' , 'proRef':2},
{"taskId":6,parentId:3,name:'E',type:'task'},
{"taskId":7,parentId:6,name:'C',type:'task'}]
}
Now I want to update taskId 6 with new Json data .
var jsonData = {"taskId":6,"name":'Sumeet','newField1':'Val1','newField2':'Val2'}
query should update if field is available else add new key to existing .Output Like
{"taskId":6,parentId:3,name:'Sumeet',type:'task','newField1':'Val1','newField2':'Val2'}]
I have tried few query but it is completely replacing json .
db.projectPlan.update({_id:1,'tasks.taskId':6},{$set :{'tasks.$':jsonData }});
Thanks in advance for your helps!
Sumeet
You need to transform the jsonData variable into something that can be passed to update. Here's an example that does exactly what you want with your sample document:
var updateData = {};
for (f in jsonData) {
if (f != "taskId") updateData["tasks.$."+f]=jsonData[f];
};
db.projectPlan.update({_id:1, 'tasks.taskId':6}, {$set:updateData})
Result:
{ "_id" : 1,
"name" : "Root",
"taskId" : 1,
"parentId" : "",
"path" : [ 1 ],
"tasks" : [
{ "taskId" : 3, "parentId" : 1, "name" : "A", "type" : "task" },
{ "taskId" : 4, "parentId" : 1, "name" : "D", "type" : "task" },
{ "taskId" : 5, "parentId" : 4, "name" : "B", "type" : "task" },
{ "type" : "project", "proRef" : 2 },
{ "taskId" : 6, "parentId" : 3, "name" : "Sumeet", "type" : "task", "newField1" : "Val1", "newField2" : "Val2" },
{ "taskId" : 7, "parentId" : 6, "name" : "C", "type" : "task" }
] }
You will need to merge the document manually:
var jsonData = {"taskId":5,"name":'Sumeet','newField1':'Val1','newField2':'Val2'};
db.projectPlan.find({ _id: 1 }).forEach(
function(entry) {
for (var taskKey in entry.tasks) {
if (entry.tasks[taskKey].taskId === jsonData.taskId) {
printjson(entry.tasks[taskKey]);
for (var taskSubKey in jsonData) {
entry.tasks[taskKey][taskSubKey] = jsonData[taskSubKey];
}
printjson(entry.tasks[taskKey]);
}
}
db.projectPlan.save(entry);
}
);
Obviously you can leave away the printjson statements. This is simply to see that the merging of the original tasks with the new tasks works. Note that this query will only update a single document as long as the _id field is unique.