Below is my model and I want to create a request as shown below.
export interface IItemFlow
{
itemId : number;
itemName:string;
}
export class ISaveItemFlowRequest {
itemFlowRequest:IItemFlow[];
userId:number;
}
Imported model in component.ts
import { ISaveItemFlowRequest, IItemFlow} from "../item/model/Iitemflowfile"
Save button click adding items into model by using push() .
this._saveItemFlowRequest.itemFlowRequest.push({itemId:101;itemName:'ABC'});
Error: Cannot read property 'itemFlowRequest' of undefined
My request should generate as follows.
{
"itemFlowRequest": [
{
"itemId": 1,"itemName":"ABC"
},
{
"itemId": 2,"itemName":"xyz"
}
],
"userId": 22
}
You need to initialize the this._saveItemFlowRequest;
this._saveItemFlowRequest: ISaveItemFlowRequest = {itemFlowRequest : [], userId: null}
this._saveItemFlowRequest.itemFlowRequest.push({itemId:101;itemName:'ABC'});
Another aproach is create a class with a constructor that implements ISaveItemFlowRequest
Related
how to set json file to my "Client" object's array?
I have json, which looks like this:
Clients.json
{
"clients": [
{
"firstName": "nameA",
"lastName": "lastA",
"doctorsName": "domm",
"procedure": "consultation",
"registrationDate": "new Date(2019, 10, 12)",
"isAlreadyServed": "false"
},
{
"firstName": "nameB",
"lastName": "lastB",
"doctorsName": "domm",
"procedure": "procedureA",
"registrationDate": "new Date(2019, 10, 12)",
"isAlreadyServed": "false"
},
{
"firstName": "nameC",
"lastName": "lastC",
"doctorsName": "doctorA",
"procedure": "procedureC",
"registrationDate": "new Date(2019, 10, 12)",
"isAlreadyServed": "false"
},
...
...
...
And how can I set it to object's array Client.service.ts
clients: Client[] = this.http.get('path.Clients.json') // ??
Since your data is in the client-side as a JSON file. Though you can use HttpClient, here is another solution for the same.
You can directly import the JSON as a constant and assign it to clients as of TS 2.9 (docs).
import Clients from 'path/to/client/json';
clients: ClientsJson = Clients;
where the ClientsJson interface would look like this.
export interface ClientsJson {
clients: Client[];
}
export interface Client {
firstName: string;
lastName: string;
doctorsName: string;
procedure: string;
registrationDate: Date;
isAlreadyServed: boolean;
}
Here is a working example on StackBlitz.
You first need to define an interface that matches your object structure:
public interface ClientConfiguration {
firstName: string;
lastName: string;
doctorsName: string;
// And so on...
}
Then, just like the code you have shown, you need to type the http.get method in order to obtain the correct output.
public getConfiguration(): Observable<Array<ClientConfiguration>> {
return this.http.get<Array<ClientConfiguration>>('path/to/client/json');
}
Since my getConfiguration() method returns an observable, you will need to subscribe to it in your components or services:
#Component({ ... })
export class MyComponent implements OnInit {
public ngOnInit(): void {
this.getConfiguration().subscribe(result: Array<ClientConfiguration> => {
this.clientConfiguration = result;
});
}
public getConfiguration(): Observable<Array<ClientConfiguration>> {
return this.http.get<Array<ClientConfiguration>>('path/to/client/json');
}
}
You can read more here about HttpClient at Angular's official documentation: https://angular.io/guide/http
Hope it helps.
I am creating a reusable component in which I can pass any dynamic json so he'll able to handle that
what I tried is
mycomponent.html:
<div *ngFor="let Node of items">
{{ Node[getPath()]}}<br>
</div>
mycomponent.ts:
#Input()
path:any;
#Input()
items:any;
getData(){
var String="";
var data=this.path.split('.');
for(var i=0;i<data.length;i++){
if(i==0){
String+="'"+data[i]+"']";
}else if(i+1==data.length){
String+="['"+data[i]+"'";
}
else{
String+="['"+data[i]+"']";
}
}
return String;
}
The output of getData() function is like
'related']['name'
because the reasone is
in mycomponent.html i am using
{{Node[getData()]}}
so basically im trying to do is
{{Node['related']['name']}}
MainComponent.html:
<my-component path="related.name" items={{items}}></my-component>
Input Array
[
{
"related": [
{
"name": "first"
}
]
},
{
"related": [
{
"name": "second"
}
]
}
]
my expected output is like
first
second
I want to create that component as resuable so i can use anywhere in my project so give any suggestion to do that :(
When you create a dynamic component to handle the input JSON.
You could do two ways
Create the component.
mycomponent.html:
mycomponent.ts
mycomponent
#Input()
items:any;
When you integrate the component as any child then you could do as
<mycomponent [items]="items"></mycomponent>
or when you want to invoke as popup
then
let ngModelRef : NgbModalRef = this.ngbModalService.open(mycomponent );
ngModelRef.componentInstance.items= items;
return ngModelRef;
I am trying to create a dynamic photo gallery for all the characters on my app. When I click on the gallery for that particular character, It takes me to their gallery, but no images appear. Each character should have 3 images for their gallery. While the app does not break, I do get a warning message saying the following: "Failed prop type: Invalid prop source supplied to image." Can somebody look at my code and see where I am wrong?
I created a JSON file with images for each character.
//CharacterImages.js
const CharacterImages = [
{
id: "1",
name: "Homer Simpson",
urlone:
"https://i.pinimg.com/474x/f1/36/ca/f136ca04817e60fa12f4a5680101ff8b.jpg",
urltwo:
"https://i.pinimg.com/474x/b1/da/e2/b1dae2fe6ca1620e5d1949a2dcd33a0c.jpg",
urlthree:
"https://i.pinimg.com/564x/7b/53/32/7b5332ef6a981b3c54e855495ea1c828.jpg"
},
{
id: "2",
name: "Marge Simpson",
urlone:
"https://i.pinimg.com/564x/63/e4/7d/63e47d98e66622bbff5e4578ccffeffc.jpg",
urltwo:
"https://i.pinimg.com/564x/04/48/60/044860ebcd5d6c14a1140b351cb620b1.jpg",
urlthree:
"https://i.pinimg.com/564x/6d/99/26/6d9926fa54bc3650acf9295d997fc72c.jpg"
},
{
id: "3",
name: "Bart Simpson",
urlone:
"https://i.pinimg.com/564x/fe/18/af/fe18af309234936e231fa107c6d2b4c7.jpg",
urltwo:
"https://i.pinimg.com/564x/20/59/7a/20597ab32ab0f7ec8a5484fa384e0bb4.jpg",
urlthree:
"https://i.pinimg.com/564x/20/59/7a/20597ab32ab0f7ec8a5484fa384e0bb4.jpg"
}
export default CharacterImages;
I created a separate folder so that the images can come in dynamically.
// ImageGallery.js
import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import { SliderBox } from "react-native-image-slider-box";
import { withNavigation } from "react-navigation";
import CharacterImages from "../Data/CharacterImages";
class ImageGallery extends React.Component {
static navigationOptions = {
title: "Gallery",
headerStyle: {
backgroundColor: "#53b4e6"
},
headerTintColor: "#f6c945",
headerTitleStyle: "bold"
};
constructor(props) {
super(props);
this.state = {
CharacterImages
};
}
render() {
return (
<View style={styles.container}>
<SliderBox
images={this.state.CharacterImages}
sliderBoxHeight={900}
onCurrentImagePressed={index =>
console.warn(`image ${index} pressed`)
}
dotColor="yellow"
inactiveDotColor="white"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
}
});
export default withNavigation(ImageGallery);
Finally, the user can access the each characters gallery when they are in that particular profile this way:
//CharacterProfile.js
headerRight: (
<Button
onPress={() => navigation.navigate("ImageGallery")}
title="Gallery"
color="#f6c945"
/>
)
The problem here is that you are passing a whole object of datas instead of an array of strings with urls.
Try changing images prop to:
images = {this.state.CharacterImages.urlone}
Then i would advise to create a single "image" key object with the array of strings, making your CharacterImages be:
const CharacterImages = [
{
id: "1",
name: "Homer Simpson",
images:["https://i.pinimg.com/474x/f1/36/ca/f136ca04817e60fa12f4a5680101ff8b.jpg",
"https://i.pinimg.com/474x/b1/da/e2/b1dae2fe6ca1620e5d1949a2dcd33a0c.jpg",
"https://i.pinimg.com/564x/7b/53/32/7b5332ef6a981b3c54e855495ea1c828.jpg"]
},
{
id: "2",
name: "Marge Simpson",
images:["https://i.pinimg.com/564x/63/e4/7d/63e47d98e66622bbff5e4578ccffeffc.jpg",
"https://i.pinimg.com/564x/04/48/60/044860ebcd5d6c14a1140b351cb620b1.jpg",
"https://i.pinimg.com/564x/6d/99/26/6d9926fa54bc3650acf9295d997fc72c.jpg"]
},
{
id: "3",
name: "Bart Simpson",
images:["https://i.pinimg.com/564x/fe/18/af/fe18af309234936e231fa107c6d2b4c7.jpg",
"https://i.pinimg.com/564x/20/59/7a/20597ab32ab0f7ec8a5484fa384e0bb4.jpg",
"https://i.pinimg.com/564x/20/59/7a/20597ab32ab0f7ec8a5484fa384e0bb4.jpg"]
}
]
export default CharacterImages;
EDIT
Forgot that CharacterImages is an Array of objects!!!
I updated also the constant as i didn't close the array
Here you have to decide how you want to render your images based of which condition. I'm going to show you how to put them so all images gets rendered:
constructor(props){
super(props)
mergedArray=CharacterImages.map(item=> item.images).concat.apply([], mergedArray)
this.state={
images=mergedArr
}
}
After this you can use this.state.images inside your SliderBox
im currently working on this project and im facing this error when I try to pass a variable (this.arrayObj) into the composals array.
ngOnInit() {
this.apiService.getComposals().subscribe((res) => {
console.log(res.tpoCampos);
this.arrayObj = res.tpoCampos;
});
}
Im getting the Json content from a Web Service.
export class AppComponent {
title = 'Form';
arrayObj: any;
composals: Composal[] = [
this.arrayObj,
];
}
This is the content from the webservice
{
"m_iPatientID":2,
"tpoCampos":[
{
"m_cColor":"#000000",
"m_cType":"combo",
"m_cOptions":[
"Sim",
"N\u00e3o"
],
"m_cQuestion":"",
"m_cAnswer":"2",
"m_eIdComposant":4443
},
{
"m_cColor":"#000000",
"m_cType":"combo",
"m_cOptions":[
"Sim",
"N\u00e3o"
],
"m_cQuestion":"",
"m_cAnswer":"2",
"m_eIdComposant":4448
}
]
}
How can I pass the json to the composal object inside the variable this.arrayObj?
I think this.arrayObj is already an array of objects, so it could be written like this
composals: Composal[] = this.arrayObj;
export class AppComponent {
title = 'Form';
arrayObj: any;
composals: Composal[] = this.arrayObj;
}
I want to export a typed object, of a json, to avoid using any as a type. But Im not sure how to create the d.ts file and use it in my project. My json uses platform, brand, locale, environment. This is what i have tried so far.
myjson.json
"desktop": {
"brandname": {
"eu": {
"a": "www.url.com",
"b": "www.otherurl.com",
}
}
}
myjson.d.ts
export class EnvUrlMap {
environment: string;
}
export class LocaleEnvMap {
locale: EnvUrlMap;
}
export class BrandLocaleMap {
brand: LocaleEnvMap;
}
export class PlatformBrandMap {
"desktop": BrandLocaleMap;
"mobile": BrandLocaleMap;
}
export {PlatformBrandMap as map};
index.ts
import map = require('my.json');
export {map};
PROJECT
main.ts
import { map } from 'my-project';
const config = (map as Map); `- ?? what is the type here ? Error cannot find Map`