如何访问嵌套的 JSON graphql object 传递给反应子组件，然后列出这些项目？

Question

GraphQL:

{
 "data": [ 
   "theProducts": { 
    "id": "1",
    "name": "Fitness bands",
    "resistanceLevels": {
         "UltraHeavy": 10,
         "Heavy": 8,
         "Medium": 6 },
    "prices": [
         16.8,
         24.9
         13.2   
           ]
      }  
   ] 
}

I am trying to get the resistanceBands JSON object and the price array to map to the react child component (the query is defined in the parent component) and render the items in a list with bullet points.

Parent Component:

const GET_PRODUCT_DATA = gql`
  query getProducts {
    theProducts {
      id
      name
      resistanceLevels
      prices   
    }
  }

`
// How I am mapping data (name, etc) into the child component

const productsToRender = data.theProducts 
 {productsToRender.map( product => <ProductDisplay key={product.id} product={ product } />) } 

// How can map the object and array to display their items to the ProductDisplay child component?  

Child Component:

<div>
 <h1>{product.name}</h1> // This works
  <p>Resistance Levels | Intensity:</p>
 <ul>
  <li>{product.resistanceLevels}</li> // This doesnt
 </ul>

 <p>Prices</p>
  <ul>
  <li>{product.prices}</li> // This doesnt
 </ul>
</div>

Answer 1

You need to use .map() for prices also because that's an array as:

<ul>
  {product.prices.map(p => <li>{p}</li>)}
</ul>

Also for resistanceLevels you can use Object.keys and .map() combination as:

 const resistanceLevels = { "UltraHeavy": 10, "Heavy": 8, "Medium": 6 }; const result = Object.keys(resistanceLevels).map(k => resistanceLevels[k]); console.log(result);

Read from the documentation:

The Object.keys() method returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would.

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

I guess this gives you the idea how to move further based on the example of prices.map() .

Answer 2

const ParentComponent =()=>{
   return(
      <div>
       {productsToRender.map(product => <ProductDisplay key={product.id} product={product }/>) }
      </div>
   )

}
export default ParentComponent;


const ProductDisplay =(props)=>{
   return (
      <div>
         <h1>{product.name}</h1> 
         <p>Resistance Levels | Intensity:</p>
         <ul>
            {Object.entries(props.product.resistanceLevels).map(([key, value]) =>{
                return(
                    <li>{key} : {value}</li>
                )
            })}
           </ul>
           <ul>
               {
                   props.product.prices.map(item => {
                       <li>{item}</li>
               })
               }
           </ul>
     </div>
   )
}