Сортировка массива строк в неполном порядке (сначала убедитесь, что элемент X, но делайте все, что угодно со всем остальным)

Question

Следуя flask -react-app-tutorial , я пытаюсь перенести sh данные из моего простого server.py в приложение . js и отобразить его в красивой таблице.

Я использовал простейший макет таблицы из таблиц материалов и изменил его, насколько мог, чтобы он был Dynami c, и данные будут контролироваться только сервером, то есть я могу добавлять / удалять записи (строки) или параметры записи (столбцы) только на сервере.

Моя проблема описана в "TODO" комментарии в коде, но я перепишу их здесь:

• Как я могу получить параметры записи с сервера и отсортировать их, но не полностью. например, параметры AB C, и я хочу, чтобы A всегда был первым, а C всегда был последним (в этом случае он обеспечивает порядок A, B, C, поэтому даже если сервер позже изменит параметры и добавит D к группе, порядок будет A, [B, D], C (меня не волнует порядок параметров в [], если он согласован)?
• Я думаю, это должно / должно происходить в приложении реакции, но можно ли отсортировать его заранее на сервере Python? в настоящее время я возвращаюсь dict, который нельзя отсортировать, но является файлом OrderedDict git (т. е. действительным И хорошей идеей)?

App. js

import React, { useState, useEffect } from 'react';
import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';


export default function SimpleTableDisplayingServerData() {
    const [ data, SetData ] = useState(0);

    // TODO: (0) How can I make sure the data from useEffect is sorted? (at least have the "Name" column as the 1st column)
    // TODO: (0.0) How can I get the headers (like I did in the <TableHead>) as a const?
    // TODO: (0.1) How can I create a non-strict ordering in an array of strings? (i.e. make sure "A" is first, "D" is last, but all others can be wherever)
    // TODO: (0.2) Given that ordering, how can I order all my keys / values mappings (in the <TableRow>) accordingly?
    useEffect(() => {
        fetch('/bla').then(result => result.json()).then(d => {
            SetData(d)
        })
    }, [])

    return (
        <TableContainer component={Paper}>
            <Table size="small" aria-label='simple table'>
                <TableHead> <TableRow> { Object.keys(data).map(k => <TableCell align='left'>{k}</TableCell> )} </TableRow> </TableHead>
                <TableRow> { Object.values(data).map(v => <TableCell align='left'>{v}</TableCell> )} </TableRow>
            </Table>
        </TableContainer>
    );
}

server.py

#!/usr/bin/env python

from flask import Flask
from random import randint, random

app = Flask(__name__)

def create_entry():
    name = 'bla' + str(randint(0,20))
    cal = random()
    fat = random()
    carb = random()
    prot = random()

    return {
        "Name": name,
        "Calories": cal,
        "Fat": fat,
        "Carbs": carb,
        "Protein": prot,
    }

@app.route('/bla')
def bla():
    return create_entry()

Answer 1

Вы можете выбрать объект для желаемого порядка элементов и использовать только самые крайние левые и правые значения. для всех остальных (неизвестных) значений принять ноль.

const
    order = { a: -Number.MAX_VALUE, c: Number.MAX_VALUE },
    values = ['b', 'c', 'a', 'd'];
    

values.sort((a, b) => (order[a] || 0) - (order[b] || 0));

console.log(...values);

Answer 2

Вы можете использовать кортеж вместо словаря. Это должно сработать для вас!