CODEWITHSUNDEEP
javascripthtml
Oscar Cubz
Oscar Cubz

Reputation: 33

How to get the key from a JSON to display into a textarea

<!DOCTYPE html>
<html>
    <head>
        <title>JSON Parser</title>
    </head>
    <body>
        <h2>This is a JSON parser example:</h2>
        <!--data to be parsed: { "Device":"Computer", "Quantity":30, "Specification":"Class A"} -->
        <p id="JSON:">{ "Device":"Computer", "Quantity":30, "Specification":"Class A"}</p>
        <label>Converted to XML</label><br>
        <textarea disabled rows="10" cols="60" id="display"></textarea><br>
        <button onclick="jParse()">Click me to Parse</button>
        <button onclick="toXML()">Click me to Convert</button>
        <script>
            var txt = '{ "Device":"Computer", "Quantity":30, "Specification":"Class A"}';
            //var txt = { "Device":"Computer"};
            var obj = JSON.parse(txt);

            function jParse(){
                alert("Device: " + obj.Device + 
                "\nQuantity: "+ obj.Quantity + 
                "\nSpecification: "+ obj.Specification);
            }
            function toXML(){
                var txt2 = {"Device":"Computer", "Quantity":30, "Specification":"Class A"};

                var keys = Object.keys(txt2);
                alert("yes");
                var xmlText = console.log(keys[0])
                document.getElementById("display").value=xmlText
            }
        </script>
    </body>
</html>

So basically what I'm trying to do here is to get device into the text area as an output. This sort of works but it outputs undefined instead. This code looks messy because I've been trying all sorts of ways to try and make it at least display something, I'm a complete noob in web programming (literally started like a few hours ago).

Upvotes: 0

Views: 74

Answers (4)

Mitya
Mitya

Reputation: 34628

This is happening because you're outputting the result of a call to console.log(), which returns undefined (its job is to write something to the console, not return a value).

You simply need:

document.getElementById("display").value= keys[0];

Note also var is deprecated and you should use let or const these days. Also beaware non-indicative variable/function naming. Your jParse() function, for example, doesn't do any parsing. And your xmlText variable doesn't have anything to do with XML.

Upvotes: 2

J0mk
J0mk

Reputation: 143

If you are trying to display "Computer" in the textArea (key[0] is "Device"), then to access the value in your Object you could do txt[keys[0]], so you can access the value "Device" of the txt Object. Also, you have stored a console.log() inside a function, you don't get any value from that variable when you try to access it later just store it like this.

xmlText = txt[keys[0]]

then

console.log(xmlText)

if you want to console log it

if you then do

document.getElementById("display").value = xmlText

the value "Computer" will appear in the textbox

Upvotes: 1

Shivansh Seth
Shivansh Seth

Reputation: 361

here you go :

<!DOCTYPE html>
<html>
    <head>
        <title>JSON Parser</title>
    </head>
    <body>
        <h2>This is a JSON parser example:</h2>
        <!--data to be parsed: { "Device":"Computer", "Quantity":30, "Specification":"Class A"} -->
        <p id="JSON:">{ "Device":"Computer", "Quantity":30, "Specification":"Class A"}</p>
        <label>Converted to XML</label><br>
        <textarea disabled rows="10" cols="60" id="display"></textarea><br>
        <button onclick="jParse()">Click me to Parse</button>
        <button onclick="toXML()">Click me to Convert</button>
        <script>
            var txt = '{ "Device":"Computer", "Quantity":30, "Specification":"Class A"}';
            //var txt = { "Device":"Computer"};
            var obj = JSON.parse(txt);

           
           
            

            function jParse(){
                alert("Device: " + obj.Device + 
                "\nQuantity: "+ obj.Quantity + 
                "\nSpecification: "+ obj.Specification);
            }
            function toXML(){
                var txt2 = {"Device":"Computer", "Quantity":30, "Specification":"Class A"};

                var keys = Object.keys(txt2);
                alert(keys);
                var xmlText = keys;
                document.getElementById("display").value=xmlText
            }


        </script>
    
    
    
    </body>


</html>

Issue is console.log(keys[0]) is for print into browser console. so you need to perform assignment operation here like

var xmlText = keys;

Upvotes: 0

Rahul Dahal
Rahul Dahal

Reputation: 182

If you are trying to set the value of a key to an element then, on the line that reads var xmlText = console.log(keys[0]) change it to,

var xmlText = text2[keys[0]]

Upvotes: 1

Related Questions