ReactJS create array from json object for select option

Question

Hi I am very new to reactjs. I have a hosted json file as below. Json object looks like below with Around 500+ values:

[  
  {
    "timestamp": "2020-03-23T14:00:00.000Z",
    "symbol": "CMG",
    "name": "Chipotle Mexican Grill",
    "industry": "Consumer Discretionary",
    "open": 561.31,
    "high": 602.265,
    "low": 551.21,
    "close": 588.71,
    "volumes": 1281710
  },
  {
    "timestamp": "2020-03-23T14:00:00.000Z",
    "symbol": "MTD",
    "name": "Mettler Toledo",
    "industry": "Health Care",
    "open": 615.51,
    "high": 652.94,
    "low": 592.64,
    "close": 641.845,
    "volumes": 157358
  },
  {
    "timestamp": "2020-03-23T14:00:00.000Z",
    "symbol": "AZO",
    "name": "AutoZone Inc",
    "industry": "Consumer Discretionary",
    "open": 711.65,
    "high": 741.865,
    "low": 684.91,
    "close": 723.22,
    "volumes": 435135
  },
  {
    "timestamp": "2020-03-23T14:00:00.000Z",
    "symbol": "GOOGL",
    "name": "Alphabet Inc Class A",
    "industry": "Information Technology",
    "open": 1056.37,
    "high": 1066.91,
    "low": 1008.87,
    "close": 1054.13,
    "volumes": 4116970
  },
  {
    "timestamp": "2020-03-23T14:00:00.000Z",
    "symbol": "GOOG",
    "name": "Alphabet Inc Class C",
    "industry": "Information Technology",
    "open": 1061.32,
    "high": 1071.32,
    "low": 1013.54,
    "close": 1056.62,
    "volumes": 4001750
  },
  {
    "timestamp": "2020-03-23T14:00:00.000Z",
    "symbol": "AMZN",
    "name": "Amazon.com Inc",
    "industry": "Consumer Discretionary",
    "open": 1827.75,
    "high": 1919.4,
    "low": 1812,
    "close": 1902.83,
    "volumes": 7701940
  }
]

I want array of unique industry item from json object. I am trying to create unique array from json object industry and pass it to html . Plan is to use it for searching. But I can't seem to map and store industry object in array. Here is my code :SelectIndustry.js

    function SelectIndustry() {

  const [industry,setindustry]=useState('');
  // fetch jason and store industry
  useEffect (()=>{
    fetch('http://localhost:3000/all')
    .then((rs)=>rs.json())
    .then((rs)=>{rs.map((info)=>{
      return {industry:info.industry}})})
    
  },[])
    // trying to get remove duplicate item from array
    let uniqueindustry = [...new Set(industry)]
    console.log(uniqueindustry)
        // mapping array item to select option
        var select = document.getElementById("selectIndustry"); 
    for(var i = 0; i <uniqueindustry.length; i++) {
        var opt = uniqueindustry[i];

        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
    }
    return (
        <select id='selectIndustry'>
        <option>Choose a Industry</option>
        </select>

    );
}
export default SelectIndustry;

I have no idea how to achieve this. I am happy to rewrite entire code if needed. Please help

Daphaz · Accepted Answer · 2021-05-29 12:19:49Z

1

You can use map in your return

import React, { useState, useEffect } from "react";

const SelectIndustry = () => {
    const [industry, setIndustry] = useState(null);

    const loadIndustry = async () => {
        try {
            const response = await fetch('http://localhost:3000/all');
            const datas = await response.json();
            const filter = datas.map(data => data.industry);
            setIndustry(filter);
        } catch (error) {
            console.log("loadIndustry", error);
        }
    };

    useEffect(() => {
        loadIndustry();
    }, []);

    return (
        <>
            {industry && (
                <select id="selectIndustry">
                    {industry.map((item, index) => (
                        <option key={index}>{item}</option>
                    ))}
                </select>
            )}
        </>
    );
};

export default SelectIndustry;

answered May 29, 2021 at 12:19

Daphaz

5164 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

EdNS Over a year ago

Thanks code works as intended. On return code what does {industry && mean ? I am trying to google but I can't seem to find what syntax is doing here. @Daphaz

Daphaz Over a year ago

mean if industry is not null or undefined is like industry !== null ? () : null , because i define industry null in intial state so if not display select

Collectives™ on Stack Overflow

ReactJS create array from json object for select option

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related