Shopify Question posted in
The Shopify help center can be found here.

I want to use Looping inside JavaScript array of Object – Shopify

This is my Sample code. I am using Shopify Polaris for my Shopify App Development Project. Here I am using JavaScript array of Object to load my component dynamically. Here I don’t know how to use looping inside the JavaScript array of object to reduce my code.

For Example,

for (i=0; i<50; i++){ 
const settype = [{label: +i+px, value: +i+px}];
}

This is my exact requirement. I don’t want to code more like below. Someone please help with working code. Thanks in Advance.

 const SizeComponentPx = (props) => {
      const [value, setvalue] = useState(this.state[props.name]);
      const handleSelectChange = useCallback((value) => setvalue(value), [
        this.onChange(props.name, value),
      ]);

      const settype = [
        { label: "0 px", value: "0px" },
        { label: "1 px", value: "1px" },
        { label: "2 px", value: "2px" },
        { label: "3 px", value: "3px" },
        { label: "4 px", value: "4px" },
        { label: "5 px", value: "5px" },
        { label: "6 px", value: "6px" },
        { label: "7 px", value: "7px" },
        { label: "8 px", value: "8px" },
        { label: "9 px", value: "1.4px" },
        { label: "10 px", value: "1.5px" },
        { label: "11 px", value: "11px" },
        { label: "12 px", value: "12px" },
        { label: "13 px", value: "13px" },
        { label: "14 px", value: "14px" },
        { label: "15 px", value: "15px" },
        { label: "16 px", value: "16px" },
        { label: "17 px", value: "17px" },
        { label: "18 px", value: "18px" },
        { label: "19 px", value: "19px" },
        { label: "20 px", value: "20px" },
        { label: "21 px", value: "21px" },
        { label: "22 px", value: "22px" },
        { label: "23 px", value: "23px" },
        { label: "24 px", value: "24px" },
        { label: "25 px", value: "25px" },
        { label: "26 px", value: "26px" },
        { label: "27 px", value: "27px" },
        { label: "28 px", value: "28px" },
        { label: "29 px", value: "29px" },
        { label: "30 px", value: "30px" },
        { label: "31 px", value: "31px" },
        { label: "32 px", value: "32px" },
        { label: "33 px", value: "33px" },
        { label: "34 px", value: "34px" },
        { label: "35 px", value: "35px" },
        { label: "36 px", value: "36px" },
        { label: "37 px", value: "37px" },
        { label: "38 px", value: "38px" },
        { label: "39 px", value: "39px" },
        { label: "40 px", value: "40px" },
        { label: "41 px", value: "41px" },
        { label: "42 px", value: "42px" },
        { label: "43 px", value: "43px" },
        { label: "44 px", value: "44px" },
        { label: "45 px", value: "45px" },
        { label: "46 px", value: "46px" },
        { label: "47 px", value: "47px" },
        { label: "48 px", value: "48px" },
        { label: "49 px", value: "49px" },
        { label: "50 px", value: "50px" },

      ];

      return (
        <div className={"faq_panels " + props.class} value={value}>
          <Select
            label={props.label}
            options={settype}
            onChange={handleSelectChange}
            value={value}
            name={props.name}
          />
        </div>
      );
    };
Tags:

3

Answers


  1. 0

    You can use map function.

    settype.map((type,index)=>{
return (
  <Select
            key={index}
            label={type.label}
            options={settype}
            onChange={handleSelectChange}
            value={type.value}
            name={name}
          />
)
})
    Login or Signup to reply.
  2. 0

    The example that you gave was on the right lines,

    You can instead create an empty array then iterate and using a for loop append each item.

    Demo:

    let settype = []

for (i = 0; i <= 50; i++) {
  settype.push({
    label: i + "px",
    value: i + "px"
  });
}

console.log(settype)
    Login or Signup to reply.
  3. 0

    Just to add another option to the mix:

    const settype = Array.from({length: 50})
   .map((_, idx) => ({ label: `${idx} px`, value: `${idx}px` }))
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search