Hola, soy muy nuevo en reaccionos. Tengo un archivo JSON alojado como a continuación. El objeto JSON se ve a continuación con alrededor de 500 valores:

[  
  {
    "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
  }
]

Quiero Array de ítem de la industria única del objeto JSON. Estoy tratando de crear una matriz única de la industria de objetos JSON y pasarla a HTML. El plan es usarlo para la búsqueda. Pero parece que no puedo mapear y almacenar el objeto de la industria en la matriz. Aquí está mi código: 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;

No tengo idea de cómo lograr esto. Estoy feliz de reescribir el código completo si es necesario. Por favor ayuda

0
EdNS 29 may. 2021 a las 14:54

1 respuesta

La mejor respuesta

Puedes usar el mapa en tu regreso.

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;
1
Daphaz 29 may. 2021 a las 12:19