Get only one data from a json

Question

I have a problem, that I have searched and tried solutions, but none worked for me. My problem is the following, I have a json, I do a fetch, well, the issue is that I want to highlight a specific position, I want to place it on a card and thus look more beautiful. But of course, when doing it as I have it, it puts all the json elements in a new card. Well my fetch is basic:

export default () => {
  const classes = useStyles();

  const url = "Datos.json";
  const [todos, setTodos] = useState();
  const fetchApi = async () => {
    const response = await fetch(url);
    const responseJSON = await response.json();
    setTodos(responseJSON);
  };
  useEffect(() => {
    fetchApi();
  }, []);
  return (
    <div>
      {/*{props.data.rows.map((item, indx) => {*/}
      {!todos
        ? "Cargando..."
        : todos.map((todo, index) => {
            var dta = [];
            var date = new Date(todo.dt * 1000);
            var hours = "0" + date.getHours();
            var minutes = "0" + date.getMinutes();
            var formattedTime =
              hours.substr(-2) +
              ":" +
              minutes.substr(-2); /*+ ':' + seconds.substr(-2)*/
            dta.push(formattedTime);
            console.log(todos);
            return (
              <div>
                <Typography>{todo.Competicion}:</Typography>
                <Typography variant="h1" gutterBottom>
                  {dta} {todo.evento} {/* FEATURED EVENT, MUST BE 1 OR 2 MAXIMUM, LATER REPLACEMENT BY THE CARD WITH IMG, ETC... */}
                </Typography>
                <Typography variant="h6" gutterBottom>
                  {dta} {todo.evento} {/* ALL EVENTS (INCLUDING HIGHLIGHTS)*/}
                </Typography>
                <OldButtons {...todo} />
              </div>
            );
          })}
      {/*})}*/}
    </div>
  );
};

I want to print only one position of all the json, something like this: all.event[0], as if it were an array.
my structure json is basic:

[
  {
    "dt": "1668339000",
    "Partido": "PHYT6",
    "Competicion": "Error",
    "Estadisticas": "",
    "Switch": 0,
    "EnlaceMatchs": {
      "valor1": "",
      "valor2": "",
      "valor3": "",
      "valor4": "",
      "valor5": "",
      "valor6": ""
    }
  },
  {
    "dt": "1668339000",
    "Partido": "PHYT7",
    "Competicion": "Error",
    "Estadisticas": "",
    "Switch": 0,
    "EnlaceMatchs": {
      "valor1": "",
      "valor2": "",
      "valor3": "",
      "valor4": "",
      "valor5": "",
      "valor6": ""
    }
  },
  {
    "dt": "1668339000",
    "Partido": "PHYT8",
    "Competicion": "Error",
    "Estadisticas": "",
    "Switch": 0,
    "EnlaceMatchs": {
      "valor1": "",
      "valor2": "",
      "valor3": "",
      "valor4": "",
      "valor5": "",
      "valor6": ""
    }
  },
]

Camilo Gomez · Answer 1 · 2022-11-16T02:48:48.400

I don't know the structure of your JSON

But this can help you

How to access first element of JSON object array

Edit:

if your JSON is a string, use JSON.parse(responseJSON) before saving it to setTodos

And now you could handle it as if it were an array

const [todos, setTodos] = useState([]);
const position = 17;

return(
 <div>
   {todos && todos.length !== 0 ? 
    <>
     <Typography>{todos[position].Competicion}:</Typography>
     <Typography variant="h1" gutterBottom>
     {todos[position].evento} 
     </Typography> 
    </> : <Typography>Empty</Typography>}
 </div>
);

But this is not dynamic, could you:

const [todos, setTodos] = useState([]);
const [position, setPosition] = useState(0);

const handleChangePosition = (event) => {
 const value = event.target.value;
 if(todos && todos.length !== 0 && value <= todos.length && value >= 0)
  setPosition(value);
}

return(
 <div>
   {todos && todos.length !== 0 ? 
    <>
     <input value={position} onChange={handleChangePosition} />
     <Typography>{todos[position].Competicion}:</Typography>
     <Typography variant="h1" gutterBottom>
     {todos[position].evento} 
     </Typography> 
    </> : <Typography>Empty</Typography>}
 </div>

You can also start from a specific index and continue iterating.

Start a for loop on specific index

I edited there, and no, I don't want to access the first one, I want to access the one I want, for example, the one in position 17 for example, and keep changing depending on the position I want. — MatiST00, Nov 16 '22 at 02:01
With the second method, the dynamic one works fine for me, but now my question is the following, I'm going to use this to highlight only a couple of json elements, and then, further down, but on the same page, I want it to continue printing all items (including highlights). This method works, or it will demand more load to the page? — MatiST00, Nov 16 '22 at 19:23

Get only one data from a json

1 Answers1