I’m relatively new to JSON, it’s been a while since I’ve dabbled in JavaScript.
Using W3Schools tryit editor I have a script:
<!DOCTYPE html>
<html>
<body>
<h2>Convert a JSON string into a JavaScript object.</h2>
<p id="demo"></p>
<script>
const myJSON = '{"name":"John", "age":31, "city":"New York"}';
const myData = {
firstname: "deadly",
lastname: "buzz",
age: 23,
city: "Limerick"
};
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myData.firstname;
</script>
</body>
</html>
However, I want my element to refer to fullname
instead of firstname
I want to update my JSON object to look something like
const myData = {
firstname: "deadly",
lastname: "buzz",
age: 23,
city: "Limerick",
fullname: function(){
return firstname +" " + lastname;
}
};
and then call my page like:
document.getElementById("demo").innerHTML = myData.fullname;
which would hopefully output the same as a JSON object outlined like:
const myData = {
firstname: "deadly",
lastname: "buzz",
age: 23,
city: "Limerick",
fullname: "deadlybuzz"
};
But I cannot find anywhere this would work or how to reference this. I’m finding some of the tutorials and references confusing and overwhelming to get to the actual answer of how to do this (or if I can).
Can someone help, either to point to where I can find clean concise references or provide an answer please.
2
Answers
This is working:
It seems like you’re trying to update your JSON object to include a
fullname
property that concatenates thefirstname
andlastname
values. However, there’s a slight issue with your code. Thefullname
property should hold a string value, not a function. Let me guide you through the correct implementation.To achieve the desired output, you can modify your
myData
object like this:Here, we define a getter method named
fullname
that returns the concatenation offirstname
andlastname
. Theget
keyword indicates that this is a getter method rather than a regular function.To display the
fullname
value on your webpage, you can update your code as follows:This will output "deadly buzz" in the HTML element with the ID "demo".
Regarding your request for clean and concise references, I recommend checking out the Mozilla Developer Network (MDN) documentation on JavaScript. They provide comprehensive and reliable information on JavaScript concepts and features, including JSON handling. Here’s the link to the MDN JavaScript documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
Feel free to ask if you have any further questions or need additional assistance!