Bind JSON Data to HTML element

Question

I want to bind JSON data to <select> element. I created HTML page. Let me know where i was wrong. Look what i have tried..

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <script>
            function clickMe() {
                // THE JSON ARRAY.
                var cars = [
                    {
                        "ID": "001",
                        "Car_Name": "BMW"
                    },
                    {
                        "ID": "002",
                        "Car_Name": "AUDI"
                    },
                    {
                        "ID": "003",
                        "Car_Name": "Range Rover"
                    }
                ];

                var ele = document.getElementById('sel');
                for (var i = 0; i < cars.length; i++) {
                    // POPULATE SELECT ELEMENT WITH JSON.
                    ele.innerHTML = ele.innerHTML +
                        '<option value="' + cars[i]['ID'] + '">' + cars[i]['Car_Name'] + '</option>';
                }
            }

            function show(ele) {
                // GET THE SELECTED VALUE FROM <select> ELEMENT AND SHOW IT.
                var msg = document.getElementById('msg');
                msg.innerHTML = 'Selected Car: <b>' + ele.options[ele.selectedIndex].text + '</b> </br>' +
                    'ID: <b>' + ele.value + '</b>';
            }
        </script>
    </head>

    <body>
        <div>
            <div>
                <!--Click button-->
                <p style="margin-top:20px;">
                    <input type="button" onclick="clickMe"value="Click to Select" />
                </p>        

                <!--Select Menu-->
                <p>
                    <select id="sel" onchange="show(this)">
                        <option value=""> - - Select - -</option>
                    </select>
                </p>

                <p id="msg">
                </p>
            </div>
        </div>
    </body>
    </html>

you have to call function with closed brackets. onclick="clickMe()" — Davor Mlinaric
– Davor Mlinaric, Commented Sep 3, 2019 at 7:38
Instead of assigning to innerHTML in the loop, build up a string adding the options to it then assign this string to the innerHTML outside of the loop. — SPlatten
– SPlatten, Commented Sep 3, 2019 at 7:41

Ishan Shah · Accepted Answer · 2019-10-04 05:58:09Z

2

In my opinion, you should try out the ajax.

$.ajax({
    url:'test.html',
    type:'POST',
    data: 'test =' + str,
    dataType: 'json',
    success: function( json ) {
        $.each(json, function(i, value) {
            $('#myselect').append($('<option>').text(value).attr('value', value));
        });
    }
});

answered Oct 4, 2019 at 5:58

Ishan Shah

3932 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wesley.Chen · Accepted Answer · 2019-09-03 09:00:08Z

0

Your HTML

<input type="button" onclick="clickMe" value="Click to Select" />

change to

<input type="button" onclick="clickMe()" value="Click to Select" />

is correct.

answered Sep 3, 2019 at 9:00

Wesley.Chen

163 bronze badges

Comments

rahi_mahajan · Accepted Answer · 2019-09-03 09:21:38Z

-1

Here, without parentheses you're not actually calling the function. A function name without the parentheses is a reference to the function. So in order to call the function you need to change the statement from

<input type="button" onclick="clickMe" value="Click to Select" /> to

<input type="button" onclick="clickMe()" value="Click to Select" />

answered Sep 3, 2019 at 9:21

rahi_mahajan

143 bronze badges

Collectives™ on Stack Overflow

Bind JSON Data to HTML element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related