Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how can i get all the parent keys until root when onSelect ? #27

Open
mengke111 opened this issue Dec 18, 2023 · 5 comments
Open

how can i get all the parent keys until root when onSelect ? #27

mengke111 opened this issue Dec 18, 2023 · 5 comments

Comments

@mengke111
Copy link

{
name: 'John',
age: 30,
hobbies: ['reading', 'coding', 'swimming'],
address: {
street: '123 Main St',
city: 'New York',
country: {
name: 'Main ',
codex: '123',
ss: 'fdfdf'
}
}
}

when i select codex ,I want get codex and country and address

function onSelect(e) {
console.log("onSelect")
console.log(e)
}

Thanks very much

@jaywcjlove
Copy link
Member

@mengke111 Does your click event want to be on 'key' or 'value' ?

jaywcjlove added a commit that referenced this issue Dec 18, 2023
@jaywcjlove
Copy link
Member

@mengke111

import React from 'react';
import JsonView from '@uiw/react-json-view';

export default function Demo() {
  return (
    <JsonView
      style={{
        '--w-rjv-background-color': '#ffffff',
      }}
      value={{
        name: 'John',
        age: 30,
        hobbies: ['reading', 'coding', 'swimming'],
        address: {
            street: '123 Main St',
            city: 'New York',
            country: {
                name: 'Main ',
                codex: '123'
            }
        }
      }}
    >
      <JsonView.Row
        as="div"
        render={(props, { keyName, value, parentValue }) => {
          return (
            <div
              {...props}
              onClick={() => {
                console.log("keyName", keyName)
                console.log("value", value)
                console.log("parentValue", parentValue)
              }}
            />
          )
        }}
      />
    </JsonView>
  )
}

github-actions bot pushed a commit that referenced this issue Dec 18, 2023
jaywcjlove added a commit that referenced this issue Dec 18, 2023
github-actions bot pushed a commit that referenced this issue Dec 18, 2023
@andreimatei
Copy link

I had the same question and I'm a bit confused about the answer.
Say that, when a key is clicked, I want to get access to the whole sequence of keys on the path from the root to the node that was clicked (i.e. I want the click handler to get access to all the keys on the path at once). How would I do that / how does the JsonView.Row component help me?
Thanks!

@jaywcjlove
Copy link
Member

jaywcjlove commented Feb 24, 2024

@andreimatei upgrade v2.0.0-alpha.14

<JsonView.Row
  as="div"
  render={(props, { keyName, value, parentValue, keys = [] }) => {
    return (
      <div
        {...props}
        onClick={() => {
          console.log("keys", keys)
        }}
      />
    )
  }}
/>

@andreimatei
Copy link

Thank you! I will try it.
As far as I'm concerned, sounds like this issue can now be closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants