Group an object by its name using Java Script/Vue.Js

Question

Group an object by its name using Java Script/Vue.Js

I am looking to group objects by partial name and assign them to variables

data =
{
   SCHOOL-ADMISSION_YEAR: "2021"
   SCHOOL-SCHOOL_NAME: "ABC SCHOOL"
   SCHOOL-SCHOOL_LOCATION: "NEWYORK"
   ENROLLMENT-ADMISSION_YEAR: "2021"
   ENROLLMENT-SUBMISSION_DATE: "2020-04-02"
   ENROLLMENT-ENROLLMENT_DATE: "2020-06-02"
}

The desired groups are

 School =
  {
   ADMISSION_YEAR: "2021",
   SCHOOL_NAME: "ABC SCHOOL",
   SCHOOL_LOCATION: "NEWYORK",
  }

 Enrollment =
  {
   ADMISSION_YEAR: "2021",
   SUBMISSION_DATE: "2020-04-02",
   ENROLLMENT_DATE: "2020-06-02",
  }

var school = data.filter(p => p.contains('SCHOOL'));
var enrollment = data.filter(p => p.contains('ENROLLMENT'));

javascript vue.js

Answer 1

Answer №1

When working with plain objects that don't have a built-in filter method, you must iterate through them using a loop. One way to filter and map an object is by first converting it to an entry array and then back again using ES2019's fromEntries:

const school = Object.fromEntries(
  Object.entries(data)
  .filter(([key]) => key.includes('SCHOOL-'))
  .map(([key, val]) => [key.replace('SCHOOL-', ''), val])
);

For an array of objects, the process is slightly different:

const school = Object.entries(data)
  .filter(([key]) => key.includes('SCHOOL-'))
  .map(([key, val]) => ({ [key.replace('SCHOOL-', '')]: val }));

Answer 2

When working with plain objects that don't have a built-in filter method, you must iterate through them using a loop. One way to filter and map an object is by first converting it to an entry array and then back again using ES2019's fromEntries:

const school = Object.fromEntries(
  Object.entries(data)
  .filter(([key]) => key.includes('SCHOOL-'))
  .map(([key, val]) => [key.replace('SCHOOL-', ''), val])
);

For an array of objects, the process is slightly different:

const school = Object.entries(data)
  .filter(([key]) => key.includes('SCHOOL-'))
  .map(([key, val]) => ({ [key.replace('SCHOOL-', '')]: val }));

Answer 3

Answer №2

Here's a solution that should meet your needs:

function findItemsWithSubstring(substring) {
  let itemsWithSubstring = [];

  for (let key of Object.keys(items)) {
    if (key.includes(substring)) {
      itemsWithSubstring.push(items[key])
    }
  }
  return itemsWithSubstring;
}

You can then use it like this:

findItemsWithSubstring("BOOK"); // => ['The Book Thief', 'Book Club', 'Bookstore']
findItemsWithSubstring("FILM"); // => ['Film Festival', 'Action Films', 'Foreign Films']

Answer 4

Here's a solution that should meet your needs:

function findItemsWithSubstring(substring) {
  let itemsWithSubstring = [];

  for (let key of Object.keys(items)) {
    if (key.includes(substring)) {
      itemsWithSubstring.push(items[key])
    }
  }
  return itemsWithSubstring;
}

You can then use it like this:

findItemsWithSubstring("BOOK"); // => ['The Book Thief', 'Book Club', 'Bookstore']
findItemsWithSubstring("FILM"); // => ['Film Festival', 'Action Films', 'Foreign Films']

Group an object by its name using Java Script/Vue.Js

Answer №1

Answer №2

Similar questions

Unlocking location data in React Router-DOM 6: A step-by-step guide

The Gateway to Github: Unveiling the Mysteries through a

Confused about the concept of an SWR subscription

How can I access dynamically created input elements without using $refs, such as getting focus?

Tips for delivering a variable to a React Native Stylesheet

Tips for displaying a table with a button click

What is the best way to apply "display: none;" on a span element nested within a title attribute?

Exploring the concept of reflection in JavaScript and jQuery

Error in Jest Testing: An unexpected character '@' was encountered

How can we use jQuery to extract an HTML element's external stylesheet and add it to its "style" attribute?

What is the best way to upload a file to Firebase Storage using React?

Chaining inheritance through Object.create

Tips for using JavaScript to set images from Flickr API as img src

Having trouble grasping the inner workings of code while iterating through a JSON array in ReactJS

Ensure that this specific attribute remains responsive by either setting it within the data option or initializing it for class-based components. Vuex is another viable option to consider for managing state

Steps to retrieve an ext.js grid using data from a database

Using Ajax.BeginForm with BeforeSend functionality

The error message for ExpressJS states: "Headers cannot be set after they have already been sent."

Issues arise when JQuery functions fail to execute

What are the steps for installing the latest version of popper, v2?