Has anyone tried to implement this in a react project? There is not much in the documentation on the github/npm website. When I am trying to inject data is there a specific way to add graphql data?
JSX:
<JSONLD>
<Generic jsonldtype="event" schema={{
name: "${adv_event.title}",
description: "${adv_event.body}",
startDate: "YYYY-MM-DDT:HH:MM",
endDate: "YYYY-MM-DDT:HH:MM",
image: "",
}}>
<Generic type="location" jsonldtype="Place" schema={{ name: "test", }}/>
</Generic>
</JSONLD>
What I have tried:
name: "${adv_event.title}",
name: "`${adv_event.title}`",
name: {adv_event.title},
I was going to delete the post but, if any others are looking for this question in the future:
Answer is
name: `${adv_event.title}`,
Related
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 am new to React and trying to learn the react-router. I can loop through the JSON object using the map method. But I am struggling to find a way to display the component based on each iteration. Like if the name is displayed, I want to display another array of objects in that particular iteration. I tried looking at the switch but I can't understand. Please help!!
render() {
return this.props.topic.map(t => (
<ul>
<li>
<Link to={`${t.name}`}>{t.name}</Link>
</li>
</ul>
));
<Switch>
<Route path="/:id" children={<Child />} />
</Switch>
}
This is the JSON object
topics = [
{
name: 'React Router',
id: 'react-router',
description: 'Declarative, component based routing for React',
resources: [
{
name: 'URL Parameters',
id: 'url-parameters',
description: "URL parameters are parameters whose values are set
dynamically in a page's URL. This allows a route to render the same
component while passing that component the dynamic portion of the
URL so it can change based off of it.",
url: 'https://tylermcginnis.com/react-router-url-parameters/'
},
{
name: 'Programmatically navigate',
id: 'programmatically-navigate',
description: "When building an app with React Router, eventually
you'll run into the question of navigating programmatically. The
goal of this post is to break down the correct approaches to
programmatically navigating with React Router.",
url: 'https://tylermcginnis.com/react-router-programmatically-
navigate/'
}
]
},
{
name: 'React.js',
id: 'reactjs',
description: 'A JavaScript library for building user interfaces',
resources: [
{
name: 'React Lifecycle Events',
id: 'react-lifecycle',
description: "React Lifecycle events allow you to tie into specific
phases of a component's life cycle",
url: 'https://tylermcginnis.com/an-introduction-to-life-cycle-
events-in-react-js/'
},
{
name: 'React AHA Moments',
id: 'react-aha',
description: "A collection of 'Aha' moments while learning React.",
url: 'https://tylermcginnis.com/react-aha-moments/'
}
]
},
{
name: 'Functional Programming',
id: 'functional-programming',
description: 'In computer science, functional programming is a
programming paradigm—a style of building the structure and elements of
computer programs—that treats computation as the evaluation of
mathematical functions and avoids changing-state and mutable data.',
resources: [
{
name: 'Imperative vs Declarative programming',
id: 'imperative-declarative',
description: 'A guide to understanding the difference between
Imperative and Declarative programming.',
url: 'https://tylermcginnis.com/imperative-vs-declarative-
programming/'
},
{
name: 'Building User Interfaces with Pure Functions and Function
Composition',
id: 'fn-composition',
description: 'A guide to building UI with pure functions and
function composition in React',
url: 'https://tylermcginnis.com/building-user-interfaces-with-pure-
functions-and-function-composition-in-react-js/'
}
]
}
]
I have a firebase map object and i need to insert arrays inside
I am trying to use update function but it doesn't work
dialogRef.afterClosed().subscribe(result => {
console.log(result);
const arrayname = result.name;
const fireupdate = this.af.list('/users/' + this.Uid + '/items').update(arrayname, result);
});
this is how the result array looks like
{name: "item", price: 25, desc: "a simple item"}
I don't get anything in the firebase
So what is easiest to do is add the array to the doc as shown in the other answer.
this.db.collection("users").doc(this.Uid).update({items: [{name: "item", price: 25, desc: "a simple item"}, {name: "item2", price: 20, desc: "a simple item2"}]})
What you must be careful about is that firestore not really have a good way to query an array with objects yet:
query an array
What Firestore want you to do is basicly:
this.db.collection("users").doc(this.Uid).collection('items').add({name: "item", price: 25, desc: "a simple item"})
If I am not mistaking, by doing this.af.list('/users/' + this.Uid + '/items').update() you are actually trying to write to the Realtime Database, see https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md#updating-items-in-the-list-using-update
But the database that you show in your question is Firestore, the other database service offered by Firebase.
You should use the part of the angularfire2 library dedicated to Firestore, see https://github.com/angular/angularfire2/blob/master/docs/firestore/documents.md#using-angularfirestoredocument
I am trying to append some data to a div with ng-repeat.
I am using angularjs and MongoDB without mongoose. Any help would be greatly appreciated.
An array of objects from server:
[
{
_id: "5a733e96aa3c4e1202b347e5",
image: "lerem",
title: "Hydration",
about: "Hydration is key",
article: "hydor lorem ipsum",
__v: 0
},
{
_id: "5a7345b1aa3c4e1202b347e6",
image: "lerem",
title: "Hydration",
about: "Hydration is key",
article: "hydor loremm",
__v: 0
},
{
_id: "5a735c752aaeb91470fcda61",
image: "lerem",
title: "Hydration",
about: "Hydration is key",
article: "hydor lorm",
__v: 0
}
]
Angularjs ng-repeat:
<div ng-controller="ArticleController" ng-repeat="articles in articles | filter:article" class="articles">
<h1>{{article.image}}</h1>
<h1>{{article.title}}</h1>
<h1>{{article.about}}</h1>
<h1>{{article.article}}</h1>
</div>
controller for article:
$http.get("/articles", function(articles) {}
<div ng-controller="ArticleController" ng-repeat="article in articles | filter:article" class="articles">
<h1>{{article.image}}</h1>
<h1>{{article.title}}</h1>
<h1>{{article.about}}</h1>
<h1>{{article.article}}</h1>
</div>
should work. Please note that I changed articles in articles to article in articles for distinguishing purpose. Also, it is advisable to use Mongoose while working with angular. Kind of makes things easier to work with.
I'm using urigo:angular package. In my project I have two collections: posts and users. Is it possible to publish from server an object, which looks like this:
[{createdAt: 20-12-2015,
text: 'something',
user: { name: 'some name'}
},
{createdAt: 22-12-2015,
text: 'something2',
user: { name: 'some other name'}
}]
I mean insert user object to every post.
Update:
I have two collectionsL posts and users. Every post has user id. When I do something like this with publishComposite: https://github.com/Nitrooos/Forum-Steganum/blob/posts/server/posts.methods.coffee then I have on the client side (https://github.com/Nitrooos/Forum-Steganum/blob/posts/client/posts/posts.controller.coffee) only an array with posts, without the user in it.
I have this:
[{createdAt: 20-12-2015,
text: 'something',
userId: 123
},
{createdAt: 22-12-2015,
text: 'something2',
userId: 123
}]
So, when I'll want display a username, I'll have to do a request to every post about user?