I am having this type of response
{
"value": [
{
"AttachmentFiles": [
{
"odata": "SP.Attachment",
"odata": "AttachmentFiles('b1.jpg')",
"odata": AttachmentFiles('b1.jpg')",
"FileName": "b1.jpg"
}
],
"Id": 1,
"Title": "Article #1",
"LongStory": "is designed to convey the business impact it generates.",
"SortStory": "professional services firm ",
"ArticleCategory": "News",
},
{
"AttachmentFiles": [
{
"odata": "SP.Attachment",
"odata": "https://('b3.jpg')",
"odata": "/AttachmentFiles('b3.jpg')",
"FileName": "b3.jpg"
}
],
"Id": 2,
"LongStory": "In June 2017",
"SortStory": "is a professional services
"ArticleCategory": "News",
"Title": "Article #2",
}
]
}
I have to show long story on the other page with "FileName" value.
My code for html is below
<ion-content padding style="background:reds!important;" class="no-scroll">
<ion-slides #slider (ionDidChange)="SlideChanged()" [options]="_sliderOptions" id="ionSlider" >
<ion-slide #slide *ngFor="let robot of _robots; let i = index " >
<ion-item >
<div attr.id="Testing{{i}}"></div>>
<h1>{{robot.Title}}</h1>
<p>{{robot.SortStory}}</p>
</ion-item>
<button ion-button (click) = "goToLongStory()" icon-start large round color="dark">
<ion-icon name="star"></ion-icon>
clike me m8
</button>
</ion-slide>
</ion-slides>
</ion-content>
can Any one help me on this , on each slide i am having the button and on button click i have to show related data to other page like long story , title, filename.
Please help me .
in your constrcutor put
public navCtrl: NavController,
`
than in your function goToLongStory() pass the index you want to access and filter for the long story with the index you need. Afterwards just call the new page and pass the parameter.
this.navCtrl.push('newPage', { longStory: LongStory });
On the page "newPage" you will need to add the following to your constrcutor:
public navParams: NavParams
than get the LongStory from navParams to a variable of your choice.
let yourNewVariable: string = navParams.get("LongStory ");
Related
im learning about vuejs 3 and for example i want to show a chartjs with a combo to filter data. (Without the combo, everything works correctly)
i have a parent component chartjs.vue where import the chartjs and the combo. when i select a year, i change the variable and show it on the template
<script setup>
import ChartJsBarChart from '#/views/charts/chartjs/ChartJsBarChart.vue'
import SelectYear from '#/componentes/selectYear.vue'
const api = ref('exp')
const year = ref([])
function selectYear(x) {
year.value = x
}
</script>
<template>
<!-- 👉 Latest Statistics -->
<VCol cols="24" md="12">
<VCard>
<VCardItem class="d-flex flex-wrap justify-space-between gap-4">
<VCardTitle>Choose a year</VCardTitle>
</VCardItem>
<VCardText>
<SelectAno #input="selectAYear" />
</VCardText>
</VCard>
</VCol>
<VCol cols="24" md="12">
<VCard>
<VCardItem class="d-flex flex-wrap justify-space-between gap-4">
<VCardTitle>Total</VCardTitle>
</VCardItem>
<VCardText>
<ChartJsBarChart :yearSelected="year" :url="api" />
</VCardText>
</VCard>
</VCol>
</template>
one child component with a select (to try props and emit) selectYear.vue
<script setup>
import { ref, defineEmits, watch } from 'vue'
const emit = defineEmits(['input'])
let selected = ref([])
const years = [
'2005',
'2008',
'2009',
'2010',
'2011',
'2012',
'2014',
'2015',
'2016',
'2017',
'2018',
'2019',
'2020',
'2021',
'2022',
'2023',
]
watch(
() => selected.value,
(newValue, oldValue) => {
change(newValue)
},
)
const change = val => emit('input', val)
</script>
<template>
<VSelect
v-model="selected"
:items="years"
label="choose a year"
/>
</template>
and last child component with the chartjs ChartJsBarChart.vue
<script setup>
import BarChart from '#/libs/chartjs/components/BarChart'
import axios from '#axios'
import { ref, onMounted, computed } from "vue"
import { useStatesStore } from '#/store/states'
const props = defineProps({
url: {
type: null,
required: true,
},
yearSelected: {
type: null,
required: true,
},
})
const apiData = ref([]) //data from API
const data = ref({}) // data parsed to chartjs
const store = useStatesStore()
const states = ref(store.states) // legend
const filterByYear = computed(() => {
return apiData.value.filter(item => item.year === '2005')
})
onMounted(async () => {
await axios
.get('/api/dashboard/expProvActiv')
.then(res => {
apiData.value = res.data['hydra:member']
})
})
</script>
<template>
{{ props.yearSelected }}
<hr>
{{ apiData }}
<BarChart
:height="400"
:chart-data="data"
/>
</template>
the result (shortened) of {{ apiData }} with hundred of items is:
[ { "state": "state 1", "activity": "string", "subactivity": "string", "year": 2015, "surface": "3.5500", "total": 3, "rcs": 3 }, { "state": "state 2", "activity": "string", "subactivity": "string", "year": 2016, "surface": "10.9400", "total": 13, "rcs": 13 }]
if i try to show filterByYear, the first time i have not data and how can i do to call filterByYear when i change the year?
[answer myself] the year was string instead number
how can i update the child component BarChart to update the information?
thank you!
I would need help building a request to my backend API.
I currently have a form with a drop down list. The data in this list comes from this.$Http.get('/ quality/api/affaires/')
Below this drop-down list, I have another list. This list, I would like it to be empty until the 1st is not selected, then it is implemented with data according to the selection above.
Backend side (Django) I have 2 models which are "Affaires" and "AffairesOfs". I used Serialize and I can therefore request each of these models via api/affaires and api/affairesofs
In the "AffairesOfs" model I have a foreignekey (idaffaire) on the id of the "Affaires" model.
Finally, I would like my second list to be made up of all the “affairesofs” linked to the “Affaires” selected.
For now, I have my 2 drop-down lists but I can't find a way to link the second to the first.
I tried different methods found on the internet (with the use of v-model, ...) but could not achieve a result.
I can't even get the value selected from the first list to display it in the console, or in a <span>. I think I need a change event on the first list which ask a getMethod with selected value in parameters ?
example of api/affaire :
{
"id": 1,
"nom": "HORS AFFAIRE",
"adresse": "15, rue de la Gibaudière",
"cp": "49183",
"ville": "Saint-Barthélémy d'Anjou",
"dessinateur": 0,
"conducteur": 0,
"chefdeprojet": null,
"cloture": 0
},
{
"id": 2,
"nom": "Suivi Production",
"adresse": null,
"cp": null,
"ville": null,
"dessinateur": null,
"conducteur": null,
"chefdeprojet": null,
"cloture": 0
},
example of api/affairesofs :
{
"id": 2,
"idaffaire": {
"id": 1042,
"nom": "Schlumberger",
"adresse": "",
"cp": "75007",
"ville": "Paris",
"dessinateur": null,
"conducteur": 6,
"chefdeprojet": 16,
"cloture": 1
},
"dateajout": "2015-12-14T15:08:46Z",
"statut": 2,
"type": 0,
"nom": "Chassis St Do R1 Ă R3",
"isanalise": 1,
"idpersonnel": 1
},
{
"id": 6,
"idaffaire": {
"id": 1045,
"nom": "LAVAL",
"adresse": "",
"cp": "53000",
"ville": "Laval",
"dessinateur": 3,
"conducteur": 9,
"chefdeprojet": 9,
"cloture": 1
},
and below there is my page :
<div id="starting">
<div class="container">
<div class="row">
<form class="form-group">
<label>N° d'affaire</label>
<select class="col" v-model="affaireSelected">
<option value="">Choisir :</option>
<option v-for="affaire in affaires" v-bind:value="affaire.id">${affaire.id} - ${affaire.nom}</option>
</select>
<span> Selectionné : {{ affaireSelected }}</span>
<label>N° d'OF</label>
<select class="col">
<option value="choisir">Choisir :</option>
<option v-for="of in ofs" :value="of.id">${of.id} - ${of.nom}</option>
</select>
<input type="submit" value="Valider" class="btn btn-success" />
</form>
</div>
</div>
<div class="loading" v-if="loading===true">Loading…/div>
</div>
<!-- vue.js files !-->
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.3.5"></script>
<script type="text/javascript">
new Vue({
el: '#starting',
delimiters: ['${','}'],
data: {
ncs: [],
affaires: [],
ofs: [],
affaireSelected: '',
loading: false,
currentNc: {},
},
mounted: function() {
this.getAffaires();
this.getOfs();
},
methods: {
getAffaires: function() {
this.loading = true;
this.$http.get('/qualite/api/affaires/')
.then((response) => {
this.affaires =response.data;
this.loading = false;
})
.catch((err) => {
this.loading = false;
console.log(err);
})
},
getOfs: function() {
this.loading = true;
this.$http.get('/qualite/api/affairesOf/')
.then((response) => {
this.ofs =response.data;
this.loading = false;
})
.catch((err) => {
this.loading = false;
console.log(err);
})
},
}
});
</script>
Finally found a solution. I need to use a computed property juste like this :
computed: {
ofsByAffaire() {
return this.ofs.filter(oF => oF.idaffaire.id === this.affaireSelected.id);
}
},
then, I juste have to use this computed property on the template :
<select class="col">
<option value="choisir">Choisir :</option>
<option v-for="of in ofsByAffaire" :value="of.id">${of.id} - ${of.nom}</option>
</select>
I have simple django api which provide a list of movies title with their ids.
I have created a movies service in type script which performs the get operation and get the list of movies title and id.
In native script I have two files, items.component.ts
import { Component, OnInit } from "#angular/core";
import { MovieService } from "../services/movie.service";
#Component({
selector: "ns-items",
moduleId: module.id,
templateUrl: "./items.component.html",
providers: [MovieService]
})
export class ItemsComponent implements OnInit {
items;
constructor(private movieService: MovieService) { }
ngOnInit(): void {
this.movieService.getMovies().subscribe(
movies => {
this.items = movies;
console.log(movies);
},
error => {
console.log('error', error);
}
);
}
}
and items.component.html
<ActionBar title="Movie Rater App" class="action-bar">
</ActionBar>
<StackLayout class="page">
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<Label [nsRouterLink]="['/item', item.id]" [text]="item.title"
class="list-group-item"></Label>
</ng-template>
</ListView>
</StackLayout>
I am getting blank screen on the app in the emulator - just the action bar title. No exception in logs
I validated API is running fine and even I can see the response in console (i.e. output of console.log(movies)).
Any help will be appreciated.
django API response:
{
"count": 5,
"next": null,
"previous": null,
"results": [
{
"id": 1,
"title": "Rocky (1976)",
"description": "A small-time boxer gets a supremely rare chance to fight a heavy-weight champion in a bout in which he strives to go the distance for his self-respect.",
"moviePoster": "http://127.0.0.1:8000/pic_folder/rocky-1976-poster2451370.jpg",
"avg_rating": 5,
"no_of_ratings": 1,
"maxRatings": 5
},
{
"id": 16,
"title": "Rocky II",
"description": "Rocky II",
"moviePoster": "http://127.0.0.1:8000/pic_folder/rocky2.jpg",
"avg_rating": 5,
"no_of_ratings": 1,
"maxRatings": 5
}
}
You must assign the result array to items so it suppose to be,
this.movieService.getMovies().subscribe(
movies => {
this.items = movies.results;
console.log(movies);
},
error => {
console.log('error', error);
}
);
Also you may not need the StackLayout wrapping the ListView, you could remove that.
I'm trying to override the behaviour of OK button on a multiple select component passing the [selectOptions]. The title and subtitle get overriden, but the buttons and the enableBackdropDismiss settings are ignored.
Anyone can help? Thanks in advance.
<ion-item>
<ion-label>Select roads</ion-label>
<ion-select [(ngModel)]="selectedRoads" multiple="true" [selectOptions]="selectOptions">
<ion-option *ngFor="let road of roads">{{road.description}}</ion-option>
</ion-select>
</ion-item>
this.selectOptions = {
title: 'Pizza Toppings',
subTitle: 'Select your toppings',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Buy',
handler: () => {
console.log('Buy clicked');
}
}
],
enableBackdropDismiss:true
};
I'm currently working on an interactive chart which should calculate potential risk-factors of commercial project. I've been using Baidu ECharts for this, and got the graph working visually, but can't get the graph to update when data changes.
The data comes from an external questionnaire, which uses radiobuttons for the values and a checkbox to turn the whole set on and off.
<input type="checkbox" id="GPEbool" value="true"> Example Question 1</h4>
<form action="">
<input type="radio" id="polishedness" value="1"> Idea<br>
<input type="radio" id="polishedness" value="1"> Concept<br>
<input type="radio" id="polishedness" value="2"> Mockup<br>
<input type="radio" id="polishedness" value="5"> Prototype<br>
<input type="radio" id="polishedness" value="7"> Playable<br>
<input type="radio" id="polishedness" value="15"> Polish<br>
<input type="radio" id="polishedness" value="30"> Finished<br>
</form>
Now, the problem is getting the data into the graph. It gets the initially selected value right (when adding "checked" to one of them), but won't update after that.
data: [{ value: $('input[name=polishedness]:checked').val(), name: 'Design'}]
I've tried calling the refresh function whenever something changes, but it'll return refresh is not a function. I'm really at loss, and the Chinese documentation doesn't help me much :)
Any suggestions? Thanks in advance!
You have to call chartInstance.setOption() again with your new data.
I give you a small example:
// eChart is the chart instance!
echart.setOption({
// .... some configuration
series: [
{
type: "line",
name: "test",
data: [1,2,3,4,5,6]
}
]
})
After you changed the value of your select box, you have to catch that event, change the value of the configuration object and call chartInstance.setOption() again.
Therefore, it is sometimes advisable to save your complete configuration object and store your changes there.
You can use resize() method, for example
window.chartRadar = echarts.init(document.getElementById('echartId'));
window.chartRadar.setOption({
title: {
text: 'radar echart'
},
tooltip: {},
legend: {
data: ['data1', 'data2']
},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{ name: 'sales', max: 6500},
{ name: 'Administration', max: 16000},
{ name: 'Information Techology', max: 30000},
{ name: 'Customer Support', max: 38000},
{ name: 'Development', max: 52000},
{ name: 'Marketing', max: 25000}
]
},
series: [{
name: 'Budget vs spending',
type: 'radar',
// areaStyle: {normal: {}},
data : [
{
value : [4300, 10000, 28000, 35000, 50000, 19000],
name : 'data1'
},
{
value : [5000, 14000, 28000, 31000, 42000, 21000],
name : 'data2'
}
]
}]
});
Once you alreay make you echart you cloud use the method "resize()" for redraw the echar for example
window.chartRadar.resize();
If you are using Angular ,
You can also use the [merge] option to have the Chart responding for the value changes,
<div echarts [options]="initialValue" [merge]= "dynamicData" class="demo-chart"></div>
Reference : https://github.com/xieziyu/ngx-echarts#api
In your Module assign Initial Value as below,
initialValue: EChartOption = {
xAxis: {
type: 'time',
splitNumber : 20
},
yAxis: {
type: 'value',
name : '$',
nameLocation: 'middle'
},
series: [{
data : [],
type: 'line'
}]
}
and set the Dynamic value based on your data, Also initialize "this.dynamicData" before making the api calls to the external service
formDataforChart(backTestTrades) {
let i = 0;
for(let backTestTrade of backTestTrades){
let profitAndTime = [];
profitAndTime.push(backTestTrade.exitTime);
profitAndTime.push(backTestTrade.profitOrLoss);
this.eChartDataSeries.push(profitAndTime);
}
let data = {
data : this.eChartDataSeries,
type : 'bar'
};
this.dynamicData=this.initialValue;
this.dynamicData.series = [];
// Applying my dynamic data here
this.dynamicData.series.push(data);
}