Category: javascript

I’m trying to perform a simple GET request to the google maps API, but my browser keeps blocking the response. I’m getting the following warning in my console:

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=address1&destinations=address2&key=api_key with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

I censored the addresses and api key for reading convenience.

This is my JavaScript code:

$.ajax({
    url: https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=address1&destinations=address2&key=api_key,
    type: "GET",
    dataType: 'jsonp',
    cache: false
  });

I want to place all controls (zoom and map type) on the right side

I want to create an if function in netsuite where the condition is
if the number is less than 2000000 then the value is T. if the number is less than 10000000 then the value is T. but if the numbers are 2000000 the value is F

/**
 *@NApiVersion 2.x
 *@NScriptType UserEventScript
 *@author Test 
 */
define(['N/ui/serverWidget','N/record','N/runtime','N/search'],
    function (serverWidget, record, runtime, search){
        function beforeSubmit(context){
            try{
                var newRecord = context.newRecord;
                var type = context.type;
                if (type == context.UserEventType.CREATE || type == context.UserEventType.EDIT){
                    var subTotal = newRecord.getValue({
                        fieldId:'subtotal'
                    });
                if(subTotal < 2000000 || subTotal < 10000000){
                    newRecord.setValue({
                        fieldId: 'custbody_me_trans_code',
                        value: true,
                        ignoreFieldChange: true
                    });
                }
                else if(subTotal = 2000000){
                    newRecord.setValue({
                        fieldId: 'custbody_me_trans_code',
                        value: false,
                        ignoreFieldChange: true
                    });
                }
            }
        }
            catch (error){
                    log.debug("error", error);
                    throw "Something Error " + error;
            }
        }
        function afterSubmit(context) { 

            try {
                log.debug("After Submit")
            } 
            catch (error) {
                log.debug("error", error);
                throw "Something Error " + error;
            }
        }
        return {
            beforeSubmit: beforeSubmit,
            afterSubmit: afterSubmit
        };
    })

I made an if condition but 2000000 still becomes F because less than 10000000. Thanks for helping

Component.ts file with selector stored as a string in testWidget variable

   import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
})
export class DashboardComponent implements OnInit {

    constructor() { }
    dashboard: any;
    ngOnInit(): void {}
    
    // variable with a child component selector stored as a string
    testWidget = `<app-dashboard></app-dashboard>`;
}   

In html file this should render the component.

  <testWidget></testWidget>

Any other approach that dynamically renders the component will also work as selector names will come from the database

How to view pdf downloaded? There is no problem on downloading pdf, the problem is the viewing, cant view the downloaded pdf, why is that?

I have this code

  static getAttachement(item) {
    return axios.get(this.contextUrl + '/test', {responseType: 'blob'})
      .then(response => {
        console.log("response: ", response.data)
        return response.data;
      })
      .catch(error => {
        throw error;
      });
  }

this is the return

and this

  const handlePrint = async () => {
    await WorkflowApi.getAttachement().then((res)=>{
      // Create blob link to download
    const url = window.URL.createObjectURL(
      new Blob([res]),
    );
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute(
      'download',
      `FileName.pdf`,
    );

    // Append to html link element page
    document.body.appendChild(link);

    // Start download
    link.click();

    // Clean up and remove the link
    link.parentNode.removeChild(link);
    })
  }

result

I am working on Jquery and i am displaying “countdown timer” using jquery and right now i am showing timer of “1 minute 25 seconds” but after this time i am getting “-1 minutes : 59 seconds”, There should be display “0 minutes 0 seconds”,how can i do this? Here is my current code

<script>
var timer2 = "0:25";
var interval = setInterval(function() {
  var timer = timer2.split(':');
  //by parsing integer, I avoid all extra string processing
  var minutes = parseInt(timer[0], 10);
  var seconds = parseInt(timer[1], 10);
  --seconds;
  minutes = (seconds < 0) ? --minutes : minutes;
  if (minutes < 0) clearInterval(interval);
  seconds = (seconds < 0) ? 59 : seconds;
  seconds = (seconds < 10) ? '0' + seconds : seconds;
  //minutes = (minutes < 10) ?  minutes : minutes;
  $('.countdown').html(minutes + ' minutes : ' + seconds + ' seconds');
  timer2 = minutes + ':' + seconds;
}, 1000);


</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countdown"></div>

I am working on to show analytics of user visits on a page and unique user visits on a page using mixpanel. We are storing events in mixpanel there is an event named Page Visit from where using currentUrl I am getting the data for the page visits. when I check the data in mixpanel and from the api, I am getting correct page visits but the data for unique page visits is comming out +20-40 , I am using type=unique in the api while making the call I am getting the csv format data and getting the data using the following code in react

const helper = await res.text();
const lines = helper.split(/r?n/);
const helper2 = await resnotunique.text();
const lines2 = helper2.split(/r?n/);
var csvData2 = [];

var csvData = [];
for (let i = 1; i < lines.length - 1; i++) {
  csvData[i - 1] = lines[i].split(",");
  csvData2[i - 1] = lines2[i].split(",");
}

for (let i = 0; i < csvData.length; i++) {
  value = +value + +parseInt(csvData[i][1]);
  value2 = +value2 + +parseInt(csvData2[i][1]);
}

Here res is the result of the total page visits api call and renotunique is the api result of the unique page visits.

I have checked my api calls and tried in postman but the data is adding up to be wrong only for the unique page visits.
I am expecting correct data from mixpanel. Please help.

I have a custom react + webpack + babel + typescript setup for a simple react application that consumes some component from other packages.

File structure

src 
  components/**
  index.ts
docs
  index.ts > importing files from src and packages from @conn.

I have webpack config as

const path = require("path");
const outDir = path.resolve(__dirname, "docs");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const includePaths = [
  path.join(__dirname, "docs"),
  path.join(__dirname, "src"),
  path.join(require.resolve("@conn")
];

const exportObj = {
  entry: [path.join(__dirname, "/docs/index.tsx")],
  mode: "development",
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
    alias: {
      react: path.resolve("./node_modules/react"),
    },
  },
  devtool: "source-map",
  output: {
    path: outDir,
    filename: "main.js",
    chunkFilename: "[name].chunk.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "docs/index.html",
    }),
  ],
  devServer: {
    port: 3030, // you can change the port
  },
  module: {
    rules: [
      {
        test: /.jpe?g$|.gif$|.png$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[path][name].[ext]",
            },
          },
        ],
        exclude: /node_modules/,
      },
      {
        test: /.css$/i,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: true,
            },
          },
        ],
        include: includePaths,
        exclude: /node_modules/,
      },
      {
        test: /.(js|jsx|ts|tsx)$/,
        use: [
          {
            loader: "babel-loader",
          },
        ],
        include: includePaths,
      },
      {
        test: /.woff2?(?v=d+.d+.d+)?(?[dA-z]{6})?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              mimetype: "application/font-woff",
            },
          },
        ],
        include: includePaths,
      },
      {
        test: /.ttf(?v=d+.d+.d+)?(?[dA-z]{6})?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              mimetype: "application/octet-stream",
            },
          },
        ],
        include: includePaths,
      },
      {
        test: /.eot(?v=d+.d+.d+)?(?[dA-z]{6})?$/,
        use: ["file-loader"],
        include: includePaths,
      },
      {
        test: /.svg(?v=d+.d+.d+)?(?[dA-z]{6})?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              mimetype: "image/svg+xml",
            },
          },
        ],
        include: includePaths,
      },
    ],
  },
};
module.exports = exportObj;

babel.config.js

{
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-typescript",
    "@babel/plugin-syntax-import-meta",
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }],
    "@babel/plugin-proposal-json-strings",
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ],
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-do-expressions",
    "react-hot-loader/babel"
  ],
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    ["@babel/preset-typescript"]
  ]
}

I am getting below error while running the build

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:Usersdingolegitconfiguration-componentsnode_modules@connURLToProps.jsx: Unexpected token, expected "," (34:24)

  33 |       const { Component } = this;
> 34 |       return <Component {...props} />;
     |                         ^
  35 |     }
  36 |   }
  37 |   return URLToProps;

I tried installing babel react preset and all the required babel plugins but the issue still persist.

I am developing a Chrome extension for Gmail.

Ideally, as soon as the user signs up and opens any mail from the inbox, the extension should appear just before the Reply button.

The problem is –
The extension behaves in a weird pattern. It disappears on odd refreshes, and sometimes it disappears on refreshing the page on multiple of 3. There is no specific pattern.

I have tried a couple of things but had no luck solving the issue.

I also found that when the extension doesn’t appear, the control doesn’t even go into the gmail-injector file.

Does it have anything to do with the Manifest file or Mutation Observer? I am confused.

I have faced an issue in my vue.JS project while using CK Editor5. When i use the below HTML code in source editing (CK editor component) it shows an error like this. Please review the attached image. And I didn’t get the expected output from the editor.

Html content :

Sample text ABCDEFG, XYZ

[enter image description here](https://i.stack.imgur.com/5yTPq.png)

I have used below code in ck editor and i got the mentioned error.

<section>
    <div class="container">
        <div class="min-height-400">
            <p>
                Heading
            </p>
       <p><span  style="color:red"> Sample text <span class="has-text-white"> ABCDEFG</span>, XYZ </span></p>
        </div>
    </div>
</section>

Error:

ckeditorerror.js?4d68:118 Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at _iterableToArray (iterableToArray.js?5822:2:1)
    at _toConsumableArray (toConsumableArray.js?ab35:6:1)
    at mergeViewElementAttributes (conversionutils.js?9a8a:48:1)
    at dispatcher.on.priority (converters.js?94bb:104:1)
    at UpcastDispatcher.fire (emittermixin.js?0e61:199:1)
    at UpcastDispatcher._convertItem (upcastdispatcher.js?e583:249:1)
    at UpcastDispatcher._convertChildren (upcastdispatcher.js?e583:282:1)
    at UpcastDispatcher.eval (upcasthelpers.js?bb9b:783:1)
    at UpcastDispatcher.fire (emittermixin.js?0e61:199:1)
    at UpcastDispatcher._convertItem (upcastdispatcher.js?e583:249:1)

First of all I tried to look for a solution to this specific issue in stackOverflow but i didn’t find an answer for it.

The problem is with fetching an API endpoint from an express server. “GET” requests succeed while “POST” requests fail from the frontend (React). I should mention that there is no problem at all when i try fetching the API with POSTMAN, everything works as it should be.

Here is the code snippet :

BACKEND (Express JS) :

1. app.js

require('dotenv').config();

const express = require("express");
const mongoose = require("mongoose");
const { urlencoded } = require("express");
const WorkoutRoutes = require("./Routes/workouts");
const cors = require('cors');

// Start the App
const app = express();
app.use(cors());

// Must be specified before the Routes
app.use(express.json());

// The routes
app.use("/api/workouts", WorkoutRoutes);

// For Form Data
app.use(urlencoded({extended : true}));

// Connect to MongoDB using Mongoose
mongoose.set("strictQuery", false);
mongoose.connect(process.env.DB_URI, {useNewUrlParser: "true",useUnifiedTopology: "true"})
.then(()=>{
app.listen(process.env.PORT, ()=>{
    console.log("app started on Port" + process.env.PORT);
})
});

2. Workouts Routes :

const express = require("express");
const mongoose = require("mongoose");
const router = express.Router();
const workoutscontrollers = require("../Controllers/workoutsControllers");

// Get All Workouts
router.get("/", workoutscontrollers.getAllWorkouts);

// Get a single Workout
router.get("/:id", workoutscontrollers.deleteAsingleWorkout);

// Post a new Workout
router.post("/", workoutscontrollers.postAnewWorkout);

// Delete a Workouts
router.delete("/:id", workoutscontrollers.deleteAsingleWorkout);

// Update a Workout
router.patch("/:id", workoutscontrollers.updateAworkout);

module.exports = router;

3. Workout Controller :

const express = require("express");
const mongoose = require("mongoose");
const router = express.Router();
const Workout = require("../models/workoutModel");

const getAllWorkouts = async (req, res) => {
  // find() with or without {}
  const allworkouts = await Workout.find();
  res.status(200).json(allworkouts);
};

const getAsingleWorkout = async (req, res) => {
  const { id } = req.params;

  if (!mongoose.Types.ObjectId.isValid(id)) {
    return res.status(404).json({ error: "There is no such Workout" });
  }

  const workout = await Workout.findById(id);

  res.status(200).json(workout);
};

const postAnewWorkout = async (req, res) => {
    const { title, reps, load } = req.body;
  
    try {
      const workout = await Workout.create({ title, reps, load });
      res.status(200).json(workout);
    } catch (error) {
      res.status(404).json({ error: error.message });
    }
  }

  const deleteAsingleWorkout = async (req, res) => {
    const { id } = req.params;
  
    if (!mongoose.Types.ObjectId.isValid(id)) {
      return res.status(404).json({ error: "There is no such Workout" });
    }
  
    const workout = await Workout.findOneAndDelete({ _id: id });
  
    res.status(200).json(workout);
  }

  const updateAworkout = async (req, res) => {
    const { id } = req.params;

    if (!mongoose.Types.ObjectId.isValid(id)) {
      return res.status(404).json({ error: "There is no such Workout" });
    }
  
    const workout = await Workout.findOneAndUpdate({ _id: id }, {
        ...req.body
    });
  
    res.status(200).json(workout);
}

module.exports = {
    getAllWorkouts,
    getAsingleWorkout,
    postAnewWorkout,
    deleteAsingleWorkout,
    updateAworkout
}

4. Workout Model :

const mongoose = require("mongoose");

const Schema = mongoose.Schema;

const workoutsSchema = new Schema({
    title : {
        type: String,
        required:true
    },

    reps: {
        type: Number,
        required:true
    },
    load : {
        type: Number,
        required:true
    }

}, {timestamps : true});


module.exports = mongoose.model("Workout", workoutsSchema);

Package.json (Backend)

{
  "name": "backend",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "nodemon app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.2.1",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "g": "^2.0.1",
    "mongoose": "^6.8.1",
    "node": "^19.3.0",
    "nodemon": "^2.0.20"
  },
  "description": ""
}

Now the Frontend

1. App.js (React) :

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./pages/Home";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route
          path='/'
          element={<Home/>}
          />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

2. Home.js

import { useState, useEffect } from "react";
import AddWorkout from "../components/AddWorkout";

const Home = () => {
  const [workouts, setWorkouts] = useState(null);

  useEffect(() => {
    const fetchWorkouts = async () => {
      const res = await fetch("http://localhost:5000/api/workouts");
      const json = await res.json();

      if (res.ok) {
        setWorkouts(json);
      }
    };
    fetchWorkouts();
  }, []);

  return (
    <div className="home">
      <div className="workouts">
        {workouts &&
          workouts.map((workout) => (
            <div key={workout._id}>
              <p>{workout.title}</p>
              <p>{workout.reps}</p>
              <p>{workout.load}</p>
            </div>
          ))}
      </div>
      <div className="addForm">
        <AddWorkout />
      </div>
    </div>
  );
};

export default Home;

3. AddWorkout.js

import { useState } from 'react';

const AddWorkout = () => {

  const [workout, setWorkout] = useState(null);
  const [text, setText] = useState('');
  const [reps, setReps] = useState(0);
  const [load, setLoad] = useState(0);

       

        const handleText = (e) => {
         const text = e.target.value;
         setText(text);
        };

        const handleReps = (e) => {
          const reps = e.target.value;
          setReps(reps);
  
        };

        const handleLoad = (e) => {
          const load = e.target.value;
          setLoad(load);

        };
       
        const handleForm = (e) => {
          e.preventDefault();
          const workout = {text, reps, load};
          setWorkout(workout);

          fetch("http://localhost:5000/api/workouts", {
            method:'POST',
            body:JSON.stringify(workout),
            header:{'content-Type': 'application/json'}
          }).then(data => console.log(data))
            .catch(err => console.log(err));

        };

  return (
  
    <form onSubmit={handleForm}>
      <label>Title</label>
      <input type="text" value={text} onChange={handleText} />
      <label>Reps</label>
      <input type="text" value={reps} onChange={handleReps} />
      <label>Load</label>
      <input type="text" value={load} onChange={handleLoad} />
      <input type="submit"/>

    </form>

  );
};

export default AddWorkout;

So what am i doing wrong?

Thanks

I’m trying to put the values beneath the point labels like this

Is there a way to make it in chart js? Or is there a way to get the pointLabels html part so I can make an absolute position of them and put my values beneath each one of them

import { Sequelize, QueryTypes, DataTypes } from "sequelize";

const sequelize = new Sequelize("sqlite::memory:", {
  pool: {
    max: 5, // max conns.; default 5
    min: 0, // min conns.; default 0
    acquire: 30000, // maximum time (in ms) that a connection can be idle before throwing an error; default 30000
    idle: 10000, // max time (in ms) that a connection can be idle before being released; default 10000
  },
});

console.log("LOADING: inside db.ts");

export const populateDb = async () => {
  try {
    console.log("START: creating table(s)");

    const User = sequelize.define(
      "User",
      {
        userKey: {
          type: DataTypes.INTEGER,
          autoIncrement: true,
          primaryKey: true,
        },
        name: {
          type: DataTypes.STRING,
          allowNull: false,
        },
        username: {
          type: DataTypes.STRING,
          allowNull: false,
        },
      },
      {
        freezeTableName: true, // enforces that table name = model name
      }
    );

    // sync method creates table
    await User.sync({ force: true });
    console.log("COMPLETE: table(s) (re)created");

    console.log("START: populating database");

    // statement: sequelize.models.User === User

    const u1 = await sequelize.models.User.create({
      username: "gary",
      name: "Gary",
    });

    const u2 = await sequelize.models.User.create({
      username: "chris",
      name: "Christine",
    });

    console.log("COMPLETE: database populated");

    return true;
  } catch {
    console.log("FAILURE: did not populate database");

    return false;
  }
};

async () => await populateDb();

export default sequelize;

I’m trying to run populateDb() when the module first loads via my import. Attempting to run the async func. isn’t working in my example.

I only need it to load once and of course on reloads. Is there a way to do this? Ideally, I’d like to wait until until sequelize fully loads, but I don’t see any hooks in the documentation to allow for this.

I have to build a small interesting navigation using ReactJs & Tailwind. Everything is almost done except animating an indicator when changing a position.
So everything is associated with an absolute position indicator, so I will only share information about it.

So it has 2 states (in order to dynamically define the position and width of the menu item):

const [indicatorWidth, setIndicatorWidth] = useState('');
const [indicatorPosition, setIndicatorPosition] = useState('');

and selecting menu items like:

const items: any = document.querySelectorAll(".menuItem");

So, in order to select a link from navigation, I have a click event on the link:

onClick={() => setActiveNav(i)}

And here is the function that will make it work:

const setActiveNav = async (index: number) => {
        if (items[index]) {
            setActive(index)
            await new Promise(r => setTimeout(r, 0));
            setIndicatorPosition(items[index].offsetLeft)
            setIndicatorWidth(items[index].offsetWidth)
        }
    }

So at that point, only thing to define is style of the indicator like:

<span className={`nav-indicator`} style={{width: indicatorWidth, left: indicatorPosition}}/>

And to make it beautiful:

.nav-indicator{
  position: absolute;
  background: linear-gradient(90deg, #F27261 0%, #A63121 100%);
  box-shadow: 0 0 300px 24px rgba(225, 63, 50, 0.6);
  border-radius: 80px;
  top: 0.70rem;
  height: 70%;
  transition: ease-in-out 0.3s;
}

So the problem comes in the end… I’m managing to animate the transition between changing the navigation. I should only make it to rotate it a bit before finalizing the select.
Should I use before and after? What would be the best way here?

The term ‘java’ is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was
included, verify that the path is correct and try again

To get it right answer.

user will enter the details like name, address and designation which is in the dropdown and there is add button to insert this data so I will display these data through innerHTML. Now I need to display a dropdown which will help to filter the data depending upon the option of the dropdown.
Below is my code.

var data = [];
        var fnameInput = document.getElementById("fname");
        var addressInput = document.getElementById("address");
        var designationInput = document.getElementById("designation");
        var sel=document.getElementById("sel");
        var messageBox = document.getElementById("display");

        function insert() {
        var fname, address, designation;
        fname =fnameInput.value;
        address =addressInput.value;
        designation =designationInput.value;
          data.push({
            id: new Date().getTime(),
            fname:fname,
            address:address,
            designation:designation
        });
        clearAndShow();
      }
      
      function clearAndShow() {
            fnameInput.value = "";
            addressInput.value = "";
            designationInput.value = "";

            var html = "";
            console.log("aaaaaaaa");
            
            for(i = 0; i <= data.length - 1; i++)
            {
                
                html += "<div>";
                html += "<div><span>" + data[i].fname + "</span>&nbsp;&nbsp;<span><button type='button' onclick='deleteUser("+data[i].id+")'>Delete</button>" + 
                "<button type='button' onclick='editUser("+data[i].id+")'>Edit</button></span></div>" ;
                html += " <div> " + data[i].address + "</div>";
                html += " <div>  " +data[i].designation + "</div>";
                html += "</div>";
            }
            messageBox.innerHTML = html;
            }

        function deleteUser(id){
          data = data.filter(user=>user.id != id);
          clearAndShow();
        }

        function editUser(name,address,designation){
            document.getElementById("fname").value = name;
            document.getElementById("address").value = address;
            document.getElementById("designation").value = designation;
        } 
       
        function dataOnly(){
            console.log("??????????????");
            var user=document.getElementById("sel").value;
            var all=document.getElementById("all");
            var get=document.getElementById("get");
            var se=document.getElementById("se");
            var dev=document.getElementById("dev");
            var others=document.getElementById("others");

            if(user=="All"){
              all.style.display="block"
              get.style.display="block";
              se.style.display="block";
              dev.style.display="block";
              others.style.display="block";
              const alll = document.getElementById("all")
              console.log(alll.dataset.value);
              
            }
            if(user=="Gratuate Engineering Trainee"){
              all.style.display="none"
              get.style.display="block";
              se.style.display="none";
              dev.style.display="none";
              others.style.display="none";
              const gett = document.getElementById("get")
              console.log(gett.dataset.value);
       

            }else if(user=="Software Engineer"){
              all.style.display="none"
              get.style.display="none";
              se.style.display="block";
              dev.style.display="none";
              others.style.display="none";
              const see = document.getElementById("se")
              console.log(see.dataset.value);
              
              
            }else if(user=="Developer"){
              all.style.display="none"
              get.style.display="none";
              se.style.display="none";
              dev.style.display="block";
              others.style.display="none";
              const devv = document.getElementById("dev")
              console.log(devv.dataset.value);
              
              
            }else if(user=="others"){
              all.style.display="none"
              get.style.display="none";
              se.style.display="none";
              dev.style.display="none";
              others.style.display="block";
              const otherss = document.getElementById("others")
              console.log(otherss.dataset.value);
              
            }

    }

        <form>
          <h1>Please enter details</h1>
          <input id="fname" type="text" placeholder="fname" /><br></br>
          <textarea id="address" name="Address" placeholder="address" rows="2" cols="10"></textarea><br></br>
          <select id="designation" name="des" placeholder="designation">
            <option value="Gratuate Engineering Trainee">Gratuate Engineering Trainee</option>
            <option value="Software Engineer">Software Engineer</option>
            <option value="Developer">Developer</option>
            <option value="others">others</option> </select><br></br>
          <input type="button" value="Add" onclick="insert()" />
          
          <select id="sel"  onchange="dataOnly()">
            <option value="All">All</option>
            <option value="Gratuate Engineering Trainee">Gratuate Engineering Trainee</option>
            <option value="Software Engineer">Software Engineer</option>
            <option value="Developer">Developer</option>
            <option value="others">others</option> </select><br></br>
        

            <div id="all" data-id="fname.value" ></div>
            <div id="get" data-id="fname.value" ></div>
            <div id="se" data-id="fname.value" ></div>
            <div id="dev" data-id="fname.value" ></div>
            <div id="others" data-id="fname.value" ></div>
        
        <div id="display">
          
        </div>

I tired adding dropdown so that the admin will get the information of the specific designation members with address but I am not able to get the details.
Example: one data with name:”aaa” address: “bbb” designation: “Graduate Engineering Trainee”
another data with name:” ccc” address: “ddd” designation: “Developer”
now I am able to add these to array through innerHTML and display both but, with the help of another dropdown I need to segregate the data like,
if I choose developer in dropdown option there should be “ccc” and “ddd” as output.
similarly if I choose graduate engineer trainee there should be “aaa” and “bbb” as output.