Category: javascript

I know this error message has been asked before, but I don’t believe other solutions work for me.

I’m trying to build a backend express server to handle API calls for a React app. I wrote a getData() function to do this, used by an app.post() to send it to the front-end.

The error only pops up when using res.send(), e.g. my API calls work, just break when sending.

Here’s the relevant code:

const getData = async route => {
    const config = {
        headers: {
            'Authorization': `Bearer ${TOKEN}`,
            'Content-Type': 'application/json;charset=utf-8'
        }
    }

    let corrRoute = route[0] == '/' ? route : '/' + route
    return await axios(`${URL}${corrRoute}?api_key=${API_KEY}`, config)
}


app.post('/api', async (req, res) => {
    let { route } = req.body
    res.send(await getData(route))
})

If I replace the res.send at the end there with console.log it prints out perfectly fine. The error is being produced in the server’s index.js file, not in the React app.

Here is the full error text:

[server] (node:9680) UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON
[server]     --> starting at object with constructor 'ClientRequest'    
[server]     |     property 'socket' -> object with constructor 'TLSSocket'
[server]     --- property '_httpMessage' closes the circle
[server]     at JSON.stringify (<anonymous>)

I’ve been trying to complete the “Use model.findOne() to Return a Single Matching Document from Your Database” challenge under the MongoDB and Mongoose lessons on freeCodeCamp, but despite having the same code as the solution, the test fails.

I’ve double checked the formatting of my MongoDB URI in the .env, I’ve tried troubleshooting it as a CORS error, and I’ve even tried disabling my firewall and turning off adblockers / script blockers for freeCodeCamp, mongoDB, and Replit, but to no avail.

When I click the submission button to complete the challenge, the console immediately displays the POST request, but it doesn’t show up under the Network tab in DevTools, and after a varying number of seconds, [object Object] is printed to the console.

What can I do to resolve, or even debug this?

Thanks in advance for your time and consideration.

Edit: The function that specifically should be executing is findOneByFood.

myApp.js –

const mongoose = require('mongoose');
const { Schema } = mongoose;

mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true });

const personSchema = new Schema({
  name : { type: String, required: true },
  age : Number,
  favoriteFoods : [{ type: String, unique: true }]
});

let Person = mongoose.model('Person', personSchema);

const createAndSavePerson = (done) => {
  const johnCarmack = new Person({ name: "John Carmack", age: 51, favoriteFoods: ['iunno', 'Probably Pizza', 'I'm Not Googling It'] });
  johnCarmack.save((err, data) => {
  if (err) return done(err);
  done(null, data);
  });
};

const createManyPeople = (arrayOfPeople, done) => {
  Person.create(arrayOfPeople, (err, data) => {
    if (err) return done(err);
    done(null, data);
  })
};

const findPeopleByName = (personName, done) => {
  Person.find({ name: personName }, (err, data) => {
    if (err) return done(err);
    done(null, data);
  });
};

const findOneByFood = (food, done) => {
  Person.findOne({ favoriteFoods: food }, (err, data) => {
    if (err) return console.log(err);
    done(null, data);
  });
};

const findPersonById = (personId, done) => {
  done(null /*, data*/);
};

const findEditThenSave = (personId, done) => {
  const foodToAdd = "hamburger";

  done(null /*, data*/);
};

const findAndUpdate = (personName, done) => {
  const ageToSet = 20;

  done(null /*, data*/);
};

const removeById = (personId, done) => {
  done(null /*, data*/);
};

const removeManyPeople = (done) => {
  const nameToRemove = "Mary";

  done(null /*, data*/);
};

const queryChain = (done) => {
  const foodToSearch = "burrito";

  done(null /*, data*/);
};

/** **Well Done !!**
/* You completed these challenges, let's go celebrate !
 */

//----- **DO NOT EDIT BELOW THIS LINE** ----------------------------------

exports.PersonModel = Person;
exports.createAndSavePerson = createAndSavePerson;
exports.findPeopleByName = findPeopleByName;
exports.findOneByFood = findOneByFood;
exports.findPersonById = findPersonById;
exports.findEditThenSave = findEditThenSave;
exports.findAndUpdate = findAndUpdate;
exports.createManyPeople = createManyPeople;
exports.removeById = removeById;
exports.removeManyPeople = removeManyPeople;
exports.queryChain = queryChain;

server.js –

 * DO NOT EDIT THIS FILE
 * the verification process may break
 *******************************************/
const express = require("express");
const app = express();
let mongoose;
try {
  mongoose = require("mongoose");
} catch (e) {
  console.log(e);
}
const fs = require("fs");
const path = require("path");
const bodyParser = require("body-parser");
const router = express.Router();

const enableCORS = function (req, res, next) {
  if (!process.env.DISABLE_XORIGIN) {
    const allowedOrigins = ["https://www.freecodecamp.org"];
    const origin = req.headers.origin;
    if (!process.env.XORIGIN_RESTRICT || allowedOrigins.indexOf(origin) > -1) {
      console.log(req.headers.origin + ", " + req.method);
      res.set({
        "Access-Control-Allow-Origin": origin,
        "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
        "Access-Control-Allow-Headers":
          "Origin, X-Requested-With, Content-Type, Accept",
      });
    }
  }
  next();
};

// global setting for safety timeouts to handle possible
// wrong callbacks that will never be called
const TIMEOUT = 10000;

app.use(bodyParser.urlencoded({ extended: "false" }));
app.use(bodyParser.json());

app.get("/", function (req, res) {
  res.sendFile(path.join(__dirname, "views", "index.html"));
});

router.get("/file/*?", function (req, res, next) {
  if (req.params[0] === ".env") {
    return next({ status: 401, message: "ACCESS DENIED" });
  }
  fs.readFile(path.join(__dirname, req.params[0]), function (err, data) {
    if (err) {
      return next(err);
    }
    res.type("txt").send(data.toString());
  });
});

router.get("/is-mongoose-ok", function (req, res) {
  if (mongoose) {
    res.json({ isMongooseOk: !!mongoose.connection.readyState });
  } else {
    res.json({ isMongooseOk: false });
  }
});

const Person = require("./myApp.js").PersonModel;

router.use(function (req, res, next) {
  if (req.method !== "OPTIONS" && Person.modelName !== "Person") {
    return next({ message: "Person Model is not correct" });
  }
  next();
});

router.post("/mongoose-model", function (req, res, next) {
  // try to create a new instance based on their model
  // verify it's correctly defined in some way
  let p;
  p = new Person(req.body);
  res.json(p);
});

const createPerson = require("./myApp.js").createAndSavePerson;
router.get("/create-and-save-person", function (req, res, next) {
  // in case of incorrect function use wait timeout then respond
  let t = setTimeout(() => {
    next({ message: "timeout" });
  }, TIMEOUT);
  createPerson(function (err, data) {
    clearTimeout(t);
    if (err) {
      return next(err);
    }
    if (!data) {
      console.log("Missing `done()` argument");
      return next({ message: "Missing callback argument" });
    }
    Person.findById(data._id, function (err, pers) {
      if (err) {
        return next(err);
      }
      res.json(pers);
      pers.remove();
    });
  });
});

const createPeople = require("./myApp.js").createManyPeople;
router.post("/create-many-people", function (req, res, next) {
  Person.remove({}, function (err) {
    if (err) {
      return next(err);
    }
    // in case of incorrect function use wait timeout then respond
    let t = setTimeout(() => {
      next({ message: "timeout" });
    }, TIMEOUT);
    createPeople(req.body, function (err, data) {
      clearTimeout(t);
      if (err) {
        return next(err);
      }
      if (!data) {
        console.log("Missing `done()` argument");
        return next({ message: "Missing callback argument" });
      }
      Person.find({}, function (err, pers) {
        if (err) {
          return next(err);
        }
        res.json(pers);
        Person.remove().exec();
      });
    });
  });
});

const findByName = require("./myApp.js").findPeopleByName;
router.post("/find-all-by-name", function (req, res, next) {
  let t = setTimeout(() => {
    next({ message: "timeout" });
  }, TIMEOUT);
  Person.create(req.body, function (err, pers) {
    if (err) {
      return next(err);
    }
    findByName(pers.name, function (err, data) {
      clearTimeout(t);
      if (err) {
        return next(err);
      }
      if (!data) {
        console.log("Missing `done()` argument");
        return next({ message: "Missing callback argument" });
      }
      res.json(data);
      Person.remove().exec();
    });
  });
});

const findByFood = require("./myApp.js").findOneByFood;
router.post("/find-one-by-food", function (req, res, next) {
  let t = setTimeout(() => {
    next({ message: "timeout" });
  }, TIMEOUT);
  let p = new Person(req.body);
  p.save(function (err, pers) {
    if (err) {
      return next(err);
    }
    findByFood(pers.favoriteFoods[0], function (err, data) {
      clearTimeout(t);
      if (err) {
        return next(err);
      }
      if (!data) {
        console.log("Missing `done()` argument");
        return next({ message: "Missing callback argument" });
      }
      console.log(data);
      res.json(data);
      p.remove();
    });
  });
});

const findById = require("./myApp.js").findPersonById;
router.get("/find-by-id", function (req, res, next) {
  let t = setTimeout(() => {
    next({ message: "timeout" });
  }, TIMEOUT);
  let p = new Person({ name: "test", age: 0, favoriteFoods: ["none"] });
  p.save(function (err, pers) {
    if (err) {
      return next(err);
    }
    findById(pers._id, function (err, data) {
      clearTimeout(t);
      if (err) {
        return next(err);
      }
      if (!data) {
        console.log("Missing `done()` argument");
        return next({ message: "Missing callback argument" });
      }
      res.json(data);
      p.remove();
    });
  });
});

const findEdit = require("./myApp.js").findEditThenSave;
router.post("/find-edit-save", function (req, res, next) {
  let t = setTimeout(() => {
    next({ message: "timeout" });
  }, TIMEOUT);
  let p = new Person(req.body);
  p.save(function (err, pers) {
    if (err) {
      return next(err);
    }
    try {
      findEdit(pers._id, function (err, data) {
        clearTimeout(t);
        if (err) {
          return next(err);
        }
        if (!data) {
          console.log("Missing `done()` argument");
          return next({ message: "Missing callback argument" });
        }
        res.json(data);
        p.remove();
      });
    } catch (e) {
      console.log(e);
      return next(e);
    }
  });
});

const update = require("./myApp.js").findAndUpdate;
router.post("/find-one-update", function (req, res, next) {
  let t = setTimeout(() => {
    next({ message: "timeout" });
  }, TIMEOUT);
  let p = new Person(req.body);
  p.save(function (err, pers) {
    if (err) {
      return next(err);
    }
    try {
      update(pers.name, function (err, data) {
        clearTimeout(t);
        if (err) {
          return next(err);
        }
        if (!data) {
          console.log("Missing `done()` argument");
          return next({ message: "Missing callback argument" });
        }
        res.json(data);
        p.remove();
      });
    } catch (e) {
      console.log(e);
      return next(e);
    }
  });
});

const removeOne = require("./myApp.js").removeById;
router.post("/remove-one-person", function (req, res, next) {
  Person.remove({}, function (err) {
    if (err) {
      return next(err);
    }
    let t = setTimeout(() => {
      next({ message: "timeout" });
    }, TIMEOUT);
    let p = new Person(req.body);
    p.save(function (err, pers) {
      if (err) {
        return next(err);
      }
      try {
        removeOne(pers._id, function (err, data) {
          clearTimeout(t);
          if (err) {
            return next(err);
          }
          if (!data) {
            console.log("Missing `done()` argument");
            return next({ message: "Missing callback argument" });
          }
          console.log(data);
          Person.count(function (err, cnt) {
            if (err) {
              return next(err);
            }
            data = data.toObject();
            data.count = cnt;
            console.log(data);
            res.json(data);
          });
        });
      } catch (e) {
        console.log(e);
        return next(e);
      }
    });
  });
});

const removeMany = require("./myApp.js").removeManyPeople;
router.post("/remove-many-people", function (req, res, next) {
  Person.remove({}, function (err) {
    if (err) {
      return next(err);
    }
    let t = setTimeout(() => {
      next({ message: "timeout" });
    }, TIMEOUT);
    Person.create(req.body, function (err, pers) {
      if (err) {
        return next(err);
      }
      try {
        removeMany(function (err, data) {
          clearTimeout(t);
          if (err) {
            return next(err);
          }
          if (!data) {
            console.log("Missing `done()` argument");
            return next({ message: "Missing callback argument" });
          }
          Person.count(function (err, cnt) {
            if (err) {
              return next(err);
            }
            if (data.ok === undefined) {
              // for mongoose v4
              try {
                data = JSON.parse(data);
              } catch (e) {
                console.log(e);
                return next(e);
              }
            }
            res.json({
              n: data.n,
              count: cnt,
              ok: data.ok,
            });
          });
        });
      } catch (e) {
        console.log(e);
        return next(e);
      }
    });
  });
});

const chain = require("./myApp.js").queryChain;
router.post("/query-tools", function (req, res, next) {
  let t = setTimeout(() => {
    next({ message: "timeout" });
  }, TIMEOUT);
  Person.remove({}, function (err) {
    if (err) {
      return next(err);
    }
    Person.create(req.body, function (err, pers) {
      if (err) {
        return next(err);
      }
      try {
        chain(function (err, data) {
          clearTimeout(t);
          if (err) {
            return next(err);
          }
          if (!data) {
            console.log("Missing `done()` argument");
            return next({ message: "Missing callback argument" });
          }
          res.json(data);
        });
      } catch (e) {
        console.log(e);
        return next(e);
      }
    });
  });
});

app.use("/_api", enableCORS, router);

// Error handler
app.use(function (err, req, res, next) {
  if (err) {
    res
      .status(err.status || 500)
      .type("txt")
      .send(err.message || "SERVER ERROR");
  }
});

// Unmatched routes handler
app.use(function (req, res) {
  if (req.method.toLowerCase() === "options") {
    res.end();
  } else {
    res.status(404).type("txt").send("Not Found");
  }
});

const listener = app.listen(process.env.PORT || 3000, function () {
  console.log("Your app is listening on port " + listener.address().port);
});

/********************************************
 * DO NOT EDIT THIS FILE
 * the verification process may break
 *******************************************/

I am wanting to get this function to work to display the timezone in the footer of my webpage. As of now, when the webpage is loaded, the timezone does not appear in the footer of the webpage as intended.

This is what I have for JS script:

// This function displays the timezone.

function timezoneName() {
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
console.log(timezone);
document.getElementById("timezone").innerHTML = timezone;
}
timezoneName();

This is what I have for .html footer:

<footer>
<p id="timezone"></p>
</footer>

When I click on an ‘imposter’ I want it to become grey with some text as you can see in my CSS with the selector .imposter.voted. But when I click another imposter I want that one to appear grey and the previous one to appear like usual again.

When I try this.classList.remove("voted") it does not work and it just makes all the imposters I select grey. The class does not get removed. I don’t see where I went wrong.

imposters = document.querySelectorAll(".imposter");

for (let i = 0; i < imposters.length; i++) {
  imposters[i].addEventListener("click", function() {
    this.classList.add("voted");
  });
}

.imposter.voted {
  background-color: gray;
  position: relative;
  opacity: 0.7;
}

.imposter.voted::after {
  content: "I voted";
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-block;
  font-family: "Comic Sans Ms";
  color: red;
}

.imposters__voting {
  text-align: right;
}

<main class="dashboard">
  <h1>Who Is The Imposter?</h1>
  <div class="imposters">
    <div class="imposter">Baba</div>
    <div class="imposter">Baraki</div>
    <div class="imposter">Garfield</div>
    <div class="imposter">Erik</div>
    <div class="imposter">GreenBlood4</div>
    <div class="imposter">Easter</div>
  </div>
</main>

I just found about pnpm today and it helped solve my issue with npm timing out on my installation which is amazing.
I’ve a problem with pnpm tho in the docker image.

Previously with just npm I had unprivileged user like so

FROM node:14.17.3-slim

# build args
ARG NPM_AUTH_TOKEN
ARG HOME=/home/app
ARG NPMRC_PATH=$HOME/.npmrc

# setup unprivileged user
RUN useradd -Umrd $HOME app
WORKDIR $HOME
USER app

# copy configuration
COPY --chown=app:app "bin" "bin"
COPY --chown=app:app "package.json" "package-lock.json" "webpack.config.js" ".babelrc" ./

RUN ./bin/write_npmrc && 
    npm ci --production=false

ENV NODE_ENV=development
VOLUME ["$HOME/config", "$HOME/log", "$HOME/src"]
CMD ["npm", "start"]
EXPOSE 9000

But if I switch to the pnpn I’m no longer able to proceed with building the image due to Permission Denied and I need to use root user.

FROM node:14.17.3-slim

# build args
ARG NPM_AUTH_TOKEN
ARG HOME=/home/app
ARG NPMRC_PATH=$HOME/.npmrc

RUN apt-get update && apt-get install -y curl 
 && rm -rf /var/lib/apt/lists/*
RUN curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm

WORKDIR $HOME

# copy configuration
COPY "bin" "bin"
COPY "package.json" "pnpm-lock.yaml" "webpack.config.js" ".babelrc" ./

RUN ./bin/write_npmrc && 
    pnpm install --frozen-lockfile

ENV NODE_ENV=development
VOLUME ["$HOME/config", "$HOME/log", "$HOME/src"]
CMD ["pnpm", "start"]
EXPOSE 9000

Is there a way so I can keep

# setup unprivileged user
    RUN useradd -Umrd $HOME app
    WORKDIR $HOME
    USER app

With pnpm instead?

I want to use fetch or axios to download a html content of a page, this works fine but the javascript code inside the page does not run

here is what i’ve tried

document.getElementById('test').innerHTML=
await (await fetch('url')).text()

what i want is similar to this answer, but i want to get the page with the javascript inside processed instead of running a script.

Can I run a JS script from another using `fetch`?

My goal is to create a boostrapEmail template that i can send parameters and make it dynamic, using localstorage

https://bootstrapemail.com/docs/introduction

I received this string: Ticket #: 9 (ORIGINAL)nDate/Time: 12/10/2020 03:33 PM from an API, I want to breakline using n and I use useState to print it:

const [Ticket, setTicket] = useState('');

const getData = async (ID, Serial) => {
    try{
      const res = await FetchRewards(ID, Serial)
      console.log('%c Ticket has been found Successfully. Status: 200 ', 
     'background: #28a745; color: #fff')

        setTicket(res.data.ticket.ticket);
        console.log(res)
    }
    catch (err){
      console.error("404: Ticket not found")
    }
  }

but my problem is trying to make split on Ticket to make breaklines using n, this is my split function to do that:

const text = `Ticket #: 9 (ORIGINAL)nDate/Time: 12/10/2020 03:33 PM`;

let ticketWrap = text.split("n").map(i =>{
    return `<p>${i}</p>`; // this is JSX in my real code
});

console.log(ticketWrap)

When I add a text with n,ticketWrap returns the breakline, but using Ticket it returns: Ticket #: 9 (ORIGINAL)nDate/Time: 12/10/2020 03:33 PM

I am trying to write a Javascript/appscript for an Appsheet app. I cant figure this out, if someone could please help.

I have Three Sheets:
Project
Subtasks
Notes

I would like to be able to send the Project owner an email, that includes the project name all of the tasks assigned to that project (relationship via PK/FK ID,Project Name) and all of the notes assigned to that project (same relationship as Notes PK/FK ID,Project Name)

• I have provided a sample of all the tables, their columns, and an ideal sample output

idealOutput

I built a react component package locally, with Rollup.

Tech stack of package is: React, typescript, styled-components and so on…

1. That package lives inside of the one project.

2. Now I am trying to use that package inside of another project locally.

3. Now I am trying to test that package

   • yarn link
   • open second project executed yarn link “package-name”
   • Imprted component (package)
   • yarn start

Result:

Failed to compile.

../enrollment-client/src/components/GeneralSectionForm/GeneralSectionForm.tsx 31:7
Module parse failed: Unexpected token (31:7)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| import { TOAST_ERRORS } from '../../utils/constants';
| 
> export type QuestionElementRef = {
|   id: string | undefined;
|   element: HTMLDivElement | null;

got the error regarding that the current webpack configuration inside of the project is not enough to compile this package – something like that.

That is something that I am currently investigating, and trying to figure out why? 🙂

Any help will be super appreciated

Situation: I have a div with a Tippy attached to it, and inside the DIV there are highlighted spans with their own tooltips. They all use ‘click’ as triggers.

Ideal behavior: When I click on a highlight, only the highlight Tippy should show.

Current behavior: Both tooltips show at the same time.

I can catch the click with onTrigger, using “event.target”. However, “return false” or “instance.hide()” do not prevent it from showing. Is there a way I can do that with onTrigger?

tippy(divEl, {
content: 'Tooltip!',
   allowHTML: true,
  onTrigger(instance, event) {
    if (event.target.className == 'highlight') 

{console.log('It should hide the tooltip!');
instance.hide();
return false;
}
  },
    arrow: true,
    interactive: true,
    trigger: 'click',
    theme: 'light-border',
    zIndex: 9999
      });
}

I got it working with the following trick, but it wouldn’t work if I had other DIVs inside the main DIV:

tippy(divEl, { ...,

onShow(instance) {
    if (item.lastChild.nodeName == "DIV") {return false}
  },
});

i tried the lightbox from W3 school and it works nicely, but if I have more modals on one page the script open all of them together.

Is it possible to set within one script some condition which modal should be opened? Or/and is this the correct way of thinking how to code it?

I omitted from code lower the styling and tons of other content to make it shorter but i didn’t do any changes in the original script from W3 except of adding new line of “myModal1” to functions open/closeModal which is the problem i try to solve.

Thank you very much in advance for your answers. 🙂

<div id="epo20-23">
    <div class="row">
        <div class="whole-gallery">
            <h2 style="text-align:center;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">gallery
            </h2>
        </div>
    </div>
    <div id="myModal" class="modal">
        <span class="close cursor" onclick="closeModal()">&times;</span>
        <div class="modal-content">
            <div class="mySlides">
                <div class="numbertext">1 / 2</div>
                <img src="image1.jpg" style="width:100%">
            </div>
            <div class="mySlides">
                <div class="numbertext">2 / 2</div>
                <img src="image2.jpg" style="width:100%">
            </div>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
            <div class="caption-container">
                <p id="caption"></p>
            </div>
            <div class="column-container">
                <div class="column">
                    <img class="demo cursor" src="image1.jpg" style="width:100%" onclick="currentSlide(1)">
                </div>
                <div class="column">
                    <img class="demo cursor" src="image2.jpg" style="width:100%" onclick="currentSlide(2)">
                </div>
            </div>
        </div>
    </div>
</div>
<div id="epo24-38">
    <div class="row">
        <div class="whole-gallery">
            <h2 style="text-align:center;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">gallery
            </h2>
        </div>
    </div>
    <div id="myModal1" class="modal">
        <span class="close cursor" onclick="closeModal()">&times;</span>
        <div class="modal-content">
            <div class="mySlides">
                <div class="numbertext">1 / 2</div>
                <img src="image3.jpg" style="width:100%">
            </div>
            <div class="mySlides">
                <div class="numbertext">2 / 2</div>
                <img src="image4.jpg" style="width:100%">
            </div>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
            <div class="caption-container">
                <p id="caption"></p>
            </div>
            <div class="column-container">
                <div class="column">
                    <img class="demo cursor" src="image3.jpg" style="width:100%" onclick="currentSlide(1)"
                        alt="img3">
                </div>
                <div class="column">
                    <img class="demo cursor" src="image4.jpg" style="width:100%" onclick="currentSlide(2)"
                        alt="img4">
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function openModal() {
        document.getElementById("myModal").style.display = "block";
        document.getElementById("myModal1").style.display = "block";
    }

    function closeModal() {
        document.getElementById("myModal").style.display = "none";
        document.getElementById("myModal1").style.display = "none";
    }

    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        var captionText = document.getElementById("caption");
        if (n > slides.length) { slideIndex = 1 }
        if (n < 1) { slideIndex = slides.length }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
        captionText.innerHTML = dots[slideIndex - 1].alt;
    }
</script>

I am unable to fetch the query parameters of frontend GET request, on the backend side.
I tried using url and query. I need to fetch the query on the nodejs side.
Kindly suggest a suitable method that would help me get the details on GET request using axios.

code –

component.ts – angular file

googleSearch(googleText){


let params = new HttpParams();
    params = params.append('q', googleText.trueLocation);
       

return new Promise((resolve, reject) => {
this.httpClient.get("http://localhost:3003/seekSearchApi" , ({params:params}))
      .pipe(map(Response => Response))
    
      .pipe(catchError(this.errorHandler))
      .subscribe((res: Response) => {

        this.writeItOutput = res;
        
        resolve(this.writeItOutput);

      });

    })
    
  

}
errorHandler(error: HttpErrorResponse) {
  return throwError(error.message || 'server Error');
}
}

server.js- express file

app.use('/seekSearchApi', require('./server/nodejs-serverapi'));

applicationserver.js – nodejs file

function seekSearchApi(req,res) { 

var query = require('url').parse(req.url,true).query;

console.log("req.query.q", query.q);  //no response

console.log("Inside seekSearchApi");

  axios({
    method: 'get',
    url: 'https://serpapi.com/search.json?',
    data: {
      api_key: "xxxx",
      q:query.q
      hl: "en",
      gl: "us",
      google_domain: "google.com"
    }
  }).then((response) => {
    res.send(stringify(response))
   
  }, (error) => {
    console.log(error);
  });

I’m testing a functional component that uses Window.onload to stay on a certain page. Example of the code

function SignUpForm(props) {

  const history = useHistory();
  const {setOnPage } = props;
  window.onload = setOnPage("/registrarse")

My test is:

import React from 'react'
import Enzyme from "enzyme";
import { screen, render } from '@testing-library/react'

import SignInScreen from './SignInScreen'
import Adapter from "enzyme-adapter-react-16"

const { shallow } = Enzyme; 

Enzyme.configure({ adapter: new Adapter() })

describe('Test for login in form', () => {
    test("renders correctly", () => {
        shallow(<SignInScreen/>);
      });
});

The error is in the line of Window.onload, I have not been able to find any solution that can help me.

setOnPage is not a function

So Hi i am trying to render columns and rows in material table which are loaded from redux.

Let my try to explain

const data = useKPIReport(_ => _.data) // from redux

<TableContainer>
        <MaterialTable
          tableRef={tableRef}
          columns={options.columns}
          options={}
           data={
            async (query) => {
              const {
                page,
                pageSize
              } = query
              try {
                const fetchReport = async () => {
                  try {
                    const result = await postReport({
                      startDate: startDateEpoch / 1000,
                      endDate: endDateEpoch / 1000,
                      page: page + 1,
                      pageSize,
                      accountId
                    })
           
                    const { rows, totalRowsCount } = data // this is important data from redux
                    return {
                      columns: formattedCols,
                      totalCount: totalRowsCount,
                      rows
                    }
                  } catch (e) {
                    console.error(e)
                    return handleError()
                  }
                }
                const result = await fetchReport()
          
                return ({
                  data: result.rows,
                  page,
                  totalCount: result.totalCount,
                })
              } catch (e) {
                console.error(e)
                dispatch(snackbarMessagesAction({
                  severity: 'error',
                  messages: [t('Failed to fetch report')]
                }))
                return ({
                  data: [],
                  page: 0,
                  totalCount: 0
                })
              }
            }}

So overall postReport() method it doesn’t return any results, it sends data to redux, and look like redux is updated later so it’s not possible return results in time.

Any idea how to tackle this in data prop, i have tried something with useEffect:

 React.useEffect(() => {
    tableRef.current && tableRef.current.onQueryChange()
  }, [data])

but feeling this is not possible, i need some general idea usually API endpoint (“postReport()”) returns results but that is not option for me since i am storing results into redis, and later redux is updated via server side event.

Can someone help me with a regular expression? How can I write one in JS that will accept:

“42”
“42 is my favorite number”
“I have 42 cats”
“I really like 42”

But reject
“12342”
“423”
“14211”
“167889994442113233”
Etc.

I tried D*42D* but no dice.. it’s been keeping me up! Any tips? It’s been a few years since I covered regexs