Блог

Мне нужно извлечь некоторые данные из базы данных MySQL с помощью приложения Flask и опубликовать их в HTML-таблице с помощью Jquery. Вот мой код на python:

 @app.route('/getTerm')
def getTerm():
    try:
        if session.get('user'):
            _userID = session.get('user')
 
            conn = mysql.connect()
            cursor = conn.cursor()
            cursor.execute("SELECT * FROM terms")
            conn.commit()
            terms = cursor.fetchall()
 
            terms_dict = []
            for item in terms:
                item_dict = {
                        'Id': item[0],
                        'Name': item[3],
                        'Definition': item[2],
                        'Status': item[1],
                        'User': item[4]}
                terms_dict.append(item_dict)
 
            return json.dumps(terms_dict)
        else:
            return render_template('error.html', error = 'Unauthorized Access')
    except Exception as e:
        return render_template('error.html', error = str(e))
    finally:
        cursor.close()
        conn.close()
 

Вот JS и HTML:

 <script>
    $(function(){
        $.ajax({
            url : '/getTerm',
            type : 'GET',
            success: function(res){
                var tr = $('<tr>')
    .append($('<td>')
        .attr('class', 'name'),
        $('<td>')
        .attr('class', 'definition'),
        $('<td>')
        .attr('class', 'user'),
        $('<td>')
        .attr('class', 'status'));
                                
                
                
                var termObj = JSON.parse(res);
                var term = '';
                var td = $('<td>')
                
                $.each(termObj, function(index, value){
                    term = $(tr).clone();
                    $(term).find('td').text(value.Name);
                    $(term).find('td').text(value.Definition);
                    $(term).find('td').text(value.User);
                    $(term).find('td').text(value.Status);
                    $('.terms').append(term);
                });
            },
            error: function(error){
                console.log(error);
            }
        });
    });
</script>

    <div class="main-terms">
        <div class="main-terms_buttons">
            <button><a href="/showAddTerm">Add term</a></button>
            <button><a href="/showAssigned">Assigned to me</a></button>
        </div>
        <div class="main-terms-table">
            <table class="terms">
            <tr>
                <th>Term</th>
                <th>Definition</th>
                <th>Assigned to</th>
                <th>Status</th>
            </tr>
            </table>
        </div>
    </div>
 

Однако на веб-странице я получаю таблицу, в которой значение «статус» отображается во всех ячейках. Не могли бы вы, пожалуйста, подсказать, что не так с моим кодом?

В вашем коде jquery вы добавляете все td в onces и используете .find('td') без какого-либо другого селектора, поэтому он нацелен на все td и изменяет значения. Вместо этого ориентируйтесь только на td, где вам нужно добавить значения, т.е. :

  //add to required tds using class..
    $(term).find('td.name').text(value.Name);
    $(term).find('td.definition').text(value.Definition);
    $(term).find('td.user').text(value.User);
    $(term).find('td.status').text(value.Status);
    $('.terms').append(term);