accessing data from a nested Json

Question

I have a object which will be replaced by a JSON response structure later as given below which i am passing as props and in the child component i want map through "values" to render the data.

App.js

“data”: {
         “title”: {
           “text”: “”
         },
         “subtitle”: {
           “text”: “”
         },
         “renderable”: [
           {
             “title”: {
               “text”: “”
             },
             “sub_title”: {
               “text”: “”
             },
             “values”: [
               {
                 “id”: “1”,
                 “title”: {
                   “text”: “”
                 },
                 “subtitle”: {
                   “text”: “”
                 },
                 “price_tag”: {
                   “text”: “Rs 99"
                 },
                 “preselected”: “true”
               },
               {
                 “id”: “2",
                 “title”: {
                   “text”: “”
                 },
                 “sub_title”: {
                   “text”: “”
                 },
                 “price_tag”: {
                   “text”: “Rs 199”
                 },
                 “preselected”: “false”
               },
             ]
           }
         ]
       }

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Demo options={data} />
      </React.Fragment>
    )
  }
}

I am not sure as to how to access and map the "values" which is inside renderable ( renderable as of now has one object inside it, but will be populated later) in the Child component.

Answer 1

Your data-structure is

Data (Object) -> Renderable (Array of Objects) -> Values (Array)

So you would first do

data.renderable...

Then you can map over the array and tap into each object, which contains the values array.

data.renderable.map((obj) => obj.values)

You then could map over obj.values , but it would make more sense to use .flatMap() which puts all items into a one-level array.

data.renderable.flatMap((obj) => obj.values.map((item) => item.id))

Answer 2

example Demo could display data like

class Demo extends React.Component {

render(){
    const { data } = this.props;
    return (
        <div>
            <h1>{data.title}</h1>
            <h2>{data.subtitle</h1>
            <ul>
                {data.renderable.map(row => (
                    <h1>{row.title}</h1>
                    <h2>{row.subtitle</h1>
                        {row.values.map(item => (
                            <li key={item.id}>
                                {item.title}
                                {item.subtitle}
                                {item.price_tag}
                            </li>
                        ))}
                ))}
            </ul>
        </div>
        )
    }
}

export default Demo;