Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

171
Vistas
Extracting numbers from a string not working in production

I am having an issue with extracting a number from a string in react. The solution I used works fine on the local machine but doesn't work as required when push into production. I tried on netlify and heroku but getting same result.

I fetch the data from a text file which has a list of content and further detail for each of the heading. Link to the text file is here: Link to text file from where I am fetching the data

For example:

  1. Game Concepts 100. General 101. The Magic Golden Rules
  2. Parts of a Card 200. General 201. Name
  3. Card Types 300. General 301. Artifacts

So, I am separating the main headings i.e. 1. Game Concept, 2. Parts of a Card, 3. Card Types and subheadings i.e. 100. General, 101. The Magic Golden Rules, 200. General, 201. Name, 300. General, 301. Artifacts etc... from that text file.

As I mentioned earlier, the method I tried works fine on local machine but as soon as I push the code to production I get the list as it was earlier + the new list that is separated. I tried this as well:

parseFloat([heading]) + "." < 5 , parseFloat([heading]) < 5

...but didn't get desired results.

I have no idea what to do, I shall be grateful for getting some help on this issue.

Below is App.js:

import { useState, useEffect } from "react";
import url from "./MagicRules.txt";
import "./App.css";

function App() {
  let tempdata = [];
  let dataSplit = [];
  let headings = [];

  const [newdata, setNewData] = useState([]);
  useEffect(() => {
    temp();
    // eslint-disable-next-line
  }, [0]);
  const temp = async () => {
    tempdata = await (await fetch(url, { mode: "no-cors" })).text();
    dataSplit = tempdata
      .split(/^\s+|\s+$/gm)
      .filter((element) => isNaN(element));
    dataSplit = dataSplit.slice(0, dataSplit.lastIndexOf("Glossary"));
    headings = dataSplit.filter((heading) => parseInt([heading]) + "." < 5);
    let newHeadings = [...new Set(headings)];
    setNewData(newHeadings);
  };
  return (
    <div className="App">
      {newdata.map((heading, index) => (
        <ul key={index}>{heading}</ul>
      ))}
    </div>
  );
}

export default App;

This is in production

This is what I get on local machine i.e. localhost:3000 and this is the result I want

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Thanks everyone for the help and suggestions. There was a line break ('\n') on those indexes as can be seen in the first picture. I figured that out by using console.log(headings) in the code and deploying that to Netlify/Heroku and after visiting the link, I found that in the console of the browser.

The issue was in the regex used in the split function. I made a small change of 's+' to 's*' which solved the issue. i.e. split(/^\s+|\s*$/gm) instead of split(/^\s+|\s+$/gm).

Hope this would be helpful for others.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda