ReactJS-如何在API中获取值以显示文本？

Question

My JSON API displays the following:

 "crgAudittype": {
            "$id": "4",
            "Value": 3
        },

What I'm attempting to do is have it to display the word "transition" in place of "3". So I created a ".js" file with the following code.

export const AUDIT_TYPES = {
    OCCUPIED: 'OCCUPIED',
    UNOCCUPIED: 'UNOCCUPIED',
    TRANSITION: 'TRANSITION',
    SHUTDOWN: 'SHUTDOWN'
};

export const allAuditTypes = [AUDIT_TYPES.OCCUPIED, AUDIT_TYPES.UNOCCUPIED, AUDIT_TYPES.TRANSITION, AUDIT_TYPES.SHUTDOWN];

export const auditTypeToIdMap = {
    1: AUDIT_TYPES.OCCUPIED,
    2: AUDIT_TYPES.UNOCCUPIED,
    3: AUDIT_TYPES.TRANSITION,
    4: AUDIT_TYPES.SHUTDOWN
};

export const getAuditTypeDescFromId = (auditTypeId) => auditTypeToIdMap[Number(auditTypeId)];

...I declared the ".js" file in the header of the page I want to employ it in.

import { getAuditTypeDescFromId, allAuditTypes, auditTypeToIdMap } from '../constants/audit-types';

now in the Render() section, I assigned the value like so:

<b>Audit type:</b>  {Object.keys(auditTypeToIdMap).map(id => { id })}<br />

...however, I'm not sure syntax-wise, How to set the text to display in place of the value using the above code. Could I get some help with this please? ...Thank you in advance

Answer 1

You can do something like this:

const response = {
    "crgAudittype": {
      "$id": "4",
      "Value": 3
     },
}

const auditTypes = {
    "1": "OCCUPIED",
    "2": "UNOCCUPIED",
    "3": "TRANSITION",
    "4": "SHUTDOWN"
};

class App extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
        Audit Type: {Object.entries(auditTypes).filter(([key, value]) => {
          return key === response.crgAudittype.Value.toString();
        }).map(([key, value]) => {
          return value 
        })}
      </div>
    );
  }
}

Answer 2

Tough because we don't know the structure of auditTypeToIdMap looks like but I think I see your problem. You're using Object.keys and map, which means you're essentially mapping through your array twice. Once with Object.keys, and then within that iteration you're mapping through all of the answers again with map(), thereby giving you four "labels".

Also, since you've already written your function above, this should work if you replace it in your render assuming everything is correct leading up to that point and you've imported everything correctly.

<b>Audit type:</b>  {this.auditTypeDescFromId(id)}

assuming the auditTypeDescFromId function is in the same file as your render

I do think there's a cleaner way to handle this however, perhaps using filter(). If you can explain what data you have and what you're trying to do with it we could help you more.

Answer 3

const response = {
   "crgAudittype": {
      "$id": "4",
      "Value": 3
   }
};

const auditTypes = {
   "1": "OCCUPIED",
   "2": "UNOCCUPIED",
   "3": "TRANSITION",
   "4": "SHUTDOWN"
};

const dom = <b>Audit type:</b> {auditTypes[response.crgAudittype.Value]}<br />