Filtering with JSON | TypeScript Community | Page 1

novel jacinth Apr 8, 2024, 1:21 AM

#

noones going to download that

lone geode Apr 8, 2024, 1:21 AM

#

oh, my bad

novel jacinth Apr 8, 2024, 1:21 AM

#

could you provide the code here?

lone geode Apr 8, 2024, 1:21 AM

#

it says its too long, is there any other way?

novel jacinth Apr 8, 2024, 1:21 AM

#

yes https://www.typescriptlang.org/

JavaScript With Syntax For Types.

TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.

hasty onyxBOT Apr 8, 2024, 1:24 AM

#

alexbenkyo#0

Playground Link

Preview:```ts
"use client"

import React, {useState} from "react"
import {Container} from "@/components/container"
import G3deon from "@/icons/G3deon"
import {
Avatar,
Badge,
Tooltip,
} from "@nextui-org/react"
import i18n from "@/locales/creditos.json"
import {Divider} from "@nextui-org/divider"
...```

novel jacinth Apr 8, 2024, 1:28 AM

#

i assume i18n.MEMBERS is the list

#

wheres the filter setting stored?

lone geode Apr 8, 2024, 1:29 AM

#

yes

#

do you want me to provide it?

novel jacinth Apr 8, 2024, 1:29 AM

#

what are you comparing is the question

#

MEMBERS.TITLE ?

lone geode Apr 8, 2024, 1:30 AM

#

oh, my plan was for it to get filtered depending on the teams (set on the arrays at the json), so if i clicked one team, it only shows the avatars of the members from that team

#

btw heres the json if that helps

novel jacinth Apr 8, 2024, 1:30 AM

#

yeah that might be helpfull

lone geode Apr 8, 2024, 1:31 AM

#

{
  "HERO": {
      "TITLE": "Créditos",
      "DESCRIPTION": "En el Politécnico Madre Rafaela Ybarra, reconocemos y valoramos el esfuerzo y la dedicación de todas las personas que han contribuido al crecimiento y éxito de nuestra institución. Nuestra página de Créditos es un espacio dedicado a honrar y reconocer a aquellos que han dejado su huella en nuestra comunidad académica."
  },
  "MEMBERS": [
      {
          "ID": "daniel_rosario",
          "NAME": "Daniel Rosario",
          "AVATAR": "",
          "TEAM": "FrontEnd"
      },
      {
          "ID": "alexander_jimenez",
          "NAME": "Alexander Jiménez",
          "AVATAR": "",
          "TEAM": "FrontEnd"
      },
      {
          "ID": "katia_pujols",
          "NAME": "Katia Pujols",
          "AVATAR": "",
          "TEAM": "FrontEnd"
      },
      {
          "ID": "jarel_feliz",
          "NAME": "Jarel Feliz",
          "AVATAR": "",
          "TEAM": "FrontEnd"
      },
      {
          "ID": "adiel_santos",
          "NAME": "Adiel Santos",
          "AVATAR": "",
          "TEAM": "BackEnd"
      },
      {
          "ID": "aethan_franco",
          "NAME": "Aethan Franco",
          "AVATAR": "",
          "TEAM": "BackEnd"
      },
      {
          "ID": "nahuel_ramirez",
          "NAME": "Nahuel Ramirez",
          "AVATAR": "",
          "TEAM": "BackEnd"
      },
      {
          "ID": "jose_luis_almarante",
          "NAME": "Jose Luis Almarante",
          "AVATAR": "",
          "TEAM": "Docente"
      },
      {
          "ID": "pedro_reyes",
          "NAME": "Pedro Reyes",
          "AVATAR": "",
          "TEAM": "Docente"
      },
      {
          "ID": "juan_andres_moreno",
          "NAME": "Juan Andres Moreno",
          "AVATAR": "",
          "TEAM": "Docente"
      }
  ],
  "TEAM": ["front-end", "back-end"]
}

#

sry its on spanish

novel jacinth Apr 8, 2024, 1:31 AM

#

thats no problem

lone geode Apr 8, 2024, 1:31 AM

#

but i think you get the team part

novel jacinth Apr 8, 2024, 1:31 AM

#

and wheres the input of the selected team u want to filter?

#

is it selectedValue?

lone geode Apr 8, 2024, 1:32 AM

#

yep

#

i thought if i handled it with that value i could filter them

#

but doesnt seem to work neither way

novel jacinth Apr 8, 2024, 1:33 AM

#

so i assume selectedValue could be Docente or BackEnd etc

lone geode Apr 8, 2024, 1:33 AM

#

exactly

novel jacinth Apr 8, 2024, 1:33 AM

#

well

#

replace line 66 with

#

{i18n.MEMBERS.filter((member) => {return member.TEAM === selectedValue}).map((member) => (

lone geode Apr 8, 2024, 1:36 AM

#

ill try it, give me a moment

novel jacinth Apr 8, 2024, 1:36 AM

#

if this doesnt work try
{{i18n.MEMBERS.filter(member => member.TEAM == selectedValue).map((member) => (

lone geode Apr 8, 2024, 1:41 AM

#

tried both, they just take the avatars out and dont filter

#

ill provide pics on how it looks

novel jacinth Apr 8, 2024, 1:41 AM

#

no need to

lone geode Apr 8, 2024, 1:41 AM

#

oh alr

novel jacinth Apr 8, 2024, 1:44 AM

#

u sure this is all the code there is?

#

this is the only place where the list is processed

lone geode Apr 8, 2024, 1:45 AM

#

thats all the code that involves that page, yes

#

if theres another way to do it im also fine with it

novel jacinth Apr 8, 2024, 1:47 AM

#

okay maybe i need a display after all but could you insert a new line after line 139 <div>{member.ID}</div>

#

would be helpfull to understand whats going on

lone geode Apr 8, 2024, 1:48 AM

#

line 139?

#

this is hte display

novel jacinth Apr 8, 2024, 1:49 AM

#

oh im sorry, i inserted your json to fix it

#

anyways i mean your original line 70

#

could you show me what happens with the adjustment of my first answer if you type in a team name?

lone geode Apr 8, 2024, 1:50 AM

#

kk

#

gimme a sec, my discord pc froze lol

#

for starters, it doent map the avatars as it did, and when i select nothing happens

novel jacinth Apr 8, 2024, 1:56 AM

#

makes sense because your filter is emtpy

#

to fix this just do this

#

{i18n.MEMBERS.filter((member) => {return (!selectedValue || selectedValue.length == 0) ? true : member.TEAM === selectedValue}).map((member) => (

lone geode Apr 8, 2024, 2:00 AM

#

it really just displays the same problem

#

same problem happened to me with other methods, same exact problem

novel jacinth Apr 8, 2024, 2:02 AM

#

im not really into the Webframeworks to much and dont know about the livecycles. But this would be the correct way to filter your json array in JS

lone geode Apr 8, 2024, 2:02 AM

#

alright, ill work from it

#

thanks tho :)

hasty onyxBOT Apr 8, 2024, 2:04 AM

#

krauti#0

Playground Link

Preview:ts let i18n = { HERO: { TITLE: "Créditos", DESCRIPTION: "En el Politécnico Madre Rafaela Ybarra, reconocem ...

novel jacinth Apr 8, 2024, 2:04 AM

#

here you see the logic work

#

just press run and log at the logs on the top right

lone geode Apr 8, 2024, 2:08 AM

#

Oh it does work in JS

#

Thanks again :)

novel jacinth Apr 8, 2024, 2:10 AM

#

huh

#

fk me its late

#

it did work before, logs dont clear in the online fiddle

#

anyways good luck, maybe someone that is more into that can help

#Filtering with JSON