Returned multiple items from dict is showing duplicate items in map function-CodePudding

I am building a simple react app and I am trying to return specific items if matched from passed argument in function.

In Brief :-

I made a function to check if given argument's ids is in function's dict or not, if passed argument's ids matches any of the dict keys then return all matching dict values. But It is showing duplicate results in almost every map item in App component

App.js

function CheckItems(ids) {
  const dictToCheck = [
        {"id": 13, "type": "good"},
        {"id": 14, "type": "bad"},
        {"id": 15, "type": "excellent"},
        {"id": 16, "type": "fabulous"},
        {"id": 17, "type": "not good"},
        {"id": 19, "type": "not bad"},
        {"id": 15, "type": "not gross"},
        {"id": 16, "type": "junk"},
        {"id": 39, "type": "trash"},
  ]


    return (
      {
        dictToCheck.map(({id, type})  => 
          ids.map((ids) => 
            id == ids && <div>{type}</div>
          )
        )
      }
    )
}

function App() {
    const apiItems = [
        {
            "title": "First Job",
            "description": "Unknown",
            "ids": [
             13, 15
            ]
        },
        {
            "title": "Second Job",
            "description": "Unknown",
            "ids": [
             39, 16
            ]
        },
        {
            "title": "Third Job",
            "description": "Unknown",
            "ids": [
             17
            ]
        }
    ]

    return (
        <div>
            <h2>Items</h2>

            {apiItems.map((item) =>
               <div>
                  {item.title}

                  {CheckItems(item.ids)} // [13, 16]

               </div>
            }

        </div>
    ), 
}

When I run above function then It is showing duplicate items returned like

First Job
bad, excellent, bad

Second Job
trash, junk, trash

Third Job
not good, not good

Expecting response in App component :-

First Job
bad, excellent

Second Job
trash, junk

Third Job
not good

Any help would be much Appreciated.

CodePudding user response：

First of all replace your duplicate ids.

I would recommend that you do a second map function in you app and return only the values in you CheckItems function. Something like this:

function CheckItem(id) {
  const dictToCheck = [
        {"id": 13, "type": "good"},
        {"id": 14, "type": "bad"},
        {"id": 15, "type": "excellent"},
        {"id": 16, "type": "fabulous"},
        {"id": 17, "type": "not good"},
        {"id": 19, "type": "not bad"},
        {"id": 20, "type": "not gross"},
        {"id": 21, "type": "junk"},
        {"id": 39, "type": "trash"},
  ]

    const targetType = dictToCheck.find(item => item.id == id);
    return targetType.type
}

function App() {
    const apiItems = [
        {
            "title": "First Job",
            "description": "Unknown",
            "ids": [
             13, 15
            ]
        },
        {
            "title": "Second Job",
            "description": "Unknown",
            "ids": [
             39, 16
            ]
        },
        {
            "title": "Third Job",
            "description": "Unknown",
            "ids": [
             17
            ]
        }
    ]

    return (
        <div>
            <h2>Items</h2>

            {apiItems.map((item) =>
               <div>
                  {item.title}

                  {item.ids.map((id, index) => {
                      <div>{CheckItem(id)}</div>
                  })}
               </div>
            }

        </div>
    ), 
}

or if you want to keep that the CheckItems function to returns a HTML emlement

function CheckItems(ids) {
  const dictToCheck = [
        {"id": 13, "type": "good"},
        {"id": 14, "type": "bad"},
        {"id": 15, "type": "excellent"},
        {"id": 16, "type": "fabulous"},
        {"id": 17, "type": "not good"},
        {"id": 19, "type": "not bad"},
        {"id": 20, "type": "not gross"},
        {"id": 21, "type": "junk"},
        {"id": 39, "type": "trash"},
  ]

const targetItems = dictToCheck.filter(item => ids.includes(item.id));

    return (
      {
        targetItems.map(item => 
          <div>{item.type}</div>
        )
      }
    )
}

CodePudding user response：

This can help, filter the list according to the id before mapping:

function CheckItems(ids) {
  let dictToCheck = [
        {"id": 13, "type": "good"},
        {"id": 14, "type": "bad"},
        {"id": 15, "type": "excellent"},
        {"id": 16, "type": "fabulous"},
        {"id": 17, "type": "not good"},
        {"id": 19, "type": "not bad"},
        {"id": 15, "type": "not gross"},
        {"id": 16, "type": "junk"},
        {"id": 39, "type": "trash"},
  ]

     
    let uniq_elt = {};
    dictToCheck=dictToCheck.filter(obj => !uniq_elt[obj.id] && (uniq_elt[obj.id] = true))
    return (
      {
        dictToCheck.filter(item=> ids.includes(item.id)).map(({id, type})  => 
          <div>{type}</div>
        )
      }
    )
}

function App() {
    const apiItems = [
        {
            "title": "First Job",
            "description": "Unknown",
            "ids": [
             13, 15
            ]
        },
        {
            "title": "Second Job",
            "description": "Unknown",
            "ids": [
             39, 16
            ]
        },
        {
            "title": "Third Job",
            "description": "Unknown",
            "ids": [
             17
            ]
        }
    ]

    return (
        <div>
            <h2>Items</h2>

            {apiItems.map((item) =>
               <div>
                  {item.title}

                  {CheckItems(item.ids)}

               </div>
            }

        </div>
    ), 
}