Как передать переменную из django views.py в мой javascript?

Конечно, вот версия вашего вопроса в формате Markdown для Stack Overflow:

Проблема с передачей данных из представлений Django в JavaScript в шаблоне

Я пытаюсь передать данные из представления Django в JavaScript в моем шаблоне, но сталкиваюсь с проблемой, когда передаваемые параметры оказываются пустыми при просмотре веб-страницы.

Views.py

def homepage(request):
    selected_model = request.GET.get('model', '')

    if selected_model == '1':
        df = pd.read_csv(os.path.join(settings.BASE_DIR, 'files', 'data', 'preprocessed_price_optimization_dataset.csv'))
        model_path = os.path.join(settings.BASE_DIR, 'files', 'data', 'price_optimization_model.h5')

        X = df[['product_id', 'category_id', 'brand_encoded', 'historical_price_scaled']] 
        y = df['historical_price'] 
        X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42)

        loaded_model = load_model(model_path)

        predictions = loaded_model.predict(X_test)
        evaluation = loaded_model.evaluate(X_test, y_test)

        actual_data = [1, 2, 3, 4, 5]
        predicted_data = [6, 7, 8, 9, 10]

        context = {
            'actual_data': actual_data,
            'predicted_data': predicted_data,
        }
    else:
        print("no actual and predicted data")
        context = {}

    return render(request, 'base.html', context)

base.html

<select id="visualSelector" name="model" onchange="printSelectedValue({{ actual_data|safe }}, {{ predicted_data|safe }})">
    <option value="0">---</option>
    <option value="1">SCATTERPLOT</option>
    <option value="2">LINEPLOT</option>
</select>

JavaScript

function printSelectedValue(actualData, predictedData) {
    var selectedValue = document.getElementById('visualSelector').value;
    var selectedModelValue = document.getElementById('modelSelector').value;

    if (selectedModelValue === '0') {
        console.log("No model selected");
        return; 
    }

    var canvas = document.getElementById('plotCanvas');

    if (selectedValue === '0') {
        canvas.style.backgroundColor = 'red';
        console.log("value 0:", actualData);
    } else if (selectedValue === '1') {
        canvas.style.backgroundColor = 'blue';
        console.log("value 1:", predictedData);
    } else if (selectedValue === '2') {
        canvas.style.backgroundColor = 'green';
        console.log("value 2:");
    }
}

Выпуск

При просмотре веб-страницы параметры actualData и predictedData кажутся пустыми. Я пробовал использовать {{ variablename | safe }}, но все равно столкнулся с той же проблемой.

Как я могу решить эту проблему и успешно передать данные из представления Django в JavaScript в моем шаблоне?

Я не знаю, правилен ли ваш метод или нет, но по моему мнению:

  1. Сначала попробуйте вывести фактические данные & прогнозируемые данные в операторе if (views.py).

  2. Я бы рекомендовал использовать переменные непосредственно в вашем js скрипте, например:

    var actual = "{{actual_data}}";

    alert(actual) Надеюсь, это простое решение поможет вам.

Вы используете тег шаблона |json_script [Django-doc] для этого:

{{ actual_data|json_script:'actual_data' }}
{{ predicted_data|json_script:'predicted_data' }}

<select id="visualSelector" name="model" onchange="printSelectedValue(JSON.parse(document.getElementById('actual_data').textContent), JSON.parse(document.getElementById('predicted_data').textContent))">
    <option value="0">---</option>
    <option value="1">SCATTERPLOT</option>
    <option value="2">LINEPLOT</option>
</select>
Вернуться на верх