0

I'm designing a web app that can import a custom JSON file. The file is completely flattened, meaning every value is only a single layer deep.

The user is importing data into the app. The data comes from an external app. The user must compare the imported data (that was fuzzy matched) with the data in the json to look for errors

The obvious way would be to simply display the text value of the JSON, but this isn't very user friendly.

I could also create a text box for every value in the JSON (and use the key as a label).

Or, is there some form of table that could help? It might become very long if it's only 2 columns wide.

Improve this question
6
  • 1
    Can you tell us more about who the user is for this page, and what they'll be doing with the JSON information? Are they trying to look for very specific variables in a long JSON file, as an example?
    – Izquierdo
    Commented Aug 6, 2021 at 15:28
  • They are importing data into the app. The data comes from an external app. The user must compare the imported data (that was fuzzy matched) with the data in the json to look for errors
    – Simon Tran
    Commented Aug 6, 2021 at 15:31
  • 1
    Thanks. Do you have a sense how lengthy the "value" part of the key/value pair might become? Could it go on for an entire page, as an example?
    – Izquierdo
    Commented Aug 6, 2021 at 15:35
  • According to the schema of the json, the maximum number of key-value pairs is 22, but the app should be able to display more.
    – Simon Tran
    Commented Aug 6, 2021 at 15:37
  • 1
    That is helpful. 3 more questions: Would any of the values be extremely long? Does the user need to compare the values (see more than 1 at a time)? And would the user expect to edit values inline, or would they need to re-upload the JSON file?
    – Izquierdo
    Commented Aug 6, 2021 at 15:41

2 Answers 2

Reset to default
1

The table might be the most user-friendly option here because:

  • It sounds like the JSON file creator is being guided to create 22 rows or less;
  • The data in the cells would not be lengthy;
  • The user would want to see several values at the same time

A table would make it clear where the key ends and the value begins, and strip away brackets and other characters.

Since the data isn't being edited, there's no concern about having to support adding those characters back in, or escaping them.

Improve this answer
1
  • You mean a table with 2 columns, one for the keys and one for the values? I just tried with fake data, and 22 rows is way to long. The user has to scroll back and forth to compare the imported values with the values from the file
    – Simon Tran
    Commented Aug 6, 2021 at 16:04
1

Show one key/value pair at a time, with a "Next" button. The user is comparing each row of JSON to their source file. Isolating each item to review will minimize scrolling back and forth in a table. When the user gets to the end of the review, they can click Done.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.