Javascript json reading data

Im new and trying in a flask app to modify labels of my invoice with a javascript code. Code when I change select client Id will go to server side and select infos about this client.

fetch in java script works well as I m getting back with a json data like this:

infos: Array(1)
0: {address: "test2", cit: "test2", countr: "US", id: 2, postal_code: "2edfres", …}
length: 1
__proto__: Array(0)

But when I want to update labels (address, city, zip, country), all these labels texts are undefined.

Could some can explain where I m wrong in my javascript ?

Thanks

{% block content %}
    </br>
    </br>
    <h1>Invoice</h1></br>
    </br>
    <div class="invoice-box">
        <table cellpadding="0" cellspacing="0">
            <tr class="top">
                <td colspan="2">
                    <table>
                        <tr>
                            <td class="title">
                                <img src="static/img/logo.png" style="width:100%; max-width:300px;">
                            </td>

                            <td>
                                Invoice #: {{ref_invoice}}<br>
                                Created: January 1, 2015<br>
                                Due: February 1, 2015
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

            <tr class="information">
                <td colspan="2">
                    <table>
                        <tr>
                            <td>
                                {{firm_info.name}}<br>
                                {{firm_info.address}}<br>
                                {{firm_info.city}}, {{firm_info.postal_code}}, {{firm_info.country}}
                            </td>

                            <td>

                                <select name="ClientId" class="selectpicker form-control" id="clientselect" onchange="func();">
                                    {% for client in clientchoices %}
                                    <option value = {{ client[0] }}>{{ client[1] }}</option>
                                    {% endfor %}
                                </select><br>
                                <label id="address"></label><br>
                                <label id="city"></label>, <label id="zip"></label>, <label id="country"></label>

                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
           </tr>
        </table>
    </div>

<script>
    function func()
    {
    var client = document.getElementById('clientselect');

    var clientId= client.value

    fetch('/invoices/address/'+ clientId).then(function (response) {
            response.json().then(function (data) {
                console.table(data)
                var ad = data.address
                var ci = data.cit
                var zip =data.postal_code
                var coun = data.countr
                document.getElementById('address').innerHTML= ad
                document.getElementById('city').innerHTML = ci
                document.getElementById('zip').innerHTML = zip
                document.getElementById('country').innerHTML = coun
            })
    })

    }
    </script>

Answer

Find it….

it was data[“infos”][0].address thanks to @Sarwagya to give me a clue with console.log

Leave a Reply

Your email address will not be published. Required fields are marked *