I have JSON getting returned as:

[
   { 
      "node" : "GMC",
      "node1" : "2500",
      "node2" : [ { 
            
            "node2" : "GMC 2500",
            "location" : "Lot",
         }]
   }
]

I want to parse this out and put in a UL, however, I get an error such as [ objects are not valid as reach child (found: object with keys { node, node1 })

I'm trying to read it such as

{types.map(data => {
  <li> {data.node} // this displays GMC
    <ul> { data.node1 } </ul> //get the error.
     <ul> { data.node1.node1 } </ul> //also gives same error) 
 }

I need to show it as:

GMC
   2500
   Lot

is there another way to parse out this JSON file?

CodePudding user response：

1. use =>() to return .

2. data.node1.node1 is undefined because node1 is not an object it's a string so it does not have propreties

3. li should be an ul child not the inverse.

4. return an array of li:

<ul>
types.map(data =>
([
  <li>{data.node}</li>,
  <li>{data.node1}</li>,
])
</ul>

5.(bonnus) types is not a valid JSON but it does not matter here you can check if your JSON is valid here

CodePudding user response：

There are a few issues with your code (ul should contains li, not the opposite. Also data.node1.node1 doesn't exist). But you can try something like: See on JS Fiddle

render() {
    const types = [
       { 
          "node" : "GMC",
          "node1" : "2500",
          "node2" : [
            { "node2" : "GMC 2500", "location" : "Lot" }
          ]
       }
    ]

    return (
      <div>
        <ul>
          {
            types.flatMap(data => ([
                <li>{data.node}</li>,
                <li>{data.node1}</li>,
                data.node2.map(node2 => ([
                    <li>{node2.node2}</li>,
                    <li>{node2.location}</li>,
                ]))
            ]))
          }
        </ul>
      </div>
    )
  }
}

CodePudding user response：

<ul>
  {ARRAY.map((value) => {
    return (
      <li>
        {value.node}
        <ul>
          <li>{value.node1}</li>
          {value.node2.map((node) => {
            return <li>{node.location}</li>;
          })}
        </ul>
      </li>
    );
  })}
</ul>