Как обновить API DATA Symfony 4

Question

В настоящее время я работаю над проектом в Symfony, где использую API.Мне удалось правильно отобразить данные API в теге «Таблица».Но я хотел бы изменить данные столбца «Таблицы» в соответствии с тегом «Выбор» с помощью «Опции».

Можете ли вы мне помочь, потому что я никогда раньше такого не делал?

Вот мой контроллер:

 /**
 * @Route("/", name="accueil")
 **/
public function index(Request $request){

    $api = file_get_contents('https://api.coinmarketcap.com/v2/ticker/?convert=EUR&limit=10');

    dump($api);

    $json = json_decode($api, true);

    $id = 1;

    return $this->render('pro_crypto/index.html.twig', [
        'controller_name' => 'ProCryptoController',
        'dataApi' => $json,
        'idEvolution' => $id,
    ]);
}

Вот мой TWIG:

    <table class="table">
    <thead>
        <tr>
            <th scope="col">Nom Crypto</th>
            <th scope="col">Symbole</th>
            <th scope="col">Rang</th>
            <th scope="col">Prix USD</th>
            <th scope="col">Capitalisation Boursière USD</th>
            <th scope="col">Prix EUR</th>
            <th scope="col">Capitalisation Boursière EUR</th>
            <th scope="col">
                <select id="my_select" onchange="changeId(this.value)">
                    <option value="1">1H</option>
                    <option value="2">24H</option>
                    <option value="3">7J</option>
                </select>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            {% for data in dataApi.data %}
            <th>{{ data.name }}</th>
            <th scope="row">{{ data.symbol }}</th>
            <th scope="row">{{ data.rank }}</th>
            <td scope="row">{{ data.quotes.USD.price }} $</td>
            <td scope="row">{{ data.quotes.USD.market_cap }} $</td>
            <td scope="row">{{ data.quotes.EUR.price }} €</td>
            <td scope="row">{{ data.quotes.EUR.market_cap }} €</td>
            {%if data.quotes.EUR.percent_change_24h < 0 %}
                {% if idEvolution == 1 %}
                    <td scope="row" style="color: red;">{{data.quotes.EUR.percent_change_1h }} %</td>
                {% elseif  idEvolution == 2 %}
                    <td scope="row" style="color: red;">{{data.quotes.EUR.percent_change_24h }} %</td>
                {% else %}
                    <td scope="row" style="color: red;">{{data.quotes.EUR.percent_change_7d }} %</td>
                {% endif %}
            {% else %}
                {% if idEvolution == 1 %}
                <td scope="row" style="color: green;">{{data.quotes.EUR.percent_change_1h }} %</td>
                {% elseif  idEvolution == 2 %}
                    <td scope="row" style="color: green;">{{data.quotes.EUR.percent_change_24h }} %</td>
                {% else %}
                    <td scope="row" style="color: green;">{{data.quotes.EUR.percent_change_7d }} %</td>
                {% endif %}
            {% endif %}
        </tr>
        {% endfor %}
    </tbody>
</table>

Я использовал AJAX для обновления данных без обновления страницы.Вот мой Js:

function changeId(src){
    window.location = src;
}

var requestPath = '{{ path('accueil') }}';

$.ajax({
    url: requestPath,
    type: 'GET',
    data: { id: $('#my_select').val() },
    success: function (data) {
        console.log("xyxy");
    },
    error: function(){
        console.log("ERROR")
    }
});

Answer 1

Нет, я хочу изменить данные в последнем теге "TD".Я не хочу менять настройки API.Я просто хочу изменить данные, отображаемые на моей странице, в соответствии с тегом «Выбрать».И чтобы страница не обновлялась Но я не знаю как.

Answer 2

Когда вы добавляете значение выбранной опции в качестве параметра запроса с именем data к вашему запросу API, я предполагаю, что вы пытаетесь получить доступ к этому параметру запроса в вашем контроллере для изменения данных.Так, с примером запроса, который выглядит следующим образом ...

GET /api/endpoint?data=7H

... вы можете прочитать и использовать параметр запроса data из объекта Request $request следующим образом:

$data = $request->query->get('data');
switch ($data) {
    case "7H":
        // do something with $json
        break;
    case "24H":
        // do something else with $json
        break;
    // [..]
    default:
        // invalid input? throw an exception
}