Creating and passing a JavaScript Object with parameters/settings/options
Creating and passing a JavaScript Object with parameters/settings/options
I am trying to pass some parameters/settings/options to my external script. These parameters need to be in a script tag that appears in the HTML document. I would like the default settings to be included in the external script but overwritten if the person object that is passed has updated settings. Any advice on this would be most appreciated!
person
$(document).ready(function()
// Default settings to be overwritten
var def_person =
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
;
var person = Object.assign(, def_person, newPerson);
document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName + ". He is " + person.age + " years old!";
);
<!DOCTYPE html>
<html>
<head>
<!-- Will not work if included in head -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p>Creating and passing a JavaScript Object.</p>
<p id="demo"></p>
<script>
newPerson =
firstName : 'Mr.',
lastName : 'Livingston',
age : 42
</script>
</body>
</html>
$("#demo").person({
So learn about templating frameworks where you can update the UI when you alter the data.
– epascarello
Sep 7 '18 at 15:26
@epascarello, thank you for your reply. I am trying to pass updated parameters to my external script so it affects the settings of my JavaScript Object. I'm trying to implement a clean solution kind of like how FancyBox did theirs.
– Peter
Sep 7 '18 at 15:32
2 Answers
2
Use Object.assign or spread operator to merge the values, and pass the input through an exported function.
Object.assign
var def_person =
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
;
function updatePerson(newPerson)
var person = Object.assign(, def_person, newPerson)
// or ...def_person, ...newPerson
document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName + ". He is " + person.age + " years old!";
function init()
updatePerson()
// Testing
init()
updatePerson(
firstName: 'Mr.'
)
<div id='demo'></div>
Passing To Script Via A Global
If you want to pass arguments to a script, without calling a function after the script loads, define them as a global in an inline script, and have your external script read them.
In this example, aScript.js will use newPerson defined in window.
newPerson
<script>
newPerson = firstName:'Mike'
</script>
<script src='aScript.js'></script>
You would then check for newPerson in your external script and merge as needed.
newPerson
or we can also use the spread operator.
var person = ...def_person, ...newPerson console.log(person)– samee
Sep 7 '18 at 15:20
var person = ...def_person, ...newPerson console.log(person)
@samee This is true, sugar, but still true. Will update answer!
– Steven Spungin
Sep 7 '18 at 15:23
@StevenSpungin, thank you for your suggestions. I have updated my code with your edits. I see what you are trying to do and that is what I envisioned. However, there seems to be a disconnect between the passing of the updated parameters in the HTML and the accepting of these new parameters in the external JavaScript file. Any more thoughts?
– Peter
Sep 7 '18 at 15:47
@Peter You have to set the additional value in your script. The caveat is that you have to wait for the DOM to load, too. I will add an init method to show this.
– Steven Spungin
Sep 7 '18 at 16:20
@Peter I added an init function that sets the default value, and an update function. Your script can wait for the DOM to load and then call init. And your consumer can call the update function after load as well.
– Steven Spungin
Sep 7 '18 at 16:27
Maybe through window object?
window
window.person =
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
;
window is global object for your current browser tab, so you can pass something through it. But it is kind of hacky solution.
Then you can read that via window.person
window.person
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
$("#demo").person({is saying you made an extension to jQuery....– epascarello
Sep 7 '18 at 15:25