Как бы я проверил значение из JSON API и преобразовать его в другое слово в реакции. js?

Question

Вот мой JSON файл из API

Из приведенного выше рисунка мой статус возвращается в int представлять результат статуса. Статус 1 означает, что это Одобрить

Итак, вот как я реагирую на мои данные API. js

  componentDidMount(){
    const users_id = localStorage.getItem('id');

    fetch(`http://localhost:9000/api/purchase-order/list/${users_id}`,)
     .then((resp)=>{
       resp.json().then((res)=>{
           console.log(res.data);
                this.setState({data: res.data});
       })
     })
   }

render(){
    const data = this.state.data
    return (
      <div>
       <Header />
       {/* <NavigationBar /> */}
        <div>
        { Object.keys(data).map((key) => <h1>Status:{data[key].status}</h1>) }
         //Here show the status in number, but I need to show the "Approve" on here instead of 1
        </div>
      </div>
    );
  }

Это какое-либо решение или метод, который может помочь проверить статус результата и показать слово реального значения на странице пользовательского интерфейса?

Здесь все еще есть статус: 1 - Подтвердить 2 - Ожидает 3 - Отклонено

Answer 1

Присвоение чисел массиву

Простым решением может быть использование чисел в качестве индекса и печать слова для этого

const statusAry = ['broken', 'good', 'incomplete'];

...

{ Object.keys(data).map((key) => <h1>Status:{statusAry[data[key].status]}</h1>) }

Answer 2

Вы можете сделать что-то вроде:

Определить свой статус

И использовать это так:

{состояния [данные [ключ] .status]}

Answer 3

Вы можете использовать следующий код:

{ Object.keys(data).map((key) => <h1>Status:{data[key].status === 1 ? 'Approved' : 'Rejected'}</h1>) }