How to customise the JSON output of a state of a component in react?

How to customise the JSON output of a state of a component in react?
0
#1

So, I have a component and Im dislaying the state in JSON format. But I want to change the look of the JSON format. How to do that in react ?

So, My currect output is:

{
  "company": [
    {
      "employee": [
        {
          "name": "abc xyz"
        },
        {
          "id": "xyz001"
        }
      ],
      "details": [
        {
          "age": 30
        },
        {
          "calendar_date": "1989-05-14"
        }
      ]
    }
  ]
}

But I need the output in this format:

"company": { 
"employee": [ 
["abc, xyz"], 
["xyz001"] 
], 
"details": [ 
[30], 
["1989-05-02"] 
] 
}

How can I customise the JSON output ??

#2

First of all, neither of these are valid JSON format. You need to make sure you have all the necessary braces and brackets.

#3

what I need is not in JSON format but, the code above is the state of the component which is displayed in JSON format

#4

Either way, neither of these are valid objects. You are missing braces and brackets.

EDIT: The first one is a valid object.

#5

I have editted the question, so I am looking for a way to display my state in the following way:

"company": { 
"employee": [ 
["abc, xyz"], 
["xyz001"] 
], 
"details": [ 
[30], 
["1989-05-02"] 
] 
}

its not a JSON format. That why I want to know how should I modify my state values in a way that I get such a result

#6

Correct me if I am wrong, but I believe you want the following for the second one:

{
  "company": { 
    "employee": [ 
      ["abc, xyz"], 
      ["xyz001"] 
    ], 
    "details": [ 
      [30], 
      ["1989-05-02"] 
    ]
  }
}

or if “company” is supposed to be a state property, then it would look like:

  "company": { 
    "employee": [ 
      ["abc, xyz"], 
      ["xyz001"] 
    ], 
    "details": [ 
      [30], 
      ["1989-05-02"] 
    ]
  }
#7

yes! I need the output to be like this

#8

So I assume there would be more than one employee inside the company property?

#9

Well, the following should help you get started.

const json1 = {
  "company": [
    {
      "employee": [
        {
          "name": "abc xyz"
        },
        {
          "id": "xyz001"
        }
      ],
      "details": [
        {
          "age": 30
        },
        {
          "calendar_date": "1989-05-02"
        }
      ]
    }
  ]
};

const  {
  company: [
    {
      employee: [
       { name }, { id }
      ],
      details: [
        { age }, { calendar_date }
      ]
    }
  ]
} = json1;


const json2 = {
  company: {
    employee: [
      name.split(' '),
      [id]
    ],
    details: [
      [age],
      [calendar_date]
    ]
  }
};
#10

I cannot use these values directly as in my program, I have a form with a couple of fields and the user inputs the values into the fields and that value is stored in the state. My objective is to print out the state in the format that is shown above.
So my approach was to covert it into a json object and then change it. But I’m doubtful if it will work like that or not