Nested JSON array displaying as [Object Object] in TextField

Question

I have two sets of JSON, Set 1 and Set 2. Set 1 (sizingData) being mapped to textFields like this:

const fillTextField = () => {
    let result = [];
    var keys = Object.keys(sizingHistory);
    keys.forEach(function (key) {
        result.push(sizingHistory[key]);
    });
    return( 
        {result?.map((data) => {
            return ( <TextField variant="outlined" value={data} /> );
        })}
    )
}

I want to map Set 2 (sizingHistory) similarly, but I am getting [Object Object] in the textField rather than the SizingId & SizingComments. This is my attempt at mapping sizinhHistory:

const [sizingHistory, setSizingHistory] = useState("");
const fillHistoryTextField = () => {
    let result = [];
    var keys = Object.keys(sizingHistory["sizinghistory"]);
    keys.forEach(function (key) {
        result.push(sizingHistory["sizinghistory"][key]);
    });
    return (
        {result?.map((data) => {
            return ( <TextField variant="outlined" value={data} /> );
        })}
    )
}

Set 1

{
    "SizingId": 20448,
    "SizingComments": "This is a comment",
}

Set 2

{
    "sizinghistory" : [
        "SizingId" : 20448,
        "SizingComments": "Old Comment",
    ]
}

The fetch function for both sizingData & sizingHistory are called in their own handleOpen functions. UseEffect cannot be used in this case as data is only displayed when a user selects a row in a table containing a SizingId.

JSON is a textual notation for data exchange. (More here.) If you're dealing with JavaScript source code, and not dealing with a string, you're not dealing with JSON. — T.J. Crowder
– T.J. Crowder, Commented May 4, 2022 at 12:27
Your elements are objects, so they get converted to string, and the default conversion to string on a plain object gives you the string "[object Object]". Use the object's properties, rather than using the objects directly. — T.J. Crowder
– T.J. Crowder, Commented May 4, 2022 at 12:28
Might seem obvious, but this implies you've not converted the object to a string. Have you tried JSON.stringify(sizingHistory)? — Alicia Sykes
– Alicia Sykes, Commented May 4, 2022 at 13:21
I have updated the question to show my attempt at displaying sizingHistory. Using JSON.stringify(sizingHistory)`` results in over a hundred TextFields being rendered each with 1 character. — Ciaran Crowley
– Ciaran Crowley, Commented May 4, 2022 at 13:41

Pablo Carrillo Alvarez · Accepted Answer · 2022-05-04 15:06:55Z

1

You have [Object object] as JS is converting an object to string on Set2, this happens because data.seizingHistory is an array and you have to iterate through it then through the keys of the object inside to get all the data on the text inputs.

This should get you what you need

const [sizingHistory, setSizingHistory] = useState("");
const fillHistoryTextField = () => {
    let result = [];

    (sizingHistory["sizinghistory"]).forEach(element => {
      const keys = Object.keys(element);
      keys.forEach(function (key) {
          result.push(element[key]);
      });
    });

    return (
        {result?.map((data) => {
            return ( <TextField variant="outlined" value={data} /> );
        })}
    )
}

answered May 4, 2022 at 15:06

Pablo Carrillo Alvarez

1,18211 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Nested JSON array displaying as [Object Object] in TextField

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related