skip to Main Content

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


  1. This is working:

        const myData = {
        firstname: "deadly",
        lastname: "buzz",
        age: 23,
        city: "Limerick",
        fullname: function(){
               return myData.firstname +" " + myData.lastname;
            }
        };
    
    
    myData.fullname() // 'deadly buzz'
    
    Login or Signup to reply.
  2. It seems like you’re trying to update your JSON object to include a fullname property that concatenates the firstname and lastname values. However, there’s a slight issue with your code. The fullname 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:

    const myData = {
      firstname: "deadly",
      lastname: "buzz",
      age: 23,
      city: "Limerick",
      get fullname() {
        return this.firstname + " " + this.lastname;
      }
    };
    

    Here, we define a getter method named fullname that returns the concatenation of firstname and lastname. The get 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:

    document.getElementById("demo").innerHTML = myData.fullname;
    

    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!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search