I am trying to modify the value of a module value in AngularJS but it does not persist. If I click around the app after its modified its fine but the moment I refresh the page it get returned to the default value. How can I change the value and have it persist while the app is being used.
Here is the value:
;(function() {
angular.module('app.common')
.value('config', {
date: {
dateFormat: 'YYYY-MM-DD',
angularDateFormat: 'yyyy-MM-d',
d3DateFormat: '%Y-%m-%d %I:%M %p'
},
multiLineSelectMode: 'single',
labels: {
success: { single: 'Success', plural: 'Successes' },
warning: { single: 'Warning', plural: 'Warnings' },
danger: { single: 'Danger', plural: 'Dangers' },
dashboard: { title: 'Dashboard', single: 'Dashboard', plural: 'Dashboards' },
operations: { title: 'Operations', single: 'Operation', plural: 'Operations' },
locations: { title: 'Locations', single: 'Location', plural: 'Locations' },
devices: { title: 'Devices', single: 'Device', plural: 'Devices' },
customers: { title: 'Customers', single: 'Customer', plural: 'Customers' },
transactions: { title: 'Transactions', single: 'Transaction', plural: 'Transaction' },
payments: { title: 'Payments', single: 'Payment', plural: 'Payments' },
inventory: { title: 'Inventory', single: 'Inventory', plural: 'Inventories' },
iotCampaigns: { title: 'IoT Campaigns', single: 'IoT Campaign', plural: 'IoT Campaigns' },
marketing: { title: 'Marketing', single: 'Campaign', plural: 'Campaigns' },
incidents: { title: 'Incidents', single: 'Incident', plural: 'Incidents' },
reporting: { title: 'Reporting', single: 'Report', plural: 'Reports' }
}
}
);
})();
and here is where I am trying to modify it from another module/file
;(function() {
angular
.module('app.configuration')
.controller('LabelConfigCtrl', LabelConfigCtrl);
LabelConfigCtrl.$inject = ['config', 'ConfigurationService'];
function LabelConfigCtrl(config, ConfigurationService) {
var vm = this;
vm.labelModel = config.labels;
vm.updateConfig = function() {
config = vm.labelModel; <-- this does not persist if I refresh the page
}
}
})();
vm.labelModel is attached to a big form that modifies the value through ng-model
Related
I've created a React table, and I have a data in Elasticsearch. I have successfully fetched data from Elasticsearch using API(fetch) call; this data is being displayed in the console but not in screen. How to solve this problem?
this code will fetch data from Elasticsearch, then display it on React Table.
import './App.css';
import Table from './pages/Table';
import { useEffect, useState } from 'react';
function App() {
const [dataTable, setDataTable] = useState([]);
// this is our JOSN data to be displayed in the console
var myHeaders = new Headers();
myHeaders.append("Authorization", "Basic xxcxxxxxxxxx==");
myHeaders.append("Content-Type", "application/json");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
// this is fetching data from Elastic and working successfully
useEffect(() => {
fetch("https://192.168.1.3:9200/myapp/_doc/1", requestOptions)
.then(response => response.json())
.then(result => setDataTable(result.data)) // the error comes here
.catch(error => console.log('error', error));
}, []);
console.log(dataTable);
const column = [
{ heading: 'Id', value: '_index' },
{ heading: 'Index', value: '_index' },
{ heading: 'Score', value: '_score' },
{ heading: 'Timestamp', value: '#timestamp' },
{ heading: 'Version', value: '#version' },
{ heading: 'Ephemeral Id', value: 'agent.ephemeral_id' },
{ heading: 'Agent Id', value: 'agent.id' },
{ heading: 'Agent name', value: 'agent.name' },
{ heading: 'Agent type', value: 'agent.type' },
{ heading: 'Agent Version', value: 'agent.version' },
{ heading: 'esc version', value: 'esc.version' },
{ heading: 'event original', value: 'event.original' },
{ heading: 'host architecture', value: 'host.architecture' },
{ heading: 'host hostname', value: 'host.hostname' },
{ heading: 'host id', value: 'host.id' },
{ heading: 'host ip', value: 'host.ip' },
{ heading: 'host mac', value: 'host.mac' },
{ heading: 'host name', value: 'host.name' },
{ heading: 'host os build', value: 'host.os.build' },
{ heading: 'host os family', value: 'host.os.family' },
{ heading: 'host os kernel', value: 'host.os.kernel' },
{ heading: 'host os name', value: 'host.os.name' },
{ heading: 'host os platform', value: 'host.os.platform' },
{ heading: 'host os type', value: 'host.os.type' },
{ heading: 'host os version', value: 'host.os.version' },
{ heading: 'input type', value: 'input.type' },
{ heading: 'log file path', value: 'log.file.path' },
{ heading: 'log offset', value: 'log.offset' },
{ heading: 'message', value: 'message' },
{ heading: 'tags', value: 'tags' },
]
// console.log(column)
return (
<div className="App" >
<h1>eSafe Table</h1>
<Table data={dataTable} column={column} />
</div>
);
}
export default App;
I'm pretty new to the headless cms of sanity.io. As I'm trying to fetch my data im getting this error but couldn't figure out why or where the problem could be exactly.
Anybody some ideas?
Error: Error serializing .images returned from getServerSideProps in "/company/[slug]".
Reason: undefined cannot be serialized as JSON. Please use null or omit this value.
//the slug file
export const Company = ({ title, slug, logo, images, currency, categories, body, url, location }) => {
console.log(title, slug, logo, images, currency, categories, body, url, location )
return <>Content</>
};
export const getServerSideProps = async pageContext => {
const pageSlug = pageContext.query.slug;
if (!pageSlug) {
return {
notFound: true
}
}
const query = encodeURIComponent(`*[ _type == "company" && slug.current == "${pageSlug}" ]`);
const url = `https://op5ktqwm.api.sanity.io/v1/data/query/production?query=${query}`;
const result = await fetch(url).then(res => res.json());
const post = result.result[0];
if (!post) {
return {
notFound: true
}
} else {
return {
props: {
title: post.title,
slug: post.slug,
logo: post.logo,
images: post.images,
currency: post.currency,
categories: post.categories,
body: post.body,
url: post.url,
location: post.location
}
}
}
}
export default Company;
//backend code structure
export default {
name: 'company',
title: 'Company',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
{
name: 'slug',
title: 'Slug',
type: 'slug',
options: {
source: 'title',
maxLength: 96,
},
},
{
name: 'logo',
title: 'Logo',
type: 'image',
},
{
name: 'images',
title: 'Images',
type: 'array',
of: [{type: 'companyImage'}]
},
{
name: 'currency',
title: 'Currency',
type: 'array',
of: [
{
type: 'reference',
to: {type: 'currency'},
},
],
},
{
name: 'categories',
title: 'Categories',
type: 'array',
of: [
{
type: 'reference',
to: {type: 'category'},
},
],
},
{
name: 'body',
title: 'Body',
type: 'localeBlockContent',
},
{
name: 'url',
title: 'URL',
type: 'string',
},
{
name: 'location',
title: 'Location',
type: 'geopoint',
},
],
preview: {
select: {
title: 'title',
manufactor: 'manufactor.title',
media: 'defaultProductVariant.images[0]',
},
},
}
I have two arrays ,and want to filter out matches and create a new array only containing objects that did not match in either array,
const firstObjectArray = [
{ name: 'six', show: 'six times' },
{ name: 'Jonas', show: 'Dark' },
{ name: 'Mulder', show: 'The X Files' },
{ name: 'Ragnar', show: 'Vikings' },
{ name: 'Scully', show: 'The X Files' },
];
const secondObjectArray = [
{ name: 'Eleven', show: 'Stranger Things' },
{ name: 'Jonas', show: 'Dark' },
{ name: 'Mulder', show: 'The X Files' },
{ name: 'Ragnar', show: 'Vikings' },
{ name: 'Scully', show: 'The X Files' },
];
something like
var remainingArr = firstObjectArray.filter(data => data.name !== secondObjectArray.contains.name);
so that i am only left with
remainingArr = [{ name: 'six', show: 'six times' }]
as it was the only one that did not match
const firstObjectArray = [
{ name: 'six', show: 'six times' },
{ name: 'Jonas', show: 'Dark' },
{ name: 'Mulder', show: 'The X Files' },
{ name: 'Ragnar', show: 'Vikings' },
{ name: 'Scully', show: 'The X Files' },
];
const secondObjectArray = [
{ name: 'Eleven', show: 'Stranger Things' },
{ name: 'Jonas', show: 'Dark' },
{ name: 'Mulder', show: 'The X Files' },
{ name: 'Ragnar', show: 'Vikings' },
{ name: 'Scully', show: 'The X Files' },
];
const result = firstObjectArray.filter(item => {
return !secondObjectArray.some(i => i.name === item.name && item.show === i.show)
})
console.log(result)
Feel free to tell me to go away (I'm a newbie to angular and javascript), but how would I get started on saving this angularJS to localStorage? Is it something that can be done relatively painlessly by creating a saving function in the add()? I've seen that angular has its own local-storage but can this be done without that? Pen: http://codepen.io/kiddigit/pen/LZVXMV
angular.module('app', []);
angular.module('app').controller("MainController", function(){
var vm = this;
vm.title = 'Movie Database';
vm.searchInput = '';
vm.shows = [
{
title: 'Game of Thrones',
actor: 'Dudes',
year: 2011,
favorite: true
},
{
title: 'Walking Dead',
actor: 'More dudes',
year: 2010,
favorite: false
},
{
title: 'The Goonies',
actor: 'The Coreys',
year: 2002,
favorite: true
},
{
title: 'Firefly',
actor: 'Dunno',
year: 2002,
favorite: false
},
{
title: 'Bullit',
actor: 'McQueen',
year: 2013,
favorite: true
},
];
vm.orders = [
{
id: 1,
title: 'Year Ascending',
key: 'year',
reverse: false
},
{
id: 2,
title: 'Year Descending',
key: 'year',
reverse: true
},
{
id: 3,
title: 'Title Ascending',
key: 'title',
reverse: false
},
{
id: 4,
title: 'Title Descending',
key: 'title',
reverse: true
}
];
vm.order = vm.orders[0];
vm.new = {};
vm.addShow = function() {
vm.shows.push(vm.new);
vm.new = {};
};
});
The browser (the window object) has an object called localStorage, simple as that. If you want to save an object to the local storage you better stringify it first using json.
Example:
// inside your controller:
function saveMovie() {
var selectedMovieString = json.stringify(this.selectedMovie); // for example;
localStorage.setItem("selectedMovie", selectedMovieString);
}
I am using KendoUI scheduler with AngularJS.
I am declaring the scheduler options in accordance with the documentation, pretty standard stuff. See below:
What I would like to do is be able to update $scope.schedulerOptions and have those changes reflected in the UI. When I make changes to $scope.schedulerOptions nothing changes in the UI.
Any ideas on how to do this?
$scope.schedulerOptions = {
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
{ type: "workWeek", selected: true },
"week",
"month",
],
eventTemplate: "<span class='custom-event'>{{dataItem.title}}</span>",
allDayEventTemplate: "<div class='custom-all-day-event'>{{dataItem.title}}</div>",
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/tasks",
dataType: "jsonp"
},
update: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
type: "PUT"
},
create: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/create",
type: "POST"
},
destroy: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
type: "DELETE"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "TaskID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
}
},
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
};
According to this post at telerik forum you can change the values after initialization modifying HTML to <div kendo-scheduler="sched" k-options="options"></div> and the accessing sched as a model variable $scope.sched.setOptions(...);