When I add "Item" to localStorage, and when I refresh the page, everything is fine. But, when I want to add new item, everything starts from the beginning in "ToDo" localStorage.
let ToDo = [];
let addNew = (event) => {
let onelist = {
id: Date.now(),
title: title.value,
description: desc.value,
cat: [],
}
for (var checkbox of checkboxes) {
if (checkbox.checked)
onelist['cat'].push(checkbox.value);
}
ToDo.push(onelist);
window.localStorage.setItem('ToDo', JSON.stringify(ToDo));
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('AddItem').addEventListener('click', addNew);
});
you need to call your localStorage item and edit it
ex:
const ToDo = JSON.parse(localStorage.getItem("ToDo"))
// now work on the ToDo like ToDo.push(...)
// after done save it again to the storage
localStorage.setItem('ToDo', JSON.stringify(ToDo));
what your doing is you're recreating the storage all over again every addNew call
Converting my comment to answer because it is a little more complex
You need to see if there is something in localStorage and if there is, use it.
You cannot JSON.parse undefined or null so a test is needed
const lcTodo = localStorage.getItem("ToDo");
ToDo = lcTodo ? JSON.parse(lcTodo) : [];
It can live in the load
let ToDo;
let addNew = (event) => {
let onelist = {
id: Date.now(),
title: title.value,
description: desc.value,
cat: [],
}
for (var checkbox of checkboxes) {
if (checkbox.checked)
onelist['cat'].push(checkbox.value);
}
ToDo.push(onelist);
window.localStorage.setItem('ToDo', JSON.stringify(ToDo));
}
window.addEventListener('load', () => {
const lcTodo = localStorage.getItem("ToDo");
ToDo = lcTodo ? JSON.parse(lcTodo) : [];
document.getElementById('AddItem').addEventListener('click', addNew);
});
You never read from local storage. Maybe you could do something like this:
// ... your other code
document.addEventListener('DOMContentLoaded', () => {
ToDo = JSON.parse(window.localStorage.getItem('ToDo'));
document.getElementById('AddItem').addEventListener('click', addNew);
});
Related
I'm using Vue js to display and edit details of a person. The person being edited has a list of favourite colours that I want to display as a list of checkboxes. When I change the colours selected, and click the 'Update' button, the person object should be updated accordingly, so I can pass back to the api to update.
I've got as far as displaying the Person object's colours correctly against their respective checkboxes. But I'm struggling with passing the changes to the colour selection, back to the Person object. Below is my checkbox list and details of how I've tried to implement this. Is there a better way of doing this?
I've tried using 'b-form-checkbox-group'. Below is my code.
Please note - The list of available colours is dynamic, but I've temporarily hardcoded a list of colours ('colourData') till I get this working.
Also, in the 'UpdatePerson' method, I've commented out my attempts to get the selected colours mapped back to the Person object.
<template>
<form #submit.prevent="updatePerson">
<b-form-group label="Favourite colours:">
<b-form-checkbox-group id="favColours"
v-model="colourSelection"
:options="colourOptions"
value-field="item"
text-field="name">
</b-form-checkbox-group>
</b-form-group>
<div class="container-fluid">
<b-btn type="submit" variant="success">Save Record</b-btn>
</div>
</form>
</template>
<script>
import service from '#/api-services/colours.service'
export default {
name: 'EditPersonData',
data() {
return {
personData: {
personId: '',
firstName: '',
lastName: '',
colours:[]
},
colourData: [
{ colourId: '1', isEnabled: '1', name: 'Red' },
{ colourId: '2', isEnabled: '1', name: 'Green' },
{ colourId: '3', isEnabled: '1', name: 'Blue' },
],
selectedColours: [],
colourSelection: []
};
},
computed: {
colourOptions: function () {
return this.colourData.map(v => {
let options = {};
options.item = v.name;
options.name = v.name;
return options;
})
}
},
created() {
service.getById(this.$route.params.id).then((response) => {
this.personData = response.data;
this.colourSelection = response.data.colours.map(function (v) { return v.name; });
this.selectedColours = response.data.colours;
}).catch((error) => {
console.log(error.response.data);
});
},
methods: {
async updatePerson() {
//const cs = this.colourSelection;
//const cd = this.colourData.filter(function (elem) {
// if (cs.indexOf(elem.name) != -1) { return elem;}
//});
//this.personData.colours = [];
//this.personData.colours = cd;
service.update(this.$route.params.id, this.personData).then(() => {
this.personData = {};
}).catch((error) => {
console.log(error.response.data);
});
},
}
}
</script>
Any help wold be much appreciated.
Thanks
I got this working by making the below changes to the commented part in the 'updatePerson()' method:
methods: {
async updatePerson() {
const cs = this.colourSelection;
const cd = this.colourData.filter(function (elem) {
if (cs.some(item => item === elem.name)) { return elem; }
});
this.personData.colours = [];
this.personData.colours = cd;
service.update(this.$route.params.id, this.personData).then(() => {
this.personData = {};
}).catch((error) => {
console.log(error.response.data);
});
}
}
Objective : i have a button named "feed data" so when ever i click it the data will be loaded i mean the tree with checkboxes here my requirement is when ever i click it along with data all the check boxes have to be checked on init i tried using
this.treeComp.treeModel.doForAll((node: TreeNode) => node.setIsSelected(true));
but it is not working below is my code
click(tree: TreeModel) {
this.arrayData = [];
let result: any = {};
let rs = [];
console.log(tree.selectedLeafNodeIds);
Object.keys(tree.selectedLeafNodeIds).forEach(x => {
let node: TreeNode = tree.getNodeById(x);
// console.log(node);
if (node.isSelected) {
if (node.parent.data.name) //if the node has parent
{
rs.push(node.parent.data.name + '.' + node.data.name);
if (!result[node.parent.data.name]) //If the parent is not in the object
result[node.parent.data.name] = {} //create
result[node.parent.data.name][node.data.name] = true;
}
else {
if (!result[node.data.name]) //If the node is not in the object
result[node.data.name] = {} //create
rs.push(node.data.name);
}
}
})
this.arrayData = rs;
tree.selectedLeafNodeIds = {};
}
selectAllNodes() {
this.treeComp.treeModel.doForAll((node: TreeNode) => node.setIsSelected(true));
// firstNode.setIsSelected(true);
}
onTreeLoad(){
console.log('tree');
}
feedData() {
const results = Object.keys(this.data.info).map(k => ({
name: k,
children: this.data.info[k].properties
? Object.keys(this.data.info[k].properties).map(kk => ({ name: kk }))
: []
}));
this.nodes = results;
}
feedAnother() {
const results = Object.keys(this.dataa.info).map(k => ({
name: k,
children: this.dataa.info[k].properties
? Object.keys(this.dataa.info[k].properties).map(kk => ({ name: kk }))
: []
}));
this.nodes = results;
}
onActivate(event) {
this.selectedDataList.push(event.node.data);
console.log(this.selectedDataList)
}
onDeactivate(event) {
const index = this.selectedDataList.indexOf(event.node.data);
this.selectedDataList.splice(index, 1);
console.log(this.selectedDataList)
}
below is my stackblitz https://stackblitz.com/edit/angular-hrbppy
Use updatedata and initialized event to update the tree view to check all checkboxes.
app.component.html
<tree-root #tree *ngIf ="nodes" [nodes]="nodes" [options]="options" [focused]="true"
(initialized)="onTreeLoad()"
(updateData)="updateData()"
(select)="onActivate($event)"
(deselect)="onDeactivate($event)">
</tree-root>
It'll initiate tree-root component only if nodes variable is available,
then in the initialized and updateData event call selectAllNodes method to select all checkboxes.
app.component.ts
updateData() {
this.selectAllNodes();
}
onTreeLoad(){
this.selectAllNodes();
}
Refer to this slackblitz for working example.
just, in your function feed data call to your function this.selectAllNodes() enclosed in a setTimeout. You can see your forked stackblitz
setTimeout(()=>{
this.selectAllNodes()
})
NOTE: I see in your code you try to control in diferents ways the items selected. I simplified using a recursive function.
In this.treeComp.treeModel.selectedLeafNodeIds we have the items that are changed, so
getAllChecked()
{
const itemsChecked=this.getData(
this.treeComp.treeModel.selectedLeafNodeIds,null)
console.log(itemsChecked);
}
getData(nodesChanged,nodes) {
nodes=nodes||this.treeComp.treeModel.nodes
let data: any[] = []
nodes.forEach((node: any) => {
//in nodesChanged we has object like {1200002:true,123132321:false...}
if (nodesChanged[node.id]) //can be not changed, and then it's null because
//it's not in object or can be changed to false
data.push({id:node.id,name:node.name})
//or data.push(node.name); //if only need the "name"
if (node.children)
data=[...data,...this.getData(nodesChanged,node.children)]
}
);
return data
}
Updated I updated the function getData to include the "parent" of the node, but looking the code of #Raghul selvam, his function like me more than mine.
getData(nodesChanged,nodes,prefix) {
nodes=nodes||this.treeComp.treeModel.nodes
let data: any[] = []
nodes.forEach((node: any) => {
if (nodesChanged[node.id])
data.push(prefix?prefix+"."+node.name:node.name)
if (node.children)
data=[...data,...this.getData(nodesChanged,node.children,prefix?prefix+"."+node.name:node.name)]
}
);
return data
}
And call it as
this.getData(this.treeComp.treeModel.selectedLeafNodeIds,null,"")
You could add this in your onTreeLoad function. You could add a boolean flag(treeLoaded) for tracking if the tree has loaded or not.
onTreeLoad(tree){
this.selectAllNodes();
this.treeLoaded = true;
}
I have this form in my component :
this.state.customFieldsArray.length > 0 &&
(
<Form
ref="customForm"
type={this.customForm}
options={this.customFormOptions}
/>
)}
I want to add more options to the form (so it render more fields) when i click on a button.
This is the methode that handle the click on the button:
addCustomField = () => {
let newFieldName = this.state.customFieldLabel;
let newField = { newFieldName: "" };
this.customFormOptions.fields[newFieldName] = {
label: newFieldName
};
tempCustomFieldsArray.push(newField);
this.setState({
customFieldsArray: tempCustomFieldsArray
});
};
i have tried this but it didn't work.
this code works for me, create struct form model that call function, and user your condition there
formModel: t.struct({
customFields: this.getCustomFields(),
}),
then you create customFields function like,
getCustomFields = () => {
const customFields = {}
//write your condition here
return t.enums(customFields)
}
I have the following code:
const scenarioList = []
const randomScenario = () => {
return scenarioList[Math.floor(Math.random() * scenarioList.length--)]
}
class Scenario{
setBG(){
//screen.bg = this.bg
//screen.redraw()
}
write(text, buttons, callback){
//$('#gametext > span').html(`<span>${text}</span>`)
//input.setText(buttons)
//input.bindAll(callback)
}
constructor(imgsrc, text, actions, callback){
let img = new Image()
img.src = imgsrc
this.bg = img
this.text = text
this.actions = actions
this.callback = callback
scenarioList.push(this)
console.log(scenarioList)
}
}
I init the class the following (and this is in the global scope)
new Scenario('./bg/1.png', 'You look around and see a huge mountain, what do you do?',[
'Climb It!!',
'Walk around',
'Other Direction',
'Rest',
], [
() => {
alert('a')
},
() => {
alert('a')
},
() => {
alert('a')
},
() => {
alert('a')
},
])
And verify with console.log(scenarioList)
[Scenario]
So its appended, but when I later try to do a console.log() on the same variable it is the following:
[]
Code that causes it:
const startGame = () => {
alert('were here') // this executes at the correct time, but later then variable init.
let scn = randomScenario()
console.log(scenarioList)
scn.write()
scn.setBG()
}
I am not seeing why this would happen, anyone can give me a push in the right direction?
I've found the solution, this code actually removed the element from the array:
const randomScenario = () => {
return scenarioList[Math.floor(Math.random() * scenarioList.length--)]
}
instead I did this:
return scenarioList[Math.floor(Math.random() * scenarioList.length -1)]
While experimenting with nodejs I encountered a problem of enabling isntances creation via Constructors. I create simple cart basket functionality.
I got file cart.js
var items = [];
function addItem (name, price) {
items.push({
name: name,
price: price
});
}
exports.total = function () {
return items.reduce(function (a,b) {
return a + b.price;
}, 0);
};
exports.addItem = addItem;
I run it with node
var cart = require('./cart')
But what if I need to create multiple instances of a Cart?
I tried to refactor my code, creating a Constructor, that holds items[] addItem() and total() functions, like this:
exports.Cart = function () {
var items = [];
function addItem (name, price) {
items.push({
name: name,
price: price
});
}
function total () {
return items.reduce(function (a,b) {
return a + b.price;
}, 0);
}
};
I run it like this:
var cart = require('./cart');
cart.addItem('Pepsi',199); // no problem with this
cart2 = new cart.Cart(); // it gives me undefined can't be a function
I understand, that I can use PROTOTYPE property to add functions and props to my Cart
So I create a second file cart2.js and place something like:
function Cart () {
this.items = [];
}
Cart.prototype.addItem = function (name, price) {
this.items.push({
name: name,
price: price
});
};
Cart.prototype.total = function () {
return this.items.reduce(function (a,b) {
return a + b.price;
}, 0);
};
module.exports = Cart;
And now it works.
But in order to explore all possiblities, I want to know how I can solve it the first way I tried. When I can use it as "instanceble" Class thing and as singleton thing, with only one instance, at the same time.
Can you please advice me how to solve it the way I wanted in the first place?
I'll appreciate if you provide some other ways to solve this task of creating instanceable Classes.
The first option might look like this:
exports.Cart = function () {
var items = [];
// ...other private stuff...
return {
addItem: function (name, price) {
items.push({
name: name,
price: price
});
},
total: function() {
return items.reduce(function (a,b) {
return a + b.price;
}, 0);
}
// ...other public stuff...
}
};
Usage:
var carts = require('carts');
firstCart = carts.Cart();
second = carts.Cart();