Hide array index

[mysticek]

Hello, is there a way, how to hide array index numbers? Just show array items without 1, 2, 3... indexesM

[pionxzh]

There is a KeyRenderer config. But returning empty or null in that function would still show the colon which makes it look weird.

Things we can do to achieve what you want:

1. If the key is empty, hide the colon.
2. Wait for proposal: passing parent to the onAdd fn #469

[pionxzh]

Another solution would be adding data-type to the dom so that you can do it in pure css.

[mysticek]

Thank you.

Second question - is possible to show commas after values? (::after selector is not solution, because you cant copy it)

@pionxzh

[pionxzh]

Comma... I think this one can be added to the package. Can you submit another request for it?

[pionxzh]

#496 has added support for hiding arbitrary index/key. I will prepare a demo after it gets released.

[pionxzh]

released 3.5.0 with this feature. Let me prepare the demo this week.

[pionxzh]

Please check the demo with

1. hiding array index
2. show comma

Btw, you can also select and copy valid JSON without hiding the array index. Try it out!

[hatton]

This took me a while to figure out. Future self, to stop this component from adding index numbers before all array items, do this:

  const KeyRenderer: JsonViewerKeyRenderer = ({ path }) => {
    const last = path[path.length - 1];
    return Number.isInteger(last) ? null : last;
  };
  KeyRenderer.when = () => true;

and then

      <JsonViewer
      keyRenderer={KeyRenderer}
      ...

[pionxzh]

This is how it was done in the example above

const KeyRenderer = () => {
  return null;
};
KeyRenderer.when = ({ path }) => {
  /**
   * check if the key is a number.
   *
   * This can be wrong in some edge cases like Map.
   */
  return typeof path[path.length - 1] === 'number';
};