I'm trying to dynamically map out the response that i get from the wordpress rest api. The problem I'm having is that the response im getting looks like this:
(2) [{…}, {…}]
0
:
{id: 18, date: "2018-05-02T14:31:37", date_gmt: "2018-05-02T14:31:37", guid: {…}, modified: "2018-05-02T14:51:14", …}
1
:
{id: 17, date: "2018-05-02T14:31:18", date_gmt: "2018-05-02T14:31:18", guid: {…}, modified: "2018-05-02T14:51:23", …}
length
:
2
__proto__
:
Array(0)
Both these objects have another object inside them called acf that includes my fields that i want to render out.
This is how i want to render the fields:
const dateData = [
{
date: '18-04-23',
time: '9pm',
title: 'MGM Grand Garden Arena',
},
{
date: '18-04-23',
time: '9pm',
title: 'MGM Grand Garden Arena',
},
{
date: '18-04-23',
time: '9pm',
title: 'MGM Grand Garden Arena',
},
]
const dateRender = dateData.map((t, i) => (
<div key={i} className="date-item">
<p>{t.date}</p>
<p>{t.time}</p>
<p>{t.title}</p>
</div>
));
But it's not working because the acf fields is nested inside two different objects. The purpose of this is that the user should be able to add new dates in wordpress dashboard and it should render it out dynamically. Any tips?
Thanks!
Related
Let's say I have the following posts in my database:
posts: {
-sdmi8dfnsj0sdk: {
text: "some text",
category: "General",
date: 123283493479 <-- Timestamp
},
-Udj48sjdkfa20l: {
text: "another text",
category: "Movies",
date: 139474004949
}
}
So my problem is, I want to fetch the posts wherein their category is equal to General but at the same time fetch them in chronological order (Newest to Oldest). Any ideas how to do this?
I'm aware that using orderByChild("category").equalTo("General") would work on filtering the data to be fetched but how about fetching them chronologically (Newest to Oldest) while at the same time being able to paginate the data for the next fetch?
Here is my map function, I am using react with gatsby.
when I run my graphiql browser, (an IDE graphql playground) I get group as an array, and edges is also an array.
the query is a static query and the mapping function is inside of a class based react component
{group.map(({ edges }) => {
console.log(group);
edges.map(index => {
return <p>Hello</p>
});
})}
However, the p tags are not displaying anything, but if I console.log("hello") it consoles hello 4 times, anyone got any ideas?
I am a little stumped.
the console.log returns
(3) [{…}, {…}, {…}]
0:
edges: Array(2)
0:
node: {tune: "awesome", title: "Awesome Song", playtime: "2:50", page: "249", filesize: "1.8", …}
__proto__: Object
1:
node: {tune: "awesome", title: "AwesomeSong 2", playtime: "4:05", page: "525", filesize: "2.6", …}
__proto__: Object
length: 2
__proto__: Array(0)
__proto__: Object
1:
edges: Array(1)
0:
node: {tune: "decent", title: "Awesome Song3", playtime: "4:06", page: "719", filesize: "2.4", …}
__proto__: Object
length: 1
__proto__: Array(0)
__proto__: Object
2: {edges: Array(1)}
length: 3
__proto__: Array(0)
Have you tried something like this?
{group.map(({ edges }) => {
return edges.map(({node})=> {
return <p>{node.title}</p>
});
})}
You need to return something in your first map() loop.
In addition, are you displaying the loop in a render() function? If not, you can't display a <p> tag.
I am trying to add a document into an array studyList in my users collection.
So i have a collection users where i have name, etc.. and studyList.
When i click on a button buy into a DocumentItemComponent i want to add that document into this studyList array.
My code works partially because it adds the document into the array but when i click on another document it changes the first one, it doesn't add another document.
This is my code for the adding function:
addToStudyList(user) {
const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${user.id}`);
const data: UserInterface = {
studyList: [{
title: this.document.title,
language: this.document.language,
description: this.document.description,
cover: this.document.cover,
category: this.document.category,
field: this.document.field,
id: this.document.id,
author: this.document.userUid,
urlDocument: this.document.urlDocument
}]
}
return userRef.set(data, {merge: true});
}
Can you help me, please?
Thank you! Have a good day!
There is no direct way to update an array inside a document, but if you are using Firestore, it provides arrayUnion and arrayRemove functions which you can use for adding/removing unique items in the array.
From firestore documentation https://firebase.google.com/docs/firestore/manage-data/add-data#update_elements_in_an_array :
Try this:
userRef.update({
studyList: firebase.firestore.FieldValue.arrayUnion(data)
});
This is because when you declare:
studyList: [{
title: this.document.title,
language: this.document.language,
description: this.document.description,
cover: this.document.cover,
category: this.document.category,
field: this.document.field,
id: this.document.id,
author: this.document.userUid,
urlDocument: this.document.urlDocument
}]
in this piece of code you are assigning just one object to the the studyList array which overwrites the existing array, instead you should utilize the existing user studyList array and push your new object into it, something like this:
addToStudyList(user) {
const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${user.id}`);
user.studyList.push({
title: this.document.title,
language: this.document.language,
description: this.document.description,
cover: this.document.cover,
category: this.document.category,
field: this.document.field,
id: this.document.id,
author: this.document.userUid,
urlDocument: this.document.urlDocument
});
const data: UserInterface = {
studyList: user.studyList
}
return userRef.update(data);
}
I have React application where I store data in firebase and use these data as state in my application.
I have two collections:
- one for storing Card data
-second for storing place and order in which the Cards will render (only Card's ID in array)
second collection:
and both are used as state with mapStateToProps.
However when I dispatch action to add new Card and update both collections at the same time (with batched writes) I don't get ID of document i just updated, only data.
This is function i dispatch to update both collections.
export const createTodo = (cardOrder,taskName) => {
return (dispatch, getState, { getFirebase, getFirestore }) => {
const firestore = getFirestore();
var cardsColRef = firestore.collection("todos")
var orderDocRef = firestore.collection("cardOrder").doc(taskName)
var newCardRef = firestore.collection('todos').doc()
var batch = firestore.batch()
batch.set(newCardRef,{title : "",assignment:"",content: ""})
batch.update(orderDocRef,{order:[...cardOrder,newCardRef.id]})
batch.commit()}
Data before batched write.
cardOrder: Array(3)
0: {id: "2", order: Array(5)}
1: {id: "3", order: Array(2)}
2: {id: "order", order: Array(3)}
Data after batched write.
cardOrder: Array(3)
0: {order: Array(6)}
1: {id: "3", order: Array(2)}
2: {id: "order", order: Array(3)}
And application doesn't re-render itself, even though first collection has changed too.
After manual page refresh everything appears and works fine.
cardOrder: Array(3)
0: {id: "2", order: Array(6)}
1: {id: "3", order: Array(2)}
2: {id: "order", order: Array(3)}
Can anyone help with this ? I couldn't find anything similar to my question and I really need to know if there is solution to this
I am trying to render a nested object from a firestore database in react jsx with the map function. The 'text' property like 'I will save document" is contained within what appears to be an object(document) that contains an array[blocks] that contains another array[inlineStyleRanges] that contains an object (text). I am trying to render the text object and I am having a hard time figuring out the syntax to make it render correctly.
The object has this structure:
(4) [{…}, {…}, {…}, {…}]
0:
description: "Lorem ipsum dolor sit amet, suspendisse velit"
document:
blocks: Array(1)
0:
data: {}
depth: 0
entityRanges: []
inlineStyleRanges: []
key: "8u7m4"
text: "I will save this document."
type: "unstyled"
__proto__: Object
length: 1
__proto__: Array(0)
entityMap: {}
__proto__: Object
id: Timestamp {seconds: 1551856294, nanoseconds: 879000000}
title: "TCC/NIBF SUMMARY SHEET"
__proto__: Object
my attempted render method looks like this:
render() {
const urlID = this.state.urlID;
const results = this.state.documents;
const postList = results.map((result, index) => {
if (urlID === result.id.seconds.toString()) {
return (
<Card key={result.id.seconds}>
<CardBody>
<CardTitle>File Name: {result.title}</CardTitle>
<CardText>File Description: {result.description}</CardText>
{/*<CardText>File Document Text: {result.document... }</CardText>*/}
</CardBody>
</Card>
);
} else {
return null;
}
});
return <div>{postList}</div>;
}
I used the new es6 Map function to make a new object map that I turned into an array using the spread operator and then looked at the structure of the object as an array in chrome dev tools.
After studying it, I found the correct syntax:
<CardText>File text: {result.document.blocks["0"].text}</CardText>