JavaScript json - populating an input box is not working

Question

I am working with a JSON array and trying to do a simple parse and cannot get the following line of code to work:

      document.getElementById('MapId').value = obj[0].properties.OBJECTID;

This does not populate the input box on the form.

Should I be using stringify instead?

Here's my document below

    <!DOCTYPE html>
     <html>
     <body>

        <h2>Create Object from JSON String</h2>

        <p id="demo"></p>
        <form>
            <h1>
                Map Title
            </h1>
            Id:<br>
            <input type="text" name="MapId" id="MapId">
        </form>

        <script>

            var obj = JSON.parse('[
      {
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [
                            [
                                [
                                    -80.38001898676157,
                                    43.41005948475032
                                ],
                                [
                                    -80.38005586713552,
                                    43.41005583130982
                                ],
                                [
                                    -80.38005754351616,
                                    43.410064843129305
                                ],
                                [
                                    -80.3800206631422,
                                    43.41006849656927
                                ],
                                [
                                    -80.38001898676157,
                                    43.41005948475032
                                ]
                            ]
                        ]
                    },
                    "type": "Feature",
                    "properties": {
                        "DIRECTION": "0",
                        "OBJECTID": 1309,
                        "RANGE": "000",
                        "SECTION_": "15",
                        "SHAPE_AREA": 3.030074,
                        "SHAPE_LENG": 8.040001
                    },
                    "id": 97,
                    "layer": {
                        "id": "cemeterypl3-6k66v9",
                        "type": "fill",
                        "source": "composite",
                        "source-layer": "CemeteryPL3-6k66v9",
                        "layout": {
                            "visibility": "visible"
                        },
                        "paint": {
                            "fill-opacity": 0.5,
                            "fill-color": "hsl(107, 50%, 27%)"
                        }
                    }
                }
    ]');
            document.getElementById('MapId').value = obj[0].properties.OBJECTID;
        </script>

    </body>
    </html>

t

gurvinder372 · Accepted Answer · 2017-11-28T12:44:39.760

You would have been getting this error in your browser's console

Uncaught SyntaxError: Invalid or unexpected token

You are specifying the multi-line string (template literals) wrongly in your code, you need to specify the String using **** instead of'`.

JSON.parse(` ... ` )

instead of

JSON.parse(' ... ');

Check here how to create multi-line string using '

Demo

<!DOCTYPE html>
<html>

<body>

  <h2>Create Object from JSON String</h2>

  <p id="demo"></p>
  <form>
    <h1>
      Map Title
    </h1>
    Id:<br>
    <input type="text" name="MapId" id="MapId">
  </form>

  <script>
    var obj = JSON.parse(`[
      {
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [
                            [
                                [
                                    -80.38001898676157,
                                    43.41005948475032
                                ],
                                [
                                    -80.38005586713552,
                                    43.41005583130982
                                ],
                                [
                                    -80.38005754351616,
                                    43.410064843129305
                                ],
                                [
                                    -80.3800206631422,
                                    43.41006849656927
                                ],
                                [
                                    -80.38001898676157,
                                    43.41005948475032
                                ]
                            ]
                        ]
                    },
                    "type": "Feature",
                    "properties": {
                        "DIRECTION": "0",
                        "OBJECTID": 1309,
                        "RANGE": "000",
                        "SECTION_": "15",
                        "SHAPE_AREA": 3.030074,
                        "SHAPE_LENG": 8.040001
                    },
                    "id": 97,
                    "layer": {
                        "id": "cemeterypl3-6k66v9",
                        "type": "fill",
                        "source": "composite",
                        "source-layer": "CemeteryPL3-6k66v9",
                        "layout": {
                            "visibility": "visible"
                        },
                        "paint": {
                            "fill-opacity": 0.5,
                            "fill-color": "hsl(107, 50%, 27%)"
                        }
                    }
                }
    ]`);
    document.getElementById('MapId').value = obj[0].properties.OBJECTID;
  </script>

</body>

</html>

@Kaddath You can create a multi-line string using `'` as well. — gurvinder372, Nov 28 '17 at 12:46
Isn't multiline string only supported in ES6? Does it work in current browsers? — Canta, Nov 28 '17 at 12:47
@ArthurCantarela Browser support is mentioned in the link I have shared. It definitely works in current browsers. You can try the demo I have shared. — gurvinder372, Nov 28 '17 at 12:48
@Kaddath I agree that even though it is achievable with `'`, but `'` is not meant for multi-line. — gurvinder372, Nov 28 '17 at 12:50

score 2 · Answer 2 · answered Nov 28 '17 at 12:41

That happening because the Json parse function only accepts a string, and when you set a new line in your string Js parse that line as a new line of code, causing the error.

var obj = JSON.parse('[{"geometry": {"type": "Polygon","coordinates": [[[-80.38001898676157,43.41005948475032], [-80.38005586713552,43.41005583130982],[-80.38005754351616,43.410064843129305],[-80.3800206631422,43.41006849656927],[-80.38001898676157,43.41005948475032]]]},"type": "Feature","properties": {"DIRECTION": "0","OBJECTID": 1309,"RANGE": "000","SECTION_": "15","SHAPE_AREA": 3.030074,"SHAPE_LENG": 8.040001},"id": 97,"layer": {"id": "cemeterypl3-6k66v9", "type":"fill","source": "composite","source-layer": "CemeteryPL3-6k66v9","layout": {"visibility": "visible"},"paint": {"fill-opacity": 0.5,"fill-color": "hsl(107, 50%, 27%)"}}}]');
document.getElementById('MapId').value = obj[0].properties.OBJECTID;

        <h2>Create Object from JSON String</h2>

        <p id="demo"></p>
        <form>
            <h1>
                Map Title
            </h1>
            Id:<br>
            <input type="text" name="MapId" id="MapId">
        </form>

Richi · Answer 3 · 2017-11-28T14:08:02.760

No need to parse to json if you use an array with objects. You can remove the JSON.parse

    var obj = [{"geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [
                                -80.38001898676157,
                                43.41005948475032
                            ],
                            [
                                -80.38005586713552,
                                43.41005583130982
                            ],
                            [
                                -80.38005754351616,
                                43.410064843129305
                            ],
                            [
                                -80.3800206631422,
                                43.41006849656927
                            ],
                            [
                                -80.38001898676157,
                                43.41005948475032
                            ]
                        ]
                    ]
                },
                "type": "Feature",
                "properties": {
                    "DIRECTION": "0",
                    "OBJECTID": 1309,
                    "RANGE": "000",
                    "SECTION_": "15",
                    "SHAPE_AREA": 3.030074,
                    "SHAPE_LENG": 8.040001
                },
                "id": 97,
                "layer": {
                    "id": "cemeterypl3-6k66v9",
                    "type": "fill",
                    "source": "composite",
                    "source-layer": "CemeteryPL3-6k66v9",
                    "layout": {
                        "visibility": "visible"
                    },
                    "paint": {
                        "fill-opacity": 0.5,
                        "fill-color": "hsl(107, 50%, 27%)"
                    }
                }
            }
];

You are right Kaddath, i did change the first sentence. – Richi Nov 28 '17 at 14:08 — Richi, Nov 28 '17 at 14:08

JavaScript json - populating an input box is not working

3 Answers3