Array doesnt display all of the items inside it React JavaScript

Question

I receive some info from an API based on some ids. there are 3 job objects, each job has an array of tags and in each array, there are some ids that get sent to the API to return the tag info:

function useJobs () {
  const [jobs, setJobs] = React.useState([])
  const [locations, setLocations] = React.useState({})
  const [departments, setDepartments] = React.useState({})
  const [tags, setTags] = React.useState({})

  React.useEffect(() => {
    async function fetchTags () {
      const tPromises = []
      for (const job of jobs) {
        for (const tag of job.tags) {
          console.log(tag)
          tPromises.push(fetchJSON(`/api/jobs/view-tag/${tag}`, { headers: headers })
            .then((tags) => {
              return { [job.id]: tags }
            }))
        }
      }
      const dData = await Promise.all(tPromises)
      console.log(dData)
      setTags(prev => Object.assign({}, ...dData))
    }
    fetchTags()
  }, [jobs])

  return [jobs, locations, departments, tags]
}
export default function Jobs () {
 const [jobs, locations, departments, tags] = useJobs()
.....
{jobs.map(job => (
   {tags[job.id] && <Col key={tags[job.id].id}>Tags:{tags[job.id].name} </Col>}
)}
....
}

the problem is that only one item from each array of tags for each job is printed. for example if the array is [1,2,3] and then gets converted to [Css,Js,HTML], only Css is shown. How can I fix this issue?

edit:


  React.useEffect(() => {
    async function fetchTags () {
      const tPromises = []
      for (const job of jobs) {
        for (const tag of job.tags) {
          console.log(tag)
          tPromises.push(fetchJSON(`/api/jobs/view-tag/${tag}`, { headers: headers })
            .then((tags) => {
              return { [job.id]: tags }
            }))
        }
      }
      const dData = await Promise.all(tPromises)
      const tags = dData.reduce((acc, item) => {
        const [key, value] = Object.entries(item)
        if (acc[key]) {
          acc[key].push(value)
        } else {
          acc[key] = [value]
        }
        return acc
      }, {})
      setTags(prev => ({ ...prev, ...tags }))
      console.log(dData)
      setTags(prev => Object.assign({}, ...dData))
    }
    fetchTags()
  }, [jobs])

  return [jobs, locations, departments, tags]
}

Shubham Khatri · Accepted Answer · 2020-05-07 16:59:43Z

1

The data that you receive from promise.all will have multiple tags for same jobId so you cannot directly merge that object, instead you need to process it to convert it to an objectId to tags array mapping

  const dData = await Promise.all(tPromises)
  const tags = dData.reduce((acc, item) => {
      const [key, value] = Object.entries(item)[0];
      if(acc[key]) {
         acc[key].push(value);
      } else {
         acc[key] = [value];
      }
      return acc;
  }, {})
  setTags(prev => ({...prev, ...tags}))

once you do that you can map over the tags and render them

   {tags[job.id] && tags[job.id].map(tag => <Col key={tags[job.id].id}>Tags:{tag.name} </Col>)}

edited May 7, 2020 at 16:59

answered May 7, 2020 at 14:41

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lydal Over a year ago

I receive this error: Unhandled Rejection (TypeError): acc is undefined

Shubham Khatri Over a year ago

sorry I forgot, return acc; inside the reduce function. Updated the post

lydal Over a year ago

Now TypeError: tags[job.id].map is not a function

Collectives™ on Stack Overflow

Array doesnt display all of the items inside it React JavaScript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related