Vue.js can't copy array to another array - arrays

I'm trying to copy an array to another array and I'm getting that error:
[Vue warn]: Error in render: "TypeError: Cannot read property 'name'
of undefined"
My code:
props: {
languages: {
required: true,
},
},
data() {
return {
translations: [],
}
},
mounted() {
this.setTranslations();
},
methods: {
setTranslations() {
this.translations = this.languages.slice(0);
}
},
Same result with:
this.translations = this.languages
and:
let temp = this.languages.slice(0);
this.translations = temp;
EDIT
If I comment that line:
// this.translations = this.languages.slice(0);
Error disappears.
This also does not work:
this.languages.forEach( function (item) {
this.translations.push(item);
});
I'm getting error:
Error in mounted hook: "TypeError: Cannot read property 'translations'
of undefined"
But this works:
let temp = this.languages.slice(0);
temp.forEach( function ( lang ) {
Vue.set(lang, 'value', {});
Vue.set(lang.value, 'name', "");
Vue.set(lang.value, 'metaKeywords', "");
Vue.set(lang.value, 'metaDescription', "");
});
this.translations = temp;
Although that way my languages array became the same as translations array, which is not what I want.
What I'm doing wrong?

Actually this error comes from template. Template depends on "name" in my translations array. And it cant find it. That's why my last code works.
I don't know why console does not show error when I comment array copy line. It should show the same error.

Related

ANGULAR Components array key in result get value by id

this.crudService.get('user.php?mode=test')
.subscribe((data:any) => {
{ for (var key in data) { this[key] = data[key]; } };
}
);
This use to work on angular 7 now on angular 13 i get this error (look image)
In template i was using the values for example in json string was and array and i had users, in template was {{users}} , {{posts}} etc.. now the this[key] give error , please help me out its very important can't find solution
i'll show an example code, and then applied to your code:
Example
// creating global variables to receive the values
users: any = null;
posts: any = null;
// simulating the data you will receive
data: any[] = [
{users: ['user1', 'user2', 'user3']},
{posts: ['post1', 'post2', 'post3']}
];
getCrudService() {
// access each object of the array
this.data.forEach(obj => {
// getting keys name and doing something with it
Object.keys(obj).forEach(key => {
// accessing global variable and setting array value by key name
this[String(key)] = obj[String(key)]
})
})
}
Apllied to your code
this.crudService.get('user.php?mode=test').subscribe((data:any) => {
data.forEach(obj => {
Object.keys(obj).forEach(key => {
this[String(key)] = obj[String(key)]
});
});
});
I hope it helped you, if you need help, just reply me.

Using Axios with react-chrono

I am not able to get react chrono working when I tried to use the state data. I did a console log on conversationData and is it did print out and as well as conversationtracking. I did get an error that says: "Expected an assignment or function call and instead saw an expression". I am wondering where did I go wrong? here is the code of what I am trying to do:
const data = [
conversationData.map(record => record.conversationtracking.map(items => {
{
{
title: moment(items.conversationdate).format('MMMM DD, YYYY')
cardTitle: items._id
cardSubtitle: items.name
cardDetailedText: items.text
}
}
}))
];
return (
<div>
<h1>sdvsdv</h1>
<Chrono
items={data}
mode="VERTICAL"
/>
</div>
)
You needed return the data after map. Also you were missing , in your object defined inside the second map loop.
PS: The way you are trying to double map the objects will impact the performance. You may need to find a better way to save that extra loop.
// As per the map structure, I hope the data is like this
var conversationData = [{
conversationtracking: [{
_id: 1,
name: 'AVC0',
text: 'RESDS',
conversationdate: '23/12/2020'
}]
}]
const data = [
conversationData.map(record => record.conversationtracking.map(items => {
return {
title: items.conversationdate,
cardTitle: items._id,
cardSubtitle: items.name,
cardDetailedText: items.text
}
}))
];
console.log(data)

Cannot find function variable name in angularjs

I've created following AngularJS code, but I've found Error: Can't find variable: modifyCustomerAgent error when I render call modifyCustomer() my code. Please let me know what's wrong. Thanks.
function modifyCustomer() {
return modifyCustomerAgent(modifyCustomerData, true).then(function(data) {
console.log(JSON.stringify(data));
});
}
$scope.modifyCustomerAgent = (saveFormData, isUpgrade) => {
return {
property: 'value'
};
}
Try something like this
$scope.modifyCustomerAgent = (saveFormData, isUpgrade) => {
return Promise((resolve,reject)=>{
resolve ({
property: 'value'
});
})
}

Ember array serialization

I'm adding objects to an array property of a model, then saving it. When I look at the outgoing request, the property in question is always an empty array.
My custom serializer (extending Ember.RESTSerializer) has this:
DS.ArrayTransform = DS.Transform.extend(
{
deserialize: function(serialized)
{
return (Ember.typeOf(serialized) == "array") ? serialized : [];
},
serialize: function(deserialized)
{
var type = Ember.typeOf(deserialized);
if (type == 'array')
{
return [{foo:'bar'}];
// return deserialized;
}
else if (type == 'string')
{
return deserialized.split(',').map(function(item)
{
return item.trim();
});
}
else
{
return [];
}
}
});
App.register("transform:array", DS.ArrayTransform);
As you can see I've tried passing back an arbitrary array with an object in it, but even then the array always comes out as empty. In the app I create the record like this:
var post = this.store.createRecord('explorePost', {
title: content.get('title'),
text: content.get('text'),
postDate: content.get('postdate'),
publishDate: content.get('publishDate'),
published: content.get('published'),
postType: content.get('postType'),
link: content.get('link,'),
projectDownloads: [],
// projectDownloads: this.model.get('projectDownloads'),
projectLinks: content.get('projectLinks'),
});
then add the objects like this:
this.model.get('projectDownloads').forEach(function (_download) {
console.log('pushing download', _download);
post.get('projectDownloads').pushObject(_download);
});
I can confirm that at time of saving, the post object has a projectDownloads array with one object in it. No matter what I do I can't seem to get it to spit out the contents when it saves. It's definitely going into the custom serializer, and detects it as an array, but you can see something else seems to be overriding it.
Can anyone tell me what I'm doing wrong? My model setup is below:
App.ExplorePost = DS.Model.extend(
{
title: DS.attr('string'),
text: DS.attr('string'),
link: DS.attr('string'),
postDate: DS.attr('momentdate'),
publishDate: DS.attr('momentdate'),
user: DS.belongsTo('user',{async:true}),
postType: DS.attr('string'),
activity: DS.belongsTo('activity',{ inverse: 'explorePost', async:true}),
comments: DS.hasMany('comment',{ inverse: 'explorePost', async: true }),
// projectDownloads: DS.hasMany('projectDownload',{ inverse: 'explorePost'}),
projectDownloads: DS.attr('array'),
// projectLinks: DS.hasMany('projectLink',{ inverse: 'explorePost'}),
projectLinks: DS.attr('string'),
published: DS.attr('boolean', {defaultValue: true}),
// tags: DS.hasMany('tag')
sortdate: function()
{
var datestr = Ember.isEmpty(this.get('postDate')) ? '' : moment(this.get('postDate')).format('YYYYMMDDHHmm');
var fn = (datestr + '____________').slice(0, 12);
return fn;
}.property('postDate')
});
There's no built in DS.attr('array') and a naive implementation would probably not know how to serialize ember-data objects found inside. Did you intend to leave that in there? If you swap it back to the relationships you've commented out and change projectDownloads to work with the promise:
this.model.get('projectDownloads').then(function(downloads) {
downloads.forEach(function(_download){
post.get('projectDownloads').pushObject(_download);
});
});
This should work jsut fine. I put together something nearly identical the other day. http://emberjs.jsbin.com/zolani/3/edit?html,css,js,output
if you array not contain complex object, like array of string, you can use DS.attr(), it will work.

Issues in attaching $scope.$watch to array items

I'm unable to attach $watch to a variable to check its validity within a form.
fName.$valid throws error
TypeError: Cannot read property 'exp' of undefined
at watchFnToHumanReadableString
Array : menuItems
{
name : 'Games',
validationRequired : true,
formName : 'games_action'
}
JS
angular.forEach($scope.menuItems, function(item,i) {
if(item.validationRequired) {
var fName = item.formName;
$scope.$watch(fName.$valid, function(validity) { /* throws error */
domeSomething(validity);
})
}
});
I guess its because fName is a String and has no own Property like $valid.
But watching the string fName+'.$valid' should be possible.
$scope.$watch(fName+'.$valid', function(validity) {
console.log('$watcher triggered: ', validity);
})

Resources