How to get value from another array and used as key to form another array?

Derek Hough 0
Viewed 49

How do I extract "category" from data and use it as the key for the new output array that includes "name" field from listData array

 const data = {
    "32": {
        "id": 32,
        "category": "Grocery Items",
    }, I 
     "33": {
        "id": 33,
        "category": "Household Items",
    }, 
}

This is the listData array and I would need to extract the data from list.

const listData = [
{
    "data": {
        "list": [
            {
                "id": 1,
                "category_id": 32,
                "title": "Eggs",
                "category": "Grocery Items"
            },
            {
                "id": 2,
                "category_id": 32,
                "title": "Bacon",
                "category": "Grocery Items"
            }
         ]
     }
}
]

Sample Output:

It contains the category from data as the key and data from list array.

const output = {
    "Grocery Items": [
      {
            "id": 1,
            "category": "Grocery Items",
            "name": "Eggs",
      },
      {
            "id": 2,
            "category": "Grocery Items",
            "name": "Bacon",
      },
      ]
}
reactjs arrays
2 Answers

You don't need to use the first list data to extract the category names. You can use reduce on listData to identify and extract categories by values.

const listData = {
    "data": {
        "list": [
            {
                "id": 1,
                "category_id": 32,
                "title": "Eggs",
                "category": "Grocery Items"
            },
            {
                "id": 2,
                "category_id": 32,
                "title": "Bacon",
                "category": "Grocery Items"
            }
         ]
     }
}

const extractData = (data) => {
  return data.reduce((result, current) => {
    const { category, id, category_id, title } = current
    
    if(!result[category]) {
      result[category] = []
    }
    
    result[category].push({ 
      category: category,
      id: id,
      name: title
    })
    
    return result
    
  }, {})
}

console.log(extractData(listData.data.list))

If you want to filter categories in data on the result list, you can use the below approach

const listData = {
    "data": {
        "list": [
            {
                "id": 1,
                "category_id": 32,
                "title": "Eggs",
                "category": "Grocery Items"
            },
            {
                "id": 2,
                "category_id": 32,
                "title": "Bacon",
                "category": "Grocery Items"
            }
         ]
     }
}

 const categories = {
    "32": {
        "id": 32,
        "category": "Grocery Items",
    }, 
     "33": {
        "id": 33,
        "category": "Household Items",
    }, 
}

const extractData = (data, categories) => {
  const extractedData = data.reduce((result, current) => {
    const { category, id, category_id, title } = current
    
    if(!result[category]) {
      result[category] = []
    }
    
    result[category].push({ 
      category: category,
      id: id,
      name: title
    })
    
    return result
    
  }, {})
  
  const categoryNames = Object.values(categories).map(x => x.category)

  return Object.fromEntries(Object.entries(extractedData).filter(([key]) => categoryNames.includes(key)))
}

console.log(extractData(listData.data.list, categories))

Nick Vu0

You can try this:

Logic:

  • Loop over data's values
  • Look for items in listData.data.list. If exists:
    • Transform the filtered list and remove category from it
    • Add this list to key named category's value

const listData = {"data": {"list": [{"id": 1,"category_id": 32,"title": "Eggs","category": "Grocery Items"},{"id": 2,"category_id": 32,"title": "Bacon","category": "Grocery Items"}]}}

const data = {"32": {"id": 32,"category": "Grocery Items",},"33": {"id": 33,"category": "Household Items",},}

const output = Object.values(data).reduce((acc, {category}) => {
  const filteredList = listData.data.list
    .filter((item) => item.category === category)
    .map(({category, ...rest}) => ({...rest}))
  if (filteredList.length) {
    acc[category] = filteredList
  }
  return acc
}, {})

console.log(output)

usershSf0
Related