I'm just starting with Arrays, Objects, and JSON - so hopefully there's just something simple I'm overlooking here. I'm encountering an error when attempting to add (push) a new item into my json object.
I'm encountering the following error: Result of expression 'library.push' [undefined] is not a function (towards the bottom of my code snippet).
// This is my JSON object generated from a database
var library = {
"Gold Rush" : {
"foregrounds" : ["Slide 1","Slide 2","Slide 3"],
"backgrounds" : ["1.jpg","","2.jpg"]
},
"California" : {
"foregrounds" : ["Slide 1","Slide 2","Slide 3"],
"backgrounds" : ["3.jpg","4.jpg","5.jpg"]
}
}
// These will be dynamically generated vars from editor
var title = "Gold Rush";
var foregrounds = ["Howdy","Slide 2"];
var backgrounds = ["1.jpg",""];
function save () {
// If title already exists, modify item
if (library[title]) {
// Replace values with new
library[title].foregrounds = foregrounds;
library[title].backgrounds = backgrounds;
// Save to Database. Then on callback...
document.write('Changes Saved to <b>'+title+'</b>');
// If title does not exist, add new item
else {
// Format it for the JSON object
var item = ('"'+title+'" : {"foregrounds" : '+foregrounds+',"backgrounds" : '+backgrounds+'}');
// THE PROBLEM SEEMS TO BE HERE??
// Error: "Result of expression 'library.push' [undefined] is not a function"
library.push(item);
// Save to Database. Then on callback...
document.write('Added: <b>'+title+'</b>');
}
}
save();
This question is related to
javascript
jquery
json
library is an object, not an array. You push things onto arrays. Unlike PHP, Javascript makes a distinction.
Your code tries to make a string that looks like the source code for a key-value pair, and then "push" it onto the object. That's not even close to how it works.
What you want to do is add a new key-value pair to the object, where the key is the title and the value is another object. That looks like this:
library[title] = {"foregrounds" : foregrounds, "backgrounds" : backgrounds};
"JSON object" is a vague term. You must be careful to distinguish between an actual object in memory in your program, and a fragment of text that is in JSON format.
If your JSON is without key you can do it like this:
library[library.length] = {"foregrounds" : foregrounds,"backgrounds" : backgrounds};
So, try this:
var library = {[{
"title" : "Gold Rush",
"foregrounds" : ["Slide 1","Slide 2","Slide 3"],
"backgrounds" : ["1.jpg","","2.jpg"]
}, {
"title" : California",
"foregrounds" : ["Slide 1","Slide 2","Slide 3"],
"backgrounds" : ["3.jpg","4.jpg","5.jpg"]
}]
}
Then:
library[library.length] = {"title" : "Gold Rush", "foregrounds" : ["Howdy","Slide 2"], "backgrounds" : ["1.jpg",""]};
push is an Array method, for json object you may need to define it
this should do it:
library[title] = {"foregrounds" : foregrounds,"backgrounds" : backgrounds};
You can achieve this using Lodash _.assign function.
library[title] = _.assign({}, {'foregrounds': foregrounds }, {'backgrounds': backgrounds });
// This is my JSON object generated from a database_x000D_
var library = {_x000D_
"Gold Rush": {_x000D_
"foregrounds": ["Slide 1", "Slide 2", "Slide 3"],_x000D_
"backgrounds": ["1.jpg", "", "2.jpg"]_x000D_
},_x000D_
"California": {_x000D_
"foregrounds": ["Slide 1", "Slide 2", "Slide 3"],_x000D_
"backgrounds": ["3.jpg", "4.jpg", "5.jpg"]_x000D_
}_x000D_
}_x000D_
_x000D_
// These will be dynamically generated vars from editor_x000D_
var title = "Gold Rush";_x000D_
var foregrounds = ["Howdy", "Slide 2"];_x000D_
var backgrounds = ["1.jpg", ""];_x000D_
_x000D_
function save() {_x000D_
_x000D_
// If title already exists, modify item_x000D_
if (library[title]) {_x000D_
_x000D_
// override one Object with the values of another (lodash)_x000D_
library[title] = _.assign({}, {_x000D_
'foregrounds': foregrounds_x000D_
}, {_x000D_
'backgrounds': backgrounds_x000D_
});_x000D_
console.log(library[title]);_x000D_
_x000D_
// Save to Database. Then on callback..._x000D_
// console.log('Changes Saved to <b>' + title + '</b>');_x000D_
}_x000D_
_x000D_
// If title does not exist, add new item_x000D_
else {_x000D_
// Format it for the JSON object_x000D_
var item = ('"' + title + '" : {"foregrounds" : ' + foregrounds + ',"backgrounds" : ' + backgrounds + '}');_x000D_
_x000D_
// THE PROBLEM SEEMS TO BE HERE??_x000D_
// Error: "Result of expression 'library.push' [undefined] is not a function"_x000D_
library.push(item);_x000D_
_x000D_
// Save to Database. Then on callback..._x000D_
console.log('Added: <b>' + title + '</b>');_x000D_
}_x000D_
}_x000D_
_x000D_
save();<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>Source: Stackoverflow.com