Accessing nested json data with Hooks

Question

I am having trouble filtering the json that I have in React Typescript Using Hooks. I have a JSON that comes from a fetch and it looks like this:

[
{
"dealer 1":
    [
    {
    "name": "SERVICE 1"
    "city": "NORTH CANTON"
    "phone": "3306596372"
    "isOpen": "true"
    },
    {
    "name": "SERVICE 2"
    "city": "OHIO"
    "phone": "3306596372"
    "isOpen": "true"
    }
    ]
},
{
"dealer 2":
    [
    {
    "name": "SERVICE A"
    "city": "WASHINGTON"
    "phone": "3306596375"
    "isOpen": "true"
    },
    {
    "name": "SERVICE B"
    "city": "SEATTLE"
    "phone": "3306596376"
    "isOpen": "true"
    }
    ]
}
]

my code for fetching the api is:

useEffect(() => {
    axios.get("API URL here")
        .then(res => {
            console.log(res)
            setCTSN(res.data)
        });
}, []);

and I wanted to return all open dealers so I need to filter it by "isOpen=true"

const isOpen = 'true'

const result = OPEN
    .map(item => ({
        ...item, //Spread types may only be created from object types.ts(2698)
        children: item.children
            .filter(child => child.value.includes(isOpen.toLowerCase()))
    }))
    .filter(item => item.children.length > 0)

console.log(result)

but I am getting an error with the '...item' and I'm not sure if I am doing it correctly in React Typescript.

Can someone help me?

cape_bsas · Accepted Answer · 2020-12-09 17:49:36Z

1

You can do it this way

OPEN.filter(item => item[Object.keys(item)[0]].some(service => service.isOpen))

But IMHO you have a problem with the json data, it doesn't looks like a good modelling.

This structure would be better, and thus filtering easier:

{
name: "dealer 1",
services:
    [
    {
    "name": "SERVICE 1"
    "city": "NORTH CANTON"
    "phone": "3306596372"
    "isOpen": "true"
    },
    {
    "name": "SERVICE 2"
    "city": "OHIO"
    "phone": "3306596372"
    "isOpen": "true"
    }
    ]
}

and then filter like this...

OPEN.filter(item => item.services.some(service => service.isOpen))

answered Dec 9, 2020 at 17:49

cape_bsas

7085 silver badges14 bronze badges

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

6 Comments

Deegee Over a year ago

thanks for your help but I am getting an error with the variables as I do not have the "open and services" vars. The json is just stored in an array. @cape_bsas

cape_bsas Over a year ago

OPEN = your json data

cape_bsas Over a year ago

just use the first snippet and it will work (I've checked)

Deegee Over a year ago

Hi @cape_bsas I'm not sure but 'some' throws an error saying "Property 'some' does not exist on type 'never'."

cape_bsas Over a year ago

I don't know where are you running this code, but Array.prototype.some() is available from ECMAScript 2015

|

b3hr4d · Accepted Answer · 2020-12-09 18:14:02Z

0

You should make ur OPEN array with this method then use map for showing them on react.

if u have trouble with showing them , ask me for code on comment.

const Json = [
  {
    "dealer 1": [
      {
        "name": "SERVICE 1",
        "city": "NORTH CANTON",
        "phone": "3306596372",
        "isOpen": true
      },
      {
        "name": "SERVICE 2",
        "city": "OHIO",
        "phone": "3306596372",
        "isOpen": false
      }
    ]
  },
  {
    "dealer 2": [
      {
        "name": "SERVICE A",
        "city": "WASHINGTON",
        "phone": "3306596375",
        "isOpen": true
      },
      {
        "name": "SERVICE B",
        "city": "SEATTLE",
        "phone": "3306596376",
        "isOpen": true
      }
    ]
  }
]
const OPEN = []
Json.forEach(item => {
   OPEN.push({
      dealer:Object.keys(item)[0],
      service:item[Object.keys(item)[0]].filter(service =>service.isOpen)
   })
})
console.log(OPEN)

answered Dec 9, 2020 at 18:14

b3hr4d

4,6381 gold badge13 silver badges24 bronze badges

4 Comments

Deegee Over a year ago

Hi @b3hr4d, thanks for your answer but Im getting errors: 'Json' - Cannot find name 'Json'. Did you mean 'JSON'? 'item' - Parameter 'item' implicitly has an 'any' type. 'service' - Parameter 'service' implicitly has an 'any' type.

b3hr4d Over a year ago

Json is ur data response, and item of any is ur typescript error , u should specify type for them, for test use this Json.forEach((item:any) => {

Deegee Over a year ago

Thanks @b3hr4d, 2 last errors: 'filter' says Property 'filter' does not exist on type 'never' 'service' says 'Parameter 'service' implicitly has an 'any' type'. Do you have any idea on this?

b3hr4d Over a year ago

I think u should learn typescript a bit more , just use // @ts-nocheck on begin of ur file for test .

Collectives™ on Stack Overflow

Accessing nested json data with Hooks

2 Answers 2

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related