table in react, I am populating it fine, but I wanted to add dropdown on edit, and I wanted dropdown to be populated from API call. I am getting results just fine, but my dropdown is just empty...
Here is my call to API's
useEffect(() => {
const getPosts = () => {
const myToken = Cookies.get('access_token');
if (myToken === undefined) {
history.push('/auth/login-page');
} else {
try {
var sortBy = require('array-sort-by');
var myPostsUnsorted = [];
const months = [
'JAN',
'FEB',
'MAR',
'APR',
'MAY',
'JUN',
'JUL',
'AUG',
'SEP',
'OCT',
'NOV',
'DEC',
];
// set the url
const myUrl = `${APIurl}products.json?orderBy="approved"&equalTo=0`;
//alert(myUrl);
axios.get(myUrl).then((res) => {
console.log(res.data);
const myData = res.data;
for (var key1 in myData) {
var current_datetime = new Date(myData[key1].modifyDate);
var formatted_date =
current_datetime.getDate() +
'-' +
months[current_datetime.getMonth()] +
'-' +
current_datetime.getFullYear();
var filteredPosts = new Object();
filteredPosts.category = myData[key1].category;
filteredPosts.businessName = myData[key1].businessName;
filteredPosts.title = myData[key1].title;
filteredPosts.listingPersonId = myData[key1].listingPersonId;
filteredPosts.listingPerson = myData[key1].listingPerson;
filteredPosts.createDate = formatted_date;
filteredPosts.listingPersonTitle =
myData[key1].listingPersonTitle;
filteredPosts.approved = myData[key1].approved;
filteredPosts.att = myData[key1].att;
filteredPosts.postId = key1;
filteredPosts.att = myData[key1].att;
filteredPosts.city = myData[key1].city;
filteredPosts.address = myData[key1].address;
filteredPosts.email = myData[key1].email;
filteredPosts.phone = myData[key1].phone;
filteredPosts.webSite = myData[key1].webSite;
filteredPosts.region = myData[key1].region;
filteredPosts.price = myData[key1].price;
filteredPosts.body = myData[key1].body;
filteredPosts.stars = myData[key1].stars;
function createMarkup() {
return {
__html: myData[key1].body,
};
}
filteredPosts.bodyFormatted = (
<div dangerouslySetInnerHTML={createMarkup()} />
);
filteredPosts.image = myData[key1].image;
filteredPosts.image2 = myData[key1].image2;
filteredPosts.image3 = myData[key1].image3;
filteredPosts.image4 = myData[key1].image4;
myPostsUnsorted.push(filteredPosts);
}
const myPostsSorted = sortBy(
myPostsUnsorted,
(s) => -new Date(s.createDate)
);
setmyPostData(myPostsSorted);
//console.log('Tracing....POSTS:' + JSON.stringify(myPostsSorted));
getUsers();
});
} catch (err) {
console.log(err);
}
}
};
const getUsers = () => {
const myToken = Cookies.get('access_token');
if (myToken === undefined) {
history.push('/auth/login-page');
} else {
try {
var sortBy = require('array-sort-by');
var myPostsUnsorted = [];
// set the url
const myUrl = `${APIurl}users.json?orderBy="active"&equalTo=1`;
//alert(myUrl);
axios.get(myUrl).then((res) => {
console.log(res.data);
const myData = res.data;
for (var key1 in myData) {
var filteredPosts = new Object();
filteredPosts[myData[key1].userUid] =
myData[key1].firstName + ' ' + myData[key1].lastName;
myPostsUnsorted.push(filteredPosts);
}
const myPostsSorted = sortBy(myPostsUnsorted);
setmyUserData(myPostsSorted);
//console.log('Tracing....USERS:' + JSON.stringify(myPostsSorted));
});
} catch (err) {
console.log(err);
}
}
};
getPosts();
}, []);
First function is to get post's, this is working just fine, this is how I populate my material-table. Second function is also returning results, this is where I am getting users. Posts belong to user, so I wanted to create drop down of users if I want to change ownership on edit...
Here is how I am creating columns:
const [columns, setColums] = useState([
{ title: 'Category', field: 'category', editable: 'never' },
{ title: 'Business', field: 'businessName', editable: 'never' },
{ title: 'Title', field: 'title', editable: 'never' },
//{ title: 'Posted by', field: 'listingPersonId', editable: 'never' },
{
title: 'Posted by',
field: 'listingPersonId',
/*
lookup: {
DaChZYtatmVUXskSSzg9GTMsh4J3: 'Peter Andri',
A1AtLoKhnwctu7Wwxtv85sLwDGj2: 'Christine Wood',
E1NE6Ed8xIVxGMiYFXmaS9XtSvX2: 'Will Smith',
},
*/
lookup: { myUserData },
},
{ title: 'Created', field: 'createDate', editable: 'never' },
{
title: 'Size',
field: 'att',
lookup: { '': 'Regular', horizontal: 'Horizontal', full: 'Large' },
},
{
title: 'Stars',
field: 'stars',
lookup: { '': '0', 5: '5', 4: '4', 3: '3', 2: '2', 1: '1' },
},
{ title: 'Approved', field: 'approved', type: 'boolean' },
]);
So in short: when I hardcode values I get in console log:
{
title: 'Posted by',
field: 'listingPersonId',
lookup: {
DaChZYtatmVUXskSSzg9GTMsh4J3: 'Peter Andri',
A1AtLoKhnwctu7Wwxtv85sLwDGj2: 'Christine Wood',
E1NE6Ed8xIVxGMiYFXmaS9XtSvX2: 'Will Smith',
},
it is obviously fine, but when I pass my array of objects inside lookup... nothing happens:
{
title: 'Posted by',
field: 'listingPersonId',
lookup: { myUserData },
},
Also if this can help... here is my trace of data...:
[{"DaChZYtatmVUXskSSzg9GTMsh4J3":"Peter Andri"},{"A1AtLoKhnwctu7Wwxtv85sLwDGj2":"Christine Wood"},{"E1NE6Ed8xIVxGMiYFXmaS9XtSvX2":"Will Smith"}]
Did anybody tried to do this maybe... Thanks!!
