Develop Reference

Vue.js: using computed property in method returns undefined error

I have a computed property that gets the state from vuex. Inside vuex the state is set using axios to get some data from my api. My issue is that when I try use this computed property inside my methods I get an undefined error. This is because I try use the data before it has been set in the vuex store. So how do I make sure the boardColumnData is set before I try using it in my methods?
errors:
Error in mounted hook: "TypeError: Cannot read property 'total' of undefined"
TypeError: Cannot read property 'total' of undefined
AppCharts.vue
<template>
<div id="chart_section">
<div id="charts" v-if="boardColumnData">
<DoughnutChart :chart-data="datacollection" :options="chartOptions" class="chart"></DoughnutChart>
<button v-on:click="fillData">Fill Data</button>
</div>
</template>
<script>
import DoughnutChart from './DoughnutChart';
import { mapGetters } from 'vuex';
export default {
components: {
DoughnutChart
},
computed: {
...mapGetters(['boardColumnData']),
},
data() {
return {
datacollection: null,
chartOptions: null
}
},
mounted() {
this.fillData();
},
methods: {
fillData() {
this.datacollection = {
datasets: [{
data: [this.boardColumnData[0].total.$numberDecimal, this.boardColumnData[1].total.$numberDecimal, this.boardColumnData[2].total.$numberDecimal, this.boardColumnData[3].total.$numberDecimal],
backgroundColor: [
'#83dd1a',
'#d5d814',
'#fdab2f',
'#1ad4dd'
],
borderColor: [
'#83dd1a',
'#d5d814',
'#fdab2f',
'#1ad4dd'
],
}]
};
this.chartOptions = {
responsive: true,
maintainAspectRatio: false,
};
}
}
}
</script>
DoughtnutChart.vue
<script>
import { Doughnut, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;
export default {
extends: Doughnut,
mixins: [reactiveProp],
props: ['chartData', 'options'],
mounted () {
this.renderChart(this.chartdata, this.options)
}
}
</script>
vuex store:
import axios from 'axios';
const state = {
defaultPosts: [],
boardPosts: [],
boardColumnData: [],
};
const getters = {
boardColumnData: state => state.boardColumnData,
};
const actions = {
getAllBoardPostData: ({commit}) => {
function getBoardColumns() {
return axios.get('http://localhost:5000/api/summary-board/columns');
}
function getBoardPosts() {
return axios.get('http://localhost:5000/api/summary-board/posts');
}
axios.all([getBoardColumns(), getBoardPosts()])
.then(axios.spread((columnData, postData) => {
let rawPosts = postData.data;
let columns = columnData.data;
let posts = Array.from({length: columns.length}, () => []);
rawPosts.forEach((post) => {
// If column index matches post column index value
if(posts[post.column_index]){
posts[post.column_index].push(post);
}
});
columns.forEach((column, index) => {
let columnTotal = 0;
posts[index].forEach((post) => {
columnTotal += post.annual_value;
});
column.total.$numberDecimal = columnTotal;
});
commit('setBoardColumns', columns);
commit('setBoardPosts', posts);
commit('setDefaultPosts', posts);
}))
.catch(error => console.log(error));
}
};
const mutations = {
setDefaultPosts: (state, payload) => {
state.defaultPosts = payload;
},
setBoardPosts: (state, payload) => {
state.boardPosts = payload;
},
setBoardColumns: (state, payload) => {
state.boardColumnData = payload;
}
};
export default {
state,
getters,
actions,
mutations
};
boardColumnData looks like this:
[
{
"name": "Opportunities",
"percentage": {
"$numberDecimal": "0"
},
"total": {
"$numberDecimal": 70269
}
},
{
"name": "Prospects",
"percentage": {
"$numberDecimal": "0.25"
},
"total": {
"$numberDecimal": 0
}
},
{
"name": "Proposals",
"percentage": {
"$numberDecimal": "0.5"
},
"total": {
"$numberDecimal": 5376
}
},
{
"name": "Presentations",
"percentage": {
"$numberDecimal": "0.75"
},
"total": {
"$numberDecimal": 21480
}
},
{
"name": "Won",
"percentage": {
"$numberDecimal": "1"
},
"total": {
"$numberDecimal": 0
}
},
{
"name": "Lost",
"percentage": {
"$numberDecimal": "1"
},
"total": {
"$numberDecimal": 0
}
},
{
"name": "No Opportunity",
"percentage": {
"$numberDecimal": "1"
},
"total": {
"$numberDecimal": 0
}
}
]

Vue should be able to handle the reactivity of updating your components once the data arrives in the store, and since you're passing it into your component correctly, I think you just need to make some small adjustments to make the component more reactive. I'd move the datacollection to a computed property, since it's only dependent on the store's boardColumnData, and then could you move your chartOptions to be defined initially, since it's just static data?
export default {
data: () => ({
// datacollection: null, // remove this
chartOptions: {
responsive: true,
maintainAspectRatio: false,
},
},
//...
computed: {
...mapGetters([
'boardColumnData'
]),
datacollection() { // Property added to computed properties
if (this.boardColumnData.length) { // - check for boardColumnData before using it
return {
datasets: [{
data: [this.boardColumnData[0].total.$numberDecimal, this.boardColumnData[1].total.$numberDecimal, this.boardColumnData[2].total.$numberDecimal, this.boardColumnData[3].total.$numberDecimal],
backgroundColor: [
'#83dd1a',
'#d5d814',
'#fdab2f',
'#1ad4dd'
],
borderColor: [
'#83dd1a',
'#d5d814',
'#fdab2f',
'#1ad4dd'
],
}]
};
} else {
return null;
}
}, // end dataCollection()
},
//... rest of component...
and then in your template, just check for if datacollection is has a value. For instance:
<template>
<div id="chart_section">
<div id="charts" v-if="datacollection">
<DoughnutChart
:chart-data="datacollection"
:options="chartOptions"
class="chart"
/>
</div>
</div>
</template>

You can set the data before the fillData method is called by using async await on the mounted hook.
In AppCharts.vue, inside your mounted() hook call getAllBoardPostData()
`async mounted() {
await this.$store.dispatch('getAllBoardPostData')
this.fillData();
},`
This will fetch the data from your api and populate your store when the component is loaded, and before the fillData() method is called

VueJS filter doesn't work in v-for

I have an error on VueJS with a filter added in a v-for from an Axios response and doesn't understand how to solve it. The filter set_marked return a undefined value if i made a console.log on the value variable.
Here's the HTML:
<main id="app">
<div v-for="item in productList" :key="item.id">
<header>
<h2>{{ item.title }}</h2>
</header>
<article class="product-card">
{{ item.content | set_marked }}
</article>
</div>
</main>
And the Javascript:
var app = new Vue({
el: '#app',
data: {
loading: false,
loaded: false,
productList: []
},
created: function() {
this.loading = true;
this.getPostsViaREST();
},
filters: {
set_marked: function(value) {
return marked(value);
}
},
methods: {
getPostsViaREST: function() {
axios.get("https://cdn.contentful.com/spaces/itrxz5hv6y21/environments/master/entries/1Lv0RTu6v60uwu0w2g2ggM?access_token=a2db6d0bc4221793fc97ff393e541f39db5a65002beef0061adc607ae959abde")
.then(response => {
this.productList = response.data;
});
}
}
})
You can also try it on my codepen:
https://codepen.io/bhenbe/pen/deYRpg/
Thank you for your help !

You are iterating with v-for on productList, but in your code productList is not an array but an object (a dictionary in other words). In fact if you look at it, it has this structure:
{
"sys": {
"space": {
"sys": {
"type": "Link",
"linkType": "Space",
"id": "itrxz5hv6y21"
}
},
"id": "1Lv0RTu6v60uwu0w2g2ggM",
"type": "Entry",
"createdAt": "2017-01-22T18:24:49.677Z",
"updatedAt": "2017-01-22T18:24:49.677Z",
"environment": {
"sys": {
"id": "master",
"type": "Link",
"linkType": "Environment"
}
},
"revision": 1,
"contentType": {
"sys": {
"type": "Link",
"linkType": "ContentType",
"id": "page"
}
},
"locale": "fr-BE"
},
"fields": {
"title": "Retour sur douze années de design",
"content": "Douze années ... vie."
}
}
Iterating through it, on the first iteration will assign to item the value of the "sys" key, which is:
{
"space": {
"sys": {
"type": "Link",
"linkType": "Space",
"id": "itrxz5hv6y21"
}
},
"id": "1Lv0RTu6v60uwu0w2g2ggM",
"type": "Entry",
...
"locale": "fr-BE"
},
and on the second iteration the value of the "fields" key, which has the value:
{
"title": "Retour sur douze années de design",
"content": "Douze années ... vie."
}
Since you are accessing item.title and item.content, and title and content keys are not present in the first object, but only in the second, in the first iteration they will be undefined. So, in the first iteration you are passing undefined as the value of item.content to the set_marked filter.
productList is the response to the GET request, which as we have seen is not returning an array but an object.
If you add to the filter the check if (!value) return ''; it will work, but you are just hiding the problem of the discrepancy between what the API returns and what you are expecting.
If you build productList as an array by filtering through the sub-objects of result.data and keeping only those containing title and contents fields, it works:
function marked(value) {
return value.toUpperCase();
}
var app = new Vue({
el: '#app',
data: {
productList: []
},
created: function() {
this.loading = true;
this.getPostsViaREST();
},
filters: {
set_marked: function(value) {
// console.log(value);
return marked(value);
}
},
methods: {
getPostsViaREST: function() {
axios.get("https://cdn.contentful.com/spaces/itrxz5hv6y21/environments/master/entries/1Lv0RTu6v60uwu0w2g2ggM?access_token=a2db6d0bc4221793fc97ff393e541f39db5a65002beef0061adc607ae959abde")
.then(response => {
// this.productList = response.data;
let data = response.data;
let productList = [], key;
for (key in data) {
let val = data[key];
if ((val.title !== undefined) && (val.content !== undefined)) {
productList.push(val);
}
}
this.productList = productList;
});
}
}
})
#import url('https://fonts.googleapis.com/css?family=Lato');
body{
font-family: 'Lato', sans-serif;
font-size: 1.125rem;
}
#app > div{
max-width: 68ch;
margin: 0 auto;
}
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<main id="app">
<div v-for="item in productList" :key="item.id">
<header>
<h1>{{ item.title }}</h1>
</header>
<article class="product-card" v-html="$options.filters.set_marked(item.content)"></article>
</div>
</main>

Ok, i find in the documentation the solution.
I must add the following code to the filter set_marked to work properly:
if (!value) return '';
value = value.toString();
I currently don't know why this additional lines are required.
I had a second problem because the returned html is escaped by VueJS.
The easiest way to avoid this issue is to used the v-html directive.
To apply a filter in the v-html directive, you must use this syntax :
v-html="$options.filters.set_marked(item.content)"
You can find my pen here : https://codepen.io/bhenbe/pen/deYRpg

Usually I just create a method when I need filtering and then use it when needed in my component.
ie:
methods: {
getPostsViaREST: function() {
axios.get("https://cdn.contentful.com/spaces/itrxz5hv6y21/environments/master/entries/1Lv0RTu6v60uwu0w2g2ggM?access_token=a2db6d0bc4221793fc97ff393e541f39db5a65002beef0061adc607ae959abde")
.then(response => {
this.productList = response.data;
});
},
filterPost(post) {
return _.toUpper(post);
}
}
And then in your component:
<h1>{{ filterPost(item.title) }}</h1>
Find here the full example:
https://codepen.io/Venomzzz/pen/mLrQVm?editors=1011

Create a 2 level json Array using Angular Js

I need to contruct a Json with 2 parts first of all I need to obtain a name of companies from an ApiRest it returns a Json with the name of the companies and a parameter that contains an address for each company that have de members of the company. The Json that I need to construct is something like this:`
[
{name: Company1,
members:
{ member1:
{
name: albert,
age: 16
},
member2:
{
name:joan,
age:18
}
}
},
{name: Company2,
members:
{ member1:
{
name: albert,
age: 16
},
member2:
{
name:joan,
age:18
}
}
}
]
The firts api rest is http://api1.getcompanyies and return :
[{
"_links": {
"url": {
"href": "http://api.company.members/1"
}
},
"name": "Company1",
},
{
"_links": {
"url": {
"href": "http://api.company.members/2"
}
},
"name": "Company2",
}, {
"_links": {
"url": {
"href": "http://api.company.members/3"
}
},
"name": "Company3"}
The second api Rest Response is:
{"employes": [
{
"name": "Mickael Ciani",
"age": "16"
},
{
"name": "Albert dd",
"age": "18"
}
]}
first I tried to do with nested $http but don't works:
$http(firstApi)
.then(function(res) {
$scope.ob = {};
angular.forEach(res.data.teams, function(value, key) {
var companyName = value.name;
$scope.ob[companyName] = {};
$scope.ob[companyName].memberUrl = alue._links.url.href;
$scope.teams2.push(value.name);
$http(paramsPlayers)
.then(function(res2) {
// construct the array
},
function() {}
);
});
return $scope;
},
function() {}
);
Then i tried to do without nested http but still don't work because the contruction of first object is incorrect , i think
$http(firstApi)
.then(function(res) {
$scope.ob = {};
angular.forEach(res.data.teams, function(value, key) {
var companyName = value.name;
$scope.ob[companyName] = {};
$scope.ob[companyName].memberUrl = alue._links.url.href;
$scope.teams2.push(value.name);
});
return $scope;
},
function() {}
);
$http(2apiparams)
.then(function(res2) {
//construct final json
},
function() {}
);
Thank You For all

You have to use $q.all for this scenario. I have written a angular service named CompanyService and a test implementation for the same. Hope this helps. You can use this service in your application. Take a look at promise chaining to get more idea on the implementation
var testData = {
companies: [{
"_links": {
"url": {
"href": "http://api.company.members/1"
}
},
"name": "Company1"
}, {
"_links": {
"url": {
"href": "http://api.company.members/2"
}
},
"name": "Company2"
}, {
"_links": {
"url": {
"href": "http://api.company.members/3"
}
},
"name": "Company3"
}],
memebers: {
"employes": [{
"name": "Mickael Ciani",
"age": "16"
},
{
"name": "Albert dd",
"age": "18"
}
]
}
};
angular.module('app', [])
.factory('CompanyService', function($http, $q) {
var COMPANY_API = 'your company api url';
var service = {};
service.getCompanies = function() {
//comment this for real implementation
return $q.when(testData.companies);
//uncomment this for real api
//return $http.get(COMPANY_API);
};
service.getMemebers = function(url) {
//comment this for real implementation
return $q.when(testData.memebers);
//uncomment this for real api
//return $http.get(url);
};
service.getAll = function() {
return service.getCompanies()
.then(function(companies) {
var promises = companies.map(function(company) {
return service.getMemebers(company._links.url.href);
});
return $q.all(promises)
.then(function(members) {
return companies.map(function(c, i) {
return {
name: c.name,
members: members[i].employes
};
});
});
});
};
return service;
})
.controller('SampleCtrl', function($scope, CompanyService) {
$scope.companies = [];
CompanyService.getAll()
.then(function(companies) {
$scope.companies = companies;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="SampleCtrl">
<pre>{{ companies | json }}</pre>
</div>

Passing list of values as filtertable content

I'm attempting to filter using a list of values with React.
All my "tags" have a "taglevel" to indicate their relevance.
I want it to "cancel out" tags which are the same (ie don't repeat the tag if its' the same).
I want the first row to show all tag.name with "taglevel" of 1.
I want the second row to show all tag.name with "taglevel" of 2 or more.
I am unable to show and filter on the value "tags". Possibly it is around line 145 of my codepen where I have made the error.
Here is what I am trying to achieve:
I've put this together in a codepen.
http://codepen.io/yarnball/pen/GqbyWr?editors=1010
Without success, I have now tried the following:
I tried filtering using this using:
var LevelFilter = React.createClass({
render: function(){
if (!this.props.tags) return null;
return this.props.tags.filter(tag => tag.taglevel === this.props.targetLevel).map(tag => <a onClick={this.props.onClick}>{tag.name}</a>);
}
});
Then trying to get it in my return here:
render: function(){
...
var getUniqueCategories=[];
PHOTODATA.forEach(function(el){
if(getUniqueCategories.indexOf(el.tag) === -1 ) getUniqueCategories.push(el.tag);
})
return (
<div className="overlay-photogallery">
<div className="filter-panel"><b>Tags with taglevel 1 only to be displayed</b>
{
getUniqueCategories.map(function(el,i){
var boundClick = titleToSelect.bind(null,el);
return <LevelFilter onClick={boundClick} targetLevel={1} tags={el.tag} />
})
}
<a className="resetBtn" onClick={this.resetFilter}> Reset Filter </a>
</div>
My data looks like this:
"title": "Into the Wild",
"tag": [
{
"name": "Movie",
"taglevel": 1,
"id": 1
},
{
"name": "Adventure",
"taglevel": 2,
"id": 30
},
{
"name": "Book",
"taglevel": 1,
"id": 2
}
],
"info": []
}

TL;DR
You have some serious issues with your array manipulation and your React components.
Remember that React advocates a specific top down structure and you should read up on it some more. Each React Component should use props as much as possible and ideally only 1 top-level component should hold state.
QUICK ways forward:
Pass all the data down and let each level filter make the list unique.
Seriously, split up your components and let them depend on props as much as possible.
Give variables meaningful names. el is not meaningful and in your case refers to PHOTO items in the PHOTODATA array, tags in a PHOTO and then you use element to mean something else again. Don't go to over the top, but at least be able to identify what the variable is supposed to do.
I've given in and made a codepen with a much updated structure. The behaviour may not be exactly what you're looking for, but look at the code and how it is organised and how information is shared and passed between components.
http://codepen.io/anon/pen/AXGGLy?editors=1010
UPDATE
To allow multiple filters two methods should be updated:
selectTag: function (tag) {
this.setState({
displayedCategories: this.state.displayedCategories.concat([tag])
});
}
tagFilter: function (photo) {
return this.props.displayedCategories.length !== 0 &&
this.props.displayedCategories.every(function(thisTag) {
return photo.tag.some(function (photoTag) {
return photoTag.id === thisTag.id &&
photoTag.taglevel === thisTag.taglevel;
});
});
},
selectTag now appends to the displayedCategories array rather than replacing it.
tagFilter now checks that at least one filter has been applied (remove this.props.displayedCategories.length !== 0 to disable this) so that it doesn't display all by default and then checks that every selected filter is present in each photo, thus making the components additive.
There are further improvements that could be made, such as to disable a level when a filter is applied at that level (one choice per level) or to show a list of applied filters, either through colour on the buttons or a tag list above the results.
(codepen updated with these latest changes)
Ok, there are a few problems with your codepen.
First, on line 137 you extract the tag array from the object:
if(getUniqueCategories.indexOf(el.tag) === -1 ) getUniqueCategories.push(el.tag);
Then, on 146 you extract it again:
return <LevelFilter onClick={boundClick} targetLevel={1} tags={el.tag} />
and again for level 2:
return <LevelFilter onClick={boundClick} targetLevel={2} tags={el.tag} />
For both of these it should be:
return <LevelFilter onClick={boundClick} targetLevel={n} tags={el} />
Which then allows another problem to manifest itself, which is that LevelFilter doesn't return a valid React component (an array is not valid).
return this.props.tags.filter(tag => tag.taglevel === this.props.targetLevel).map(tag => <a onClick={this.props.onClick}>{tag.name}</a>);
should be
return (
<div>
{
this.props.tags
.filter(tag => tag.taglevel === this.props.targetLevel)
.map(tag => <a onClick={this.props.onClick}>{tag.name}</a>)
}
</div>
);
After these changes you should have a much closer attempt to where you want to be.
There are further issues you will need to look into, things like your boundClick function won't work correctly because you only have a list of tags, not PHOTODATA.
However, just a final thought. You might want to break your React components up a little more.
For reference, here is the full code listing from the codepen:
var PHOTODATA = [{
"title": "Into the Wild",
"tag": [
{
"name": "Movie",
"taglevel": 1,
"id": 1
},
{
"name": "Adventure",
"taglevel": 2,
"id": 30
},
{
"name": "Book",
"taglevel": 1,
"id": 2
}
],
"info": []
},{
"title": "Karate Kid",
"tag": [
{
"name": "Movie",
"taglevel": 1,
"id": 1
},
{
"name": "Adventure",
"taglevel": 2,
"id": 30
},
{
"name": "Kids",
"taglevel": 3,
"id": 4
}
],
"info": []
},
{
"title": "The Alchemist",
"tag": [
{
"name": "Book",
"taglevel": 1,
"id": 2
},
{
"name": "Adventure",
"taglevel": 2,
"id": 30
},
{
"name": "Classic",
"taglevel": 2,
"id": 4
},
{
"name": "Words",
"taglevel": 4,
"id": 4
}
],
"info": []
}];
var PhotoGallery = React.createClass({
getInitialState: function() {
return {
displayedCategories: []
};
},
selectTag: function (tag) {
this.setState({
displayedCategories: this.state.displayedCategories.concat([tag])
});
},
resetFilter: function(){
this.setState({
displayedCategories: []
});
},
render: function(){
var uniqueCategories = PHOTODATA.map(function (photo) {
return photo.tag; // tag is a list of tags...
}).reduce(function (uniqueList, someTags) {
return uniqueList.concat(
someTags.filter(function (thisTag) {
return !uniqueList.some(function(uniqueTag) {
return uniqueTag.id === thisTag.id && uniqueTag.taglevel === thisTag.taglevel
});
})
);
}, []);
return (
<div className="overlay-photogallery">
<div className="filter-panel"><b>Tags with taglevel 1 only to be displayed</b>
<PhotoGalleryLevel level={1} tags={uniqueCategories} displayedCategories={this.state.displayedCategories} selectTag={this.selectTag} />
<a className="resetBtn" onClick={this.resetFilter}> Reset Filter </a>
</div>
<div className="filter-panel"><b>Tags with taglevel 2 only to be displayed</b>
<PhotoGalleryLevel level={2} tags={uniqueCategories} displayedCategories={this.state.displayedCategories} selectTag={this.selectTag} />
</div>
<div className="PhotoGallery">
<PhotoDisplay displayedCategories={this.state.displayedCategories} photoData={PHOTODATA} />
</div>
</div>
);
}
});
var PhotoGalleryLevel = React.createClass({
render: function () {
var filteredTags = this.props.tags.filter(function (tag) {
return tag.taglevel === this.props.level;
}.bind(this));
var disabled = this.props.displayedCategories.some(function (tag) {
return tag.taglevel === this.props.level;
}.bind(this));
return (
<div>
{filteredTags.map(function (tag){
return <PhotoGalleryButton tag={tag} selectTag={this.props.selectTag} disabled={disabled} />;
}.bind(this))}
</div>
);
}
});
var PhotoGalleryButton = React.createClass({
onClick: function (e) {
this.props.selectTag(this.props.tag);
},
render: function () {
return (
<a className={this.props.disabled} onClick={this.onClick}>{this.props.tag.name}</a>
);
}
});
var PhotoDisplay = React.createClass({
getPhotoDetails: function (photo) {
console.log(this.props.displayedCategories, photo);
return (
<Photo title={photo.title} name={photo.name} tags={photo.tag} />
);
},
tagFilter: function (photo) {
return this.props.displayedCategories.length !== 0 &&
this.props.displayedCategories.every(function(thisTag) {
return photo.tag.some(function (photoTag) {
return photoTag.id === thisTag.id &&
photoTag.taglevel === thisTag.taglevel;
});
});
},
render: function () {
return (
<div>
{this.props.photoData.filter(this.tagFilter).map(this.getPhotoDetails)}
</div>
);
}
});
var Photo = React.createClass({
getTagDetail: function (tag){
return (
<li>{tag.name} ({tag.taglevel})</li>
);
},
sortTags: function (tagA, tagB) {
return tagA.taglevel - tagB.taglevel;
},
render: function(){
return (
<div className="photo-container" data-title={this.props.title} >
{this.props.title}
<ul>
{this.props.tags.sort(this.sortTags).map(this.getTagDetail)}
</ul>
</div>
);
}
});
ReactDOM.render(<PhotoGallery />, document.getElementById('main'));

With below react component I was able to do what you are looking for,
and here's what i've done in the code,
i) from the PHOTODATA array i have created taglevel1, taglevel2 array
one the render method at the begining.
ii) show them in two rows in showLevel1, showLevel2 function.
iii) when the tag item will be click it will call handleClick function and filter the data and save it to the filterData state.
import React, { Component } from 'react';
import { pluck } from 'underscore';
class Router extends Component {
constructor(props) {
super(props);
this.state = {
filterData: [],
};
this.filterArray = [];
this.PHOTODATA = [{
"title": "Into the Wild",
"tag": [
{
"name": "Movie",
"taglevel": 1,
"id": 1
},
{
"name": "Adventure",
"taglevel": 2,
"id": 30
},
{
"name": "Book",
"taglevel": 1,
"id": 2
}
],
"info": []
},{
"title": "Karate Kid",
"tag": [
{
"name": "Movie",
"taglevel": 1,
"id": 1
},
{
"name": "Adventure",
"taglevel": 2,
"id": 30
},
{
"name": "Kids",
"taglevel": 3,
"id": 4
}
],
"info": []
},
{
"title": "The Alchemist",
"tag": [
{
"name": "Book",
"taglevel": 1,
"id": 2
},
{
"name": "Adventure",
"taglevel": 2,
"id": 30
},
{
"name": "Classic",
"taglevel": 2,
"id": 4
},
{
"name": "Words",
"taglevel": 4,
"id": 4
}
],
"info": []
}];
}
handleClick(item) {
const findItem = this.filterArray.indexOf(item);
if (findItem === -1) {
this.filterArray.push(item);
} else {
this.filterArray.pop(item);
}
const filterData = [];
if(this.filterArray.length) {
this.PHOTODATA.map((item) => {
const data = pluck(item.tag, 'name');
let count = 0;
// console.log(data);
this.filterArray.map((filterItem) => {
const find = data.indexOf(filterItem);
if(find !== -1) {
count++;
}
});
if(count === this.filterArray.length) {
filterData.push(item);
}
});
}
console.log(this.filterArray);
this.setState({ filterData });
}
render() {
const taglevel1 = [];
const taglevel2 = [];
this.PHOTODATA.map((item) => {
item.tag.map((tagItem) => {
if(tagItem.taglevel === 1) {
const find = taglevel1.indexOf(tagItem.name);
if(find === -1) {
taglevel1.push(tagItem.name);
}
} else {
const find = taglevel2.indexOf(tagItem.name);
if(find === -1) {
taglevel2.push(tagItem.name);
}
}
});
});
const showLevel1 = (item, index) => {
return <span onClick={this.handleClick.bind(this, item)}> {item} </span>
};
const showLevel2 = (item, index) => {
return <span onClick={this.handleClick.bind(this, item)}> {item} </span>
};
const showData = (item, index) => {
return <div>{item.title}</div>
};
return (<div>
<ul>Tag Level 1: {taglevel1.map(showLevel1)}</ul>
<ul>Tag Level 2: {taglevel2.map(showLevel2)}</ul>
<div>Movie Title: {this.state.filterData.map(showData)}</div>
</div>);
}}
and here you can see how my outputs look like

PhoneJs: update dynamically slideout

I would like to update a specific field in slideout from database(websql), to show the current user and he can access to his profil.
The targert is : title: log1, for that I used save:function (), and I have one record in database.
I spent many days searching but until now no solution.
Someone can help please.
Index
//...
<script type="text/javascript">
$(function() {
slideOut.app.navigate();
});
slideOut.Home = function (params) {
return {};
};
</script>
</head>
<body>
<div data-options="dxView : { name: 'Home', title: 'Slide Out' } " >
<div data-options="dxContent : { targetPlaceholder: 'content' } " >
</div>
</div>
</body>
</html>
App.config:
window.slideOut = $.extend(true, window.slideOut, {
var log1;
save:function (){
var db = openDatabase("dossierpatient", "1.0", "BD patient", 32678);
db.transaction(function(transaction){
transaction.executeSql("SELECT * FROM patient;", [], function(transaction,result){
for (var i=0; i< result.rows.length; i++) {
log1 = result.rows.item(i).login;
console.log(log1 + "\n ");
}
});
});
return log1;
}
"config": {
"navigationType": "slideout",
"navigation": [
{
"title": log1,
"action": "#",
"icon": "todo"
},
{
"title": "Item 2",
"action": "#",
"icon": "tips"
},
{
"title": "Item 3",
"action": "#",
"icon": "card"
},
{
"title": "Item 4",
"action": "#",
"icon": "map"
}
]
}
});
app.js
window.slideOut = window.slideOut || {};
$(function() {
// Uncomment the line below to disable platform-specific look and feel and to use the Generic theme for all devices
// DevExpress.devices.current({ platform: "generic" });
slideOut.app = new DevExpress.framework.html.HtmlApplication({
namespace: slideOut,
commandMapping: slideOut.config.commandMapping,
navigationType: "slideout",
navigation: getNavigationItems()
});
slideOut.app.router.register(":view", { view: "Home"});
function getNavigationItems() {
return slideOut.config.navigation; // cherche le contenu du slideOut
}
});

Seems like you have a mistake in app.config.js. The declaration of var log1 should be above extending code. The $.extend should have parameters as valid js objects:
var log1;
$.extend(true, window.slideOut, {
save: ...,
...
}
Move over I wouldn't advice you to add such a code in app config file.
To customize the view title (or whatever you have in your view) use viewModel with observables. For example:
slideOut.Home = function (params) {
var title = ko.observable("title");
var viewModel = {
title: title,
viewShowing: function() {
// TODO: put code fetching title from db and set it on done to observable
title("value");
}
};
return viewModel;
};
The code above will set the title of the view.