Next js, Lottie Cannot add property completed, object is not extensible - javascript

I have a problem with Lottie's animation.
I fetch a JSON file (Lottie Animation) from Contentful, and I want to display it by Lottie Component.
But I receive an error: "TypeError: Cannot add property completed, the object is not extensible".
I don't know why I receive this error because, when I add a local JSON file from /public to property 'animationData', all works fine.
I tried everything. But local files always work well but json from cms does not.
Contentful also returned proper data

first of all it would have been better if you posted you code ss here but nevertheless i can still guess it :D, i have worked previously with lottie on react apps, so,
have you downloaded from lottiefiles because you have written "from contentful", i dont know what is that but as long as you are using the predefined method it comes along with to run a JSON lottie it should be working fine.
"when I add a local JSON file from /public to property 'animationData', all works fine." , try tinkering with the method's attributes, see if it comes.
// const defaultOptions = {
// loop: true,
// autoplay: true,
// animationData: breakingnews,
// rendererSettings: {
// preserveAspectRatio: "xMidYMid slice"
// }
// };
this was a piece i used in mine,
if this doesn't answer your question experiment on it, i'm sure will find something. happy coding. :)

Related

p5.js loadImage(); returning null with error 'SCRIPT5007: SCRIPT5007: Unable to get property 'x' of undefined or null reference'

I am currently recoding a game and im having problems with the rendering engine. i think that the problem is in my file paths, because the old (and identically coded) version works just fine.
I've tried moving the program to another disk, changing the name, including full file path, including relative file path and ive tried to put the output into the debug console, which only crashes the console.
I've also set up a check that makes sure the program doesnt display the tile when its value is null, but that just makes it so that it doesnt do anything.
this is the file path for the textures:
D:\programs\HTML5_JavaScript\mipmap\assets\textures\tileSetSand
this is my current code for the texture importer:
tileSetSand=[];
players=[];
function setup(){
for(i=0;i<115;i++){
print(i);
tileSetSand[i]=loadImage('D:/programs/HTML5_JavaScript/mipmap/assets/textures/tileSetSand/tile ('+i+').PNG');
}
for(i=0;i<2;i++){
players[i]=loadImage('D:/programs/HTML5_JavaScript/mipmap/assets/textures/player ('+i+').PNG');
}
}
this is the old, functioning code
function setup() {
tileSetSand=[];
for(i=0;i<117;i++){
tileSetSand[i]=loadImage('D:/maart/Documents/Processing/mipmap_local/assets/sprite ('+i+').PNG');
}
//loading all the images and sprites into an array
createCanvas(1000,1000);
}
this is where i utilize the images (this.texture is 3)
display : function(){
if(tileSetSand[this.texture]!=null){
image(tileSetSand[this.texture],this.xPos,this.yPos,20,20);
}
},
the expected output is this function drawing the image specified by this.texture into the canvas at xPos,yPos.
However, it does not.
i have no clue why.
It appears that i was using another setup() function elsewhere in the project, and that caused the setup() here to not work.
I found this out when i placed my variable callers into my setup(), which caused those variables to become null, as they werent being called properly.

Counting files with metadata in a GridFS

I've been trying to implement a feature into a website that displays the number of unread files in a GridFS. Each file, when stored, is defined with the metadata completed: "false". In the following helper function, I try to find the number of files that are still labeled with this data.
incomplete_diagnostics_count: function() {
return Diagnostics.find({metadata: {completed: "false"}}).count();
},
As of now, this code doesn't work. How would I go about fixing this?
There wasn't a distinct answer anywhere on the internet, but apparently it was just a syntax error:
incomplete_diagnostics_count: function() {
return Diagnostics.find({},{metadata: {completed: "false"}}).count();
},
The extra bracket in the find() dependents fixed it.

CreateJS - Type not recognized error thrown during sound registration

I am trying to load sounds through the SoundJS sound registration, and getting the following error:
createjs.js:15 Uncaught Error: Type not recognized.
I figure that the soundjs library is having issues either locating my files or having trouble with the file extensions, but I am using .ogg, which is inline with all the examples I've seen.
Here is my code:
createjs.Sound.alternateExtensions = ["mp3", "ogg"];
createjs.Sound.on("fileload", function(event) {
console.log(event);
}, this);
for (var i = 0; i < soundManifest.length; i++) {
soundManifest[i].loaded = false;
console.log("loading " + soundManifest[i].src);
createjs.Sound.registerSound(soundManifest[i].src, soundManifest[i].id)
}
soundManifest is an array of objects with a source item giving the path to the .ogg files, and an id. I've double and triple checked the path names, so pretty sure that's not it. Any ideas? I am developing on Chrome.
Thanks for posting a github link. It was helpful. Fortunately, I have a super simple answer for you.
Rename the "Object" class you made in Main.js, and you should be good to go.
-- The long answer --
I tossed a breakpoint the error that is thrown, and it showed that when SoundJS tries to create a LoadItem, it fails. This is because it should be treating the LoadItem it receives as an Object, but the line below is failing:
} else if (value instanceof Object && value.src) {
// This code should be executed
}
At first I thought there was a bug in SoundJS that we had somehow missed in the last 2 years, but closer inspection showed that object prototypes in your application are messed up. If you open any browser window, and hit the console, this will return true:
({}) instanceof Object
// true
However while running your app, it returns false.
The issue became clear when I removed all your other classes other than CreateJS and main, and then tried this:
new Object();
// Throws an error that includes info about "Victor"
In main.js, you are defining an "Object" class, which extends a CreateJS Shape. It is global because there is no method closure around the code, so it overwrites the global Object class/prototype.
The reason I included this explanation, is because I couldn't figure out what was going on until I had my steps to show that prototypes were broken in the app mostly written out before the reason dawned on me. I thought it might be of some interest :)

meteor / javascript function not working when in another file

This is interesting.
I have a file structure as such:
/
/client/
/server/
The app I'm working on is working fine, I have many .js files in the /client/ folder, all separated into logical (to me) sections. They work fine when compiled.
I have added a new file though, called miscFunctions.js to the mix and added a simple function and saved:
function sessionDataReset(){
//Set the New Organisation Session data to be false, meaning we're not adding a new organisation
return Session.set('addingOrganisation', false);
};
This function, when called returns the following error:
Uncaught ReferenceError: sessionDataReset is not defined
When I move that exact code though to the .js file I'm calling it from it works fine.
Why is the error happening as I was of the understanding what I'm trying to do can be done with Meteor?
Any advice greatly appreciated.
Rob
First try declaring your file this way:
sessionDataReset = function() {
//Set the New Organisation Session data to be false,
//meaning we're not adding a new organisation
return Session.set('addingOrganisation', false);
};
This ensures the function will be visible globally.
(#user1623481 Meteor wraps files as IIFE's when it compiles them, creating a function scope that was limiting the visibility of this function.)
This will most likely resolve it, but following this check the file load order in the Meteor Docs

KnockoutJS and External JSON

I'm currently experimenting with Knockout JS just to get the hang of the library and all of it's capabilities and I appear to have run into a wall with handling external JSON data.
In the Codepen below I have a dummy observable array which is working fine. Commented out below that is the actual JSON data I want to experiment with. It takes an external feed using $.GETJSON and maps that to filter the results to extract only the data I want to use in my HTML template.
My problem is that I can't seem to get the external JSON to bind to the HTML as I always get 'tracks' is not defined, or sometimes even an empty console (which is always helpful).
Can anybody point me in the right direction of how to handle external JSON? I've done searching around and I can't see much info dedicated to handling external JSON.
http://codepen.io/anon/pen/Hnamf
Looking at your codepen, it isn't entirely clear how you want this to work, but it certainly can be made to work. Just as a quick demo, I moved your $.getJSON inside your init function so that it can actually have access to the view model and then in the callback set what you are getting to the property self.tracks. Since you were binding "tracks", I changed "title" to "tracks", but you can obviously do whatever makes sense to you:
$.getJSON('http://api.soundcloud.com/users/guy-j/tracks.json?client_id=YOUR_CLIENT_ID', {limit: 200}, function(data) {
vm.tracks($.map(data, function (track) {
return {
artwork: track.artwork_url,
duration: track.duration,
permalink: track.permalink_url,
listens: track.playback_count,
stream: track.stream_url,
track: track.title
};
}));
});
http://codepen.io/anon/pen/HAkhy

Categories