How do I create an object in Javascript using data from GraphQL?

Question

I am a novice to web development, but I am interested in creating an e-commerce website that is sourced via a Google Sheets API (via Sheety ). Each product is listed in the spreadsheet with columns for color , pages , and dimensions . I have linked the API successfully to my site (I am using Gatsby), and I have access to the query via GraphQL. Right now I am just reading all the values in the query out, but I would like to group all of a product's properties together in an object. Then, I would loop through all the objects in order to display all product information. I am familiar with object-oriented programming, but I am having a bit of trouble implementing the translation from GraphQL to a Product object.

My code currently looks as follows. For now, all information is being displayed on the index page:

const IndexPage = ({ data }) => {
 return (
   <Layout>
     {data.allRestApi3A78B9835C2B5Bedce82C6924Ff0243ELilaInventory.nodes[0].inventory.map((inventory) =>          
       return (
         <article>               
           <h4> Color: {inventory.color} </h4>
           <h4> Dimensions: {inventory.dimensions} </h4>
           <h4> Pages: {inventory.pages} </h4>
           <h4> Style: {inventory.style} </h4>
           <img src = {inventory.image} alt = {inventory.id} />
         </article>
       )
   })}     
   </Layout>
 )
}

My plan as of now is to make an array ( ProductList ) that stores Product objects. I will use the data in each row of the spreadsheet to make a new Product , and then push that Product to ProductList .

var ProductList = [];

//I am not sure how to interpret the definition of a function when using GraphQL. 
//I am familiar with the idea of *const*, but the syntax in Javascript is a bit different than what I am used to.

data.allRestApi3A78B9835C2B5Bedce82C6924Ff0243ELilaInventory.nodes[0].map(createObject(inventory));

function createObject(item) {
  var Product = [productColor: {item.color}, productDimensions: {item.dimensions}, etc....];
  ProductList.push(Product);
} 

I also want to create a CSS card for each object because I like how it looks. But, I ultimately want to be able to implement a sorting feature that can iterate through all Products in the array, looking for certain styles or colors. Any advice would be greatly appreciated. Thank you in advance.

Answer 1

You are using map wrong. The map function of an array will return a new array with the result of every element run through the function you send in. So what you want to do is something like this:

const productList = data.allRestApi3A78B9835C2B5Bedce82C6924Ff0243ELilaInventory.nodes[0].map(
  (item) => {
    return { productColor: item.color, productDimensions: item.dimensions };
  },
);

As for how you should approach this, if you are using react you should read into useState if you are using function components, or just regular state if you are using class components. You will want to use state to hold the collection of products that you are displaying so that when you make changes to the state variable, ie for sorting, then those state changes will cause your component to be re rendered, and will reflect in the ui. Then you can for example handle click events on some buttons or whatever you want for the sorting which call a function which will sort the array and update the state. Look into the array method.sort for that or any utility library like lodash. I would also recommend you look into useEffect (or lifecycle methods for class components) if you haven't already. It will help you with managing and handling side effects, like api calls and stuff like that.