Javascript - How to display text/string of obj.element in this case

Question

This is for use in a simple webserver made with a microcontroller. Consider that the microcontroller application have a total of 256 properties, each one with its own value. When the browser makes a request to read the properties from the microcontroller, a random number of properties will be returned in JSON format, ranging from fields perperty1 to property256. For example, properties 1, 15, 20, 60, 123, 200, 230, 256, that is, in almost all answers of the microcontroller it doesn't contain 256 properties, its a random number of properties.

I want to display the values of the properties which were received from the microcontroller in a text box in html, but the test code below is not working, I am getting unexpected output "property1 = undefined, property256 = undefined, ". I want it outputs "property1 = 1234, property256 = 5678, "

<head>
    <title>JAVASCRIPT_TEST</title>
    <meta charset="UTF-8"/>
</head>

<body>

    <input type="text" id="result_text" size="150">
    <input type="button" onclick="test()" value="TEST">

    <script>

        function test() 
        {
            document.getElementById("result_text").value = "";

            var obj = JSON.parse('{"property1":"1234","property256":"5678"}');

            for (var i=1; i<=256; i++) 
            {
                var property = "property"+i;

                if (property in obj) 
                {
                    document.getElementById("result_text").value += ( property+" = "+obj.property+", " );
                }
            }
        }

        </script>

</body>

score 2 · Answer 1 · answered Nov 09 '19 at 15:40

you should use obj[property] tho retrieve the value of property (bracket notation, see MDN). Like this:

const someProps = {
  p1: "p1!",
  p6: "p6!",
  p123: "p123!",
  p201: "p201!",
};
const result = document.querySelector("#result");

for (let prop in someProps) {
  result.textContent += `${prop} = ${someProps[prop]}\n`;
  //                                          ^ here
}

<pre id="result"></pre>

score 1 · Accepted Answer · answered Nov 09 '19 at 15:38

1

When you say obj.property, you are trying to access a property called "property". You should use the bracket notation with dynamic values, as in obj[property].

More information at MDN: Property accessors

answered Nov 09 '19 at 15:38

radulfr

616
3
6

Your answer is correct, thanks. To be able to vote in your answer, I need 15 points and I currently have 13. Could you vote in my question so then I can vote in your answer? – abomin3v3l Nov 09 '19 at 15:46

score 1 · Answer 3 · answered Nov 09 '19 at 15:44

With obj.hasOwnProperty() you can ckeck if an object contains a specific property, to get the property itself you can use obj[property] or object.property

You can take a look at this debate: JavaScript property access: dot notation vs. brackets?

 function test() {
 
  document.getElementById("result_text").value = "";
 

  var obj = JSON.parse('{"property1":"1234","property256":"5678"}');
   
  for (var i=1; i<=256; i++) {
    
      var property = "property" + i;
      
      if (obj.hasOwnProperty(property)){
        
        let resultFormatted = property + " = " + obj[property] + ", ";
        document.getElementById("result_text").value += resultFormatted;
        
      }
  }
}

<head>
    <title>JAVASCRIPT_TEST</title>
    <meta charset="UTF-8"/>
</head>

<body>

    <input type="text" id="result_text" size="150">
    <input type="button" onclick="test()" value="TEST">

</body>

Javascript - How to display text/string of obj.element in this case

3 Answers3