how do I pass some data between pages in Ionic 4?
Consider this example:
In file1.ts I have:
export class ArchivePage{
constructor() { }
messages = [
{
user: 'user1',
msg: 'Hello!',
type: 0
},
{
user: 'user2',
msg: 'Hi!',
type: 1
}
];
}
Now in file1.html I can simply use *ngFor = "let message of messages" and {{message.user}} {{message.msg}}.
But I have another file2.ts, how can I pass this messages to file2.ts in order to use them in file2.html?
Thanks a lot
You have two options, you can use a shared service for your data as data source and get data from it in the ts files, or you can use Storage for setting your messages in one ts file and retrieve it in the second file, for more details for the second solution, please check the attached documentation link
https://ionicframework.com/docs/angular/storage
Related
Thank you all in advance for your help.
My problem is that in the model browser I can't see the elements organized by model. They are all seen together in no order. I have been able to load linked files via jobpayload with rootFilename. I have seen a lot of information about it but if someone has done it or has an idea of how to do it, I would greatly appreciate the help or start. All the best.
If the model is a composite Revit model translation, the host and linked RVT files are translated by a zip package, the model structure will be merged into a single tree, so it won't organize the tree structure by models.
However, we can tell which object is from the linked RVT. See the concept here:
https://stackoverflow.com/a/64672951
and here is a code example that I use this function to get their dbIds.
async getRevitLinkedElementIds(rvtLinkExternalIds, model) {
const modelKey = model.getModelKey();
const externalIdMap = this.modelExternalIdMaps[modelKey];
const entities = Object.entries(externalIdMap);
const linkedElementIds = rvtLinkExternalIds.map(instanceId => {
return entities.filter(entity => entity[0].includes(`${instanceId}/`)).map(entity => entity[1]);
})
.flat();
return linkedElementIds;
}
I think you can make use of the linkedElementIds, and then call model.getInstanceTree().getNodeParentId( dbId ) repeatedly until you get the root node id, so that you can get name of non-leaf nodes, e.g., Family Type, Family, and Category, to rebuild your own tree nodes using jstree.js. (Don't use non-leaf nodes' dbIds, since they are shared by the host and linked contents)
Afterward, you can build node data of the jstree.js like this for each models (host and links) to expand the tree structure of my custom panel in the code example.
[
{ id1, externalId: -1, type: 'revit-category', text: 'Curtain Panels' },
{ id2, externalId: -1, type: 'revit-family', text: 'System Panel' },
{ id3, externalId: -1, type: 'revit-family-type', text: 'Glazed' },
{ id4, externalId: '03d1b04e-ba90-4a0e-8fe2-eca95236e26a/ab343b7e-3705-4b87-bacc-33c06a6cee1d-000ee82e', type: 'revit-elements', text: 'System Panel [976942]' }
]
Sorry for the question, but I'm newer in Typescript and Ionic and Im a bit confused about how should I proceed.
I have a JSON file with 150 entries based on an interface I'm declared quite simple:
export interface ReverseWords {
id: number;
todo: string;
solution: string;}
On the other hand, I have a service which reads the json file and returns an Observable of this type (ReverseWords)
getReverseWords() {
return this.http.get<ReverseWords>('/assets/data/reves.json');}
On .ts file, I call the service and I have all the content of the JSON file. What I want to do (and Im not able to do) is get only one entry based on a random position.
On .ts file:
reverseWords: Observable<ReverseWords>; // All the JSON content
reverseWordsSelected: Observable<ReverseWords>; // I would like to get one entry here
On ngOnInit():
this.reverseWords = this.dataservice.getReverseWords();
Everything is fine until here, I've got all the content and I can log it in console. I'm using Observables so I need to subscribe to it to get the information. And I use rxjs/operators pipe and filter to try it, but nothing is showing in the chrome developer console (not even an error).
const reverseWordSelectedByPosition = this.reverseWords.pipe(filter(reverseWord => reverseWord.id === randomPosition));
reverseWordSelectedByPosition.subscribe(console.log);
Could anybody help me and tell me what I'm doing wrong?
Other thing I've tested is to do the following in the service:
getReverseWords() {
return this.http.get<ReverseWords[]>('/assets/data/reves.json');}
And then in the .ts file:
reverseWords: Observable<ReverseWords[]>;
But I have the same problem.
Finally, the most weird thing is that if I write in the .ts file this simple test:
const test = from([
{
id: 1,
todo: 'chapter',
solution: 'r-e-t-p-a-h-c'
},
{
id: 2,
todo: 'claustrofobia',
solution: 'a-i-b-o-f-o-r-t-s-u-a-l-c'
},
{
id: 3,
todo: 'keyboard',
solution: 'd-r-a-o-b-y-e-k'
}
]);
Everything is fine and I can see on the log only 1 entry if I choose 2, for example.
Any help or advice??
Thanks and sorry for the long approach!!
As TotallyNewb suggested, I show an example of the JSON file, with only 3 entries:
[
{
"id": 1,
"todo": "chapter",
"solution": "r-e-t-p-a-h-c"
},
{
"id": 2,
"todo": "claustrofobia",
"solution": "a-i-b-o-f-o-r-t-s-u-a-l-c"
},
{
"id": 3,
"todo": "keyboard",
"solution": "d-r-a-o-b-y-e-k"
}
]
Since you are getting the whole array you can use map
this.reverseWords.pipe(
map((items) => items[Math.floor(Math.random() * items.length)]), // Creates a random index based on the array length
)
.subscribe(console.info);
If you want to pass the result to reverseWordsSelected, you can change it to a Subject and pass the value to it from the subscription of reverseWords with .next().
You can check out this stackblitz for a working example
I have created a Home.js and included inside App.js of my react app.I want to fetch json data but I am getting the following error-
My Code- https://stackblitz.com/edit/react-kwaooy?file=src/App.js
For initial load your this.state.lists.regionData will be undefined and you are accessing the undefined value that might be the issue for crashing the application.
Change your state value like below,
this.state = {
lists: {
regionData: [],
activeCases: '',
activeCasesNew: '',
deaths: ''
}
};
You need to check what you are actually storing in the list state from the response. What I see is that you are storing response.data but you might actually want to store regionData from the response. This will allow map to iterate over the regionData values and not show this error.
I have a JSON request in the following structure-
{
"user_id" : "1",
"user_details" : {
"name" : "my_name"
"passport_image" : "passport_image.jpg"
},
"user_documents" : [
{"file" : "doc_1.jpg"},
{"file" : "doc_2.jpg"}
]
}
How can I send files via postman that are part of a JSON request?
This is what I tried -
But then passport_image.jpg would be its own field and not part of user_details object, correct?
And what about the array of file objects under user_documents? How can I send it too in the request?
I would appreciate help as I'm quite new to using form-data requests rather than raw JSON ones.
You can set the keys as array. It can be set like this. user_documents[0] and the respective file for it.
This will work!
The above answer is wrong, the way to do it is to select the key value = to the value you used in your code, for instance see below:
const storage = multer.diskStorage({
destination: function(req,file,cb) {
cb(null,'uploads/')
},
filename: function(res,file,cb) {
console.log('file= ',file)
const uniqueSuffix=Date.now()+'-'+Math.round(Math.random()*1e9)
cb(null, file.fieldname+'-'+uniqueSuffix+'.jpg')
}
})
const upload = multer({storage:storage})
app.post('/uploads', upload.array('files',12), (req,res)=>
{
req.files.map((file)=>{
console.log('received request: ', file)
})
res.status(200).send('received files')
})
Then in postman you just select several files, in this case less than 12 after clicking on the select files button. Just one entrance for multiple files.
Actually I find solution on Youtube. You can choose multiple files by keeping Ctrl and choose multiple files.
After doing a POST to Firebase, I have this returned from Firebase
{ "name": "-KBfn7iFNIxSuCL9B-g5" }
How do I use Typescript to read the response returned from the POST request? Only the value -KBfn7iFNIxSuCL9B-g5 is need for routing. My existing incomplete code looks like this:
addHeroGotoHeroDetail() {
let heroId: string;
this._firebaseService.postHero()
.subscribe(response => {
//do something to make the heroId = -KBfn7iFNIxSuCL9B-g5
});
this._router.navigate(['hero-detail', {id: heroId}]);
}
The goal is to have a button in the homepage where user can click on it to create a new hero Id in Firebase then redirect it to the newly created hero detail page, where he can do more detail updating.
Also after doing a GET from Firebase, I have this returned from Firebase
{ "-KBfn-cw7wpfxfGqbAs8": { "created": 1456728705596, "hero": "Hero 1", "...": "..."} }
Should I create an interface for the hero JSON returned by Firebase?
If yes for question 2, how should the interface look?
export interface X {
id: string; //id defined by Firebase e.g. -KBfn-cw7wpfxfGqbAs8
hero: string; //name of the hero e.g. Hero 1
created: number; // The time when the hero was created
}
If yes for question 2, how do I use Typescript to parse the JSON object to the interface? Code sample would be very much appreciated.
The goal is to display the hero detail to the user, and allow the user to add more details to the hero such as Date of Birth, Gender and etc... and then update Firebase with these changes.
1. See below.
2. Yes, you should create an interface that matches the return type from Firebase.
3. Based on your example JSON, this is how I would structure the return type's interface:
export interface FirebaseResponse {
[id: string]: {
created: number;
hero: string;
}
}
4. To parse the response from Firebase into a strongly-typed TypeScript object, do something like this:
let firebaseResponse = <FirebaseResponse>JSON.parse(response);
You can then return only the ID, if you wish, by doing something like this:
// note: this is making some assumptions about your response type.
// You may need a more sophisticated way of returning the ID depending
// on the structure of the response - for example, if the object has
// more than one key.
return Object.keys(firebaseResponse)[0];