与数组 object 的键值映射

Question

I am stuck at mapping value with object.

I have Array of objects

 const data =  [
      {
        _id: "535345345345345345311",
        name: "Activity",
        description: "this is activity",
        filters: []
      },
      {
        _id: "535345345345345345311",
        name: "Activity",
        description: "this is activity",
        filters: [
          { _id: "49823476237423984", name: "ACTIVITY filter", origin: "ACTIVITY" }
        ]
      }
    ];

Here, like that array of object have user_of then it should show User Reading data from the object. Or if data is not present at the object then show as it is. Like if there's data example_of its there in that above array object, but not in object then show example_of only....

{
  "user_of": "User",
  "student_of": "Student",
  "test_of": "TEST"
}

Where this is the object, now if data has user_of I want to show as User in the result output. Similarly if I have student_of in data then I want to show Student

Below is the code where I am trying to achieve this.

{data.filters.map((filter, index) => (
          <>
            {index < 2 && (
              <span style={{ textTransform: "capitalize" }}>
                {filter.origin.toLowerCase()}
                {index === 0 && record.filters.length > 1 && <span>, </span>}
              </span>
            )}
          </>
        ))}
        {data.filters.length > 2 && (
          <span> +{record.filters.length - 2} </span>
        )}

also Here's working example of the code https://codesandbox.io/s/hardcore-kilby-hhbon?file=/index.js

What I am getting currently is below

And here's what I expect is

Basically all I want is replace the value with that object value(for naming convention purpose). You can see this on codesandbox link above, I am confused. (New to JS world, Previously with python)

Can someone help me?

Answer 1

You're pretty close:

...
          <>
            {index < 2 && (
              <span style={{ textTransform: "capitalize" }}>
                {objet[filter.origin]}
                {index === 0 && record.filters.length > 1 && <span>, </span>}
              </span>
            )}
          </>
...

I just changed this to return {objet[filter.origin]}

objet is already defined but you need to add activity_of

const objet = {
  user_of: "User",
  student_of: "Student",
  test_of: "TEST",
  activity_of: "Activity"
};