Category: javascript

I am using the Error Handling method using the Result type, which I have posted in this question.

Using the Result type, I could easily build a chain of functions like this

Result.combine(result1, result2)
.onFailure(err => doSomethingOnFailure())
.onSuccess(val => doSomethingOnSuccess())

This flow looks good for me, but I have a problem.

function func(a, b) {
// Some code above
const result = Result.comine(aResult, bResult).onFailure(err => {
// I want to return fail result to the func here but do not know how
})

// So I have to do a simple if check
if (result.failure) {
// Return fail result here
}
}

I want to return the fail result to the parent function inside the onFailure function.

Could I somehow achieve this?

I have an unordered list with a variable number of list items. The <ul> is of fixed height (actually the height of a single line of text) and set to overflow-y: scroll.

When I scroll the mouse-wheel, a certain vertical distance is traversed. I would like to have it exatly scroll line by line, to ensure that a <li> is always properly centered in the visible part of the <ul>.

Wrong behaviour:

:root {
  --default-line-height: 24px;
}

.myUl {
  background-color: lightblue;
  height: var(--default-line-height);
  list-style-type: none;
  overflow-y: scroll;
  outline: 1px solid black;
}

.myLi {
  font-size: var(--default-line-height);
}

<ul class="myUl">
  <li class="myLi">Lorem ipsum dolor sit amet</li>
  <li class="myLi">Aenean commodo ligula eget dolor.</li>
  <li class="myLi">Cum sociis natoque penatibus</li>
  <li class="myLi">Donec quam felis, ultricies nec</li>
  <li class="myLi">Nulla consequat massa quis enim.</li>
  <li class="myLi">Donec pede justo, fringilla vel</li>
  <li class="myLi">In enim justo, rhoncus ut</li>
</ul>

<p>Please scroll the blue area.</p>

I played with scroll-snap but to no real success. I “feels” awkward.
It seemed reasonable to be able to scroll line by line under certain conditions. But after spending some hours on the subject, I’m not sure anymore :-/

Thanks in advance
Christian

Im trying to map my state , but it allways returns me this error, someone knows how to solve it ?

 const FormScreen = async({route}) => { 
      const [userForm, setuserForm] = useState([]);
      const mounted = useRef(true);
    
      useEffect(async() => {
        let mounted = true; 
        if (mounted && userForm.length > 0 ){
          console.log(userForm,'campos:',userForm.fields);
          return;
        }
        else {
          setuserForm(await JSON.parse(route.params.paramKey));
        }   
        return () => (mounted = false);
    }, [userForm]);
           
      return (
        <SafeAreaView style={{flex: 1}}>
          <View style={styles.container}>
            <Text style={styles.textStyle}>
              COLLECTION :
            </Text>
    
          {
            userForm.length > 0 ? (
              userForm.map(async(item) => (
          <Text keys={await item.fields.toString()}>testtt</Text>        
          )) 
          ): <Text> Loading ...</Text>}
           
          </View>
        </SafeAreaView>
      );
    };

what I’m trying to do is render all my fields and then handle the following types.

So I have two arrays with objects. And also an array indicating where the replacement should take place(It spots if object contains error)

         const oldData = [
    {
        "index": "01",
        "skuId": "Sarbb-033",
        "name": "Sasko Black",
        "barcode": "843331510012",
        "description": "Nice black bread",
        "brand": "ERROR: No brand matching: Sasko",
        "productLine": "ERROR: No product line matching: line",
        "inputType": "Weight",
        "uom": "ERROR: Invalid UoM type, valid values are: kg,g,mg,kl,l,ml,m,cm,mm",
        "value": "700",
        "capacity": "1",
        "image": ""
    },
    {
        "index": "02",
        "skuId": "ERROR: Empty sku_id is not allowed",
        "name": "Sasko Black1",
        "barcode": "ERROR: Empty barcode is not allowed",
        "description": "Nice black bread",
        "brand": "ERROR: No brand matching: Future Life",
        "productLine": "ERROR: No product line matching: line",
        "inputType": "Weight",
        "uom": "kg",
        "value": "701",
        "capacity": "2",
        "image": ""
    },
    {
        "index": "03",
        "skuId": "Sarbb-099",
        "name": "Sasko Black100",
        "barcode": "843332555614",
        "description": "Nice black bread",
        "brand": "fwfwf",
        "productLine": "naam",
        "inputType": "weight",
        "uom": "g",
        "value": "702",
        "capacity": "3",
        "image": ""
    },
    {
        "index": "04",
        "skuId": "Sarbb-100",
        "name": "Sasko Black101",
        "barcode": "ERROR: Empty barcode is not allowed",
        "description": "ERROR: Invalid description: [] it should not be blank.",
        "brand": "fwfwf",
        "productLine": "fwfwf",
        "inputType": "Weight",
        "uom": "g",
        "value": "703",
        "capacity": "4",
        "image": ""
    },
    {
        "index": "05",
        "skuId": "Sarbb-101",
        "name": "Sasko Black102",
        "barcode": "843332555616",
        "description": "Nice black bread",
        "brand": "fwfwf",
        "productLine": "naam",
        "inputType": "weight",
        "uom": "g",
        "value": "704",
        "capacity": "5",
        "image": ""
    }
]


    const newData = [
    {
        "index": "01",
        "skuId": "Sarbb-033",
        "name": "Sasko Black",
        "barcode": "843331510012",
        "description": "Nice black bread",
        "brand": "fwfwf",
        "productLine": "fwfwf",
        "inputType": "Weight",
        "uom": "g",
        "value": "700",
        "capacity": "1",
        "image": ""
    },
    {
        "index": "02",
        "skuId": "sarb",
        "name": "Sasko Black1",
        "barcode": "124125125",
        "description": "Nice black bread",
        "brand": "fwfwf",
        "productLine": "fwfwf",
        "inputType": "Weight",
        "uom": "kg",
        "value": "701",
        "capacity": "2",
        "image": ""
    },
    {
        "index": "03",
        "skuId": "Sarbb-100",
        "name": "Sasko Black101",
        "barcode": "214214214",
        "description": "Desc",
        "brand": "fwfwf",
        "productLine": "fwfwf",
        "inputType": "Weight",
        "uom": "g",
        "value": "703",
        "capacity": "4",
        "image": ""
    }
]

    const errorRows = [0,1,3]


      const myTerribleAttempt = oldTableData.map((oldData, rowIndex) => {
  return errorRows.map(index => {
    if(rowIndex === index){
     newTableData.map(newData => {
oldData = newData
     })
    }
  })
 })

I have tried multiple maps and just can’t seem to get the right result. The new data objects should replace old data objects at the object containing the error. Please give me some assistance.

I am just trying to experiment with an app, and in my html I am trying to return the props of userData which in my console logs things such as lineStatus etc, however I seem to be returning nothing.

my code is as follows:

import React, { useState, useEffect } from 'react'
import axios from "axios";

const tflData = "https://api.tfl.gov.uk/line/mode/tube/status";

axios.request(tflData).then(function (response) {
    console.log(response.data);
}).catch(function (error) {
    console.error(error);
});

function Lines() {
    
    const [userData, setUserData] = useState({});
    const tflUserWithFetch = async () => {
        const response = await fetch(tflData);
        const jsonData = await response.json();
        setUserData(jsonData);
      };

  useEffect(() => {
    tflUserWithFetch();
  }, []);
  
  return (
    <div className="App">
      <header className="App-header">
        <h2>Line Data</h2>
      </header>
      <div className="user-container">
        <h5 className="info-item">Tube station: {userData.name}</h5>
        <h5 className="info-item">Status: {userData.lineStatuses}</h5>
     
      </div>
    </div>
  );
}

export default Lines

Basically I am trying to return the values or content values but I am missing something.

I am just started to learn JS on Freecode and doing that task Use Recursion to Create a Range of Numbers).
The function should return an array of integers which begins with a number represented by the startNum parameter and ends with a number represented by the endNum parameter. The starting number will always be less than or equal to the ending number. Your function must use recursion by calling itself and not use loops of any kind. It should also work for cases where both startNum and endNum are the same.

My solution is on below

let myVal = [];
function rangeOfNumbers(startNum, endNum) {
  if (startNum <= endNum) {
    myVal.push(startNum);
    startNum++;
    rangeOfNumbers(startNum, endNum);
  }

  return myVal;
}

rangeOfNumbers(2, 5);

Normally it should work well but I do not know why it is not acceptable.

I’m trying to exit the process after the unit jest testing is finished,
at the same time, I’m setting a token value from the first test to authorize all the other tests
all tests passed except the login in one
and still, the jest process is still running on the terminal.
that’s the first test where I set the token after the test

 test("should respond with a 200 status code", async (done) => {
  response = await request(app)
    .post("/login")
    .send({
      email: "[email protected]",
      password: "testtest",
    })
    .expect(200);
  token = response.header.token;

  done();
});

The goal is to quit the process after the async process on jest

I need to create an array of arrays like this:

var serviceCoors = [
        [50, 40],
        [50, 50],
        [50, 60],
    ];

from elements with datas:

<div data-latitude="10" data-longitude="20" class="service-points__map"></div>
<div data-latitude="20" data-longitude="10" class="service-points__map"></div>

I`m trying this:

var test = [];
$('.service-points__map').each(function(){
        var test2 = $(this).contents();
        var items = [];
        $.each(test2, function(i, val) {
            items.push(val.data);
        });
        test.push(items);
    });

But it doesn`t work. I have 2 arrays, but they are empty.

Goal

Avoid unnecessary event bindings.

Sample code

Comment box with a reply button for each individual comment

const btns = document.getElementsByClassName('reply-btn');

for (let i = 0; i < btns.length; i++) {    
  btns[i].addEventListener('click', showCommentContentAsPreview);
}


function showCommentContentAsPreview(e) {
  console.log('showCommentContentAsPreview()');
  
  // CHECK IF THIS BUTTON ALREADY BINDED !!!
  const previewDiv = document.getElementById('preview');
  const commentId = e.target.getAttribute('data-comment-id')
  const commentDiv = document.getElementById('comment-' + commentId);
  const commentText = commentDiv.querySelector('p').innerText
  const closeReplyBtn = previewDiv.querySelector('button');
  const previewContent  = previewDiv.querySelector('.preview-content');
  
  // set to preview
  previewContent.innerText = commentText;
  
  // show reply close button  
  closeReplyBtn.classList.remove('hidden');
  
  // bind EventListener to "reply close button"
  closeReplyBtn.addEventListener('click', closeReply)
  
  function closeReply() {
    console.log('bind to btn');
    previewContent.innerText = '';
    this.removeEventListener('click', closeReply);
    closeReplyBtn.classList.add('hidden');
  }
}

.hidden {
  display: none;
}

.comment {
  border-bottom: 1px solid #000;
  padding: 5px;
}


.preview {
  background-color: #ccc;
  padding: 20px;
  margin-top: 20px;
}

<div>
  <!-- comment list -->
  <div id="comment-1" class="comment">
    <p>Comment Content 1</p>
    <button class="reply-btn" data-comment-id="1">reply</button>
  </div>
  
  <div id="comment-2"  class="comment">
    <p>Comment Content 2</p>
    <button  class="reply-btn" data-comment-id="2">reply</button>
  </div>  
</div>

<!-- output -->
<div>
  <div id="preview" class="preview">
    <div class="preview-content"></div>
    <button class="hidden">Close Preview</button>
  </div>
</div>

Simulate problem

When you try the example, the following two scenarios occur:

1. Click reply once and then click “close preview”

2. Click on reply several times and then on “close preview”.

Question

How can I avoid multiple bindings to the same button? I am already thinking about singleton.

How can I format this date to a simple one? I am using date-fns as in my react project

2021-12-26T00:00:00.000000Z

I’m making an ecommrece project, in search bar I’m displaying checkboxes with categories from the API, all of those have value active == true by default. This is how I’m mapping them:

{categories.map((category) => {
       return (
              <>
             <input type="checkbox" onClick={() => handleCheckbox(category)} 
             defaultChecked={category.active} key={category.name} />
             <label style={{marginLeft:"5px"}} htmlFor={category.name}>{category.name}</label><br/>
             </> 
)
})}

Then I run this function to change category.active property from true to false, when the exact checkbox is clicked, then I want to update this object using useState

const handleCheckbox = (category) => {
    let tempCategory = category
    if (tempCategory.active == true) {
        tempCategory.active = false;
    } else {
        tempCategory.active = true;
    }
    setCategories({...categories, [tempCategory.id]: tempCategory})
    console.log(category.active)
}

Unfortunetly when I click on the checkbox I’m getting an error from React:

TypeError: categories.map is not a function

And it points to categories.map, I have no idea how to fix it. All I want is to update specific object in the categories array.

I’m learning socketIO and I set up and running a basic nodejs server . My problem is that when I try to connect to the server with my nextJS app nothing happens. No errors occur and the messages I want to be printed on connection do not appear .

My code :

server.js in backend folder

const express = require('express');
const app = express();
const server = require('http').Server(app);
const { v4: uuidV4 } = require('uuid');
const cors = require('cors');

const io = require('socket.io')(server, {
  cors: true,
  origins:["http://localhost:3000"]
});



app.use(cors());
app.options('*', cors());



io.on('connection', socket => {
  socket.on('test',()=>{
   console.log(' i am a test') //does not appear 
  })
  
})





   //I ALSO TRIED 
   //io.on('test',()=>{
       //console.log('I am a test');
     //})


server.listen(5000);

Then in my nextJS app in my frontend folder in index.js

import {useEffect} from 'react';
import io from 'socket.io-client';

const ENDPOINT = "http://localhost:5000";
const socket = io.connect(ENDPOINT);

  export default function Home() {

    useEffect(()=>{

     socket.emit('test');
    },[]);
    
   ...rest of code 
   
 }

So in my frontend app I emit the ‘test’ event to the server and the server did not console.log the response on connection

I would appreciate your help as I am new to socketIO

Hey guys I’m trying to multiply 2 numbers that are smaller than 1000 and bigger than 0 and i want alert messages to pop up if the numbers are bigger than a thousand or not a number. The problem is that the alert message shows up every time I click the button.. any tips?

function buttonAction5() {

  var z = document.getElementById("number1").value;
  var y = document.getElementById("number2").value;
  
  if (z< 1000 || y < 1000 && z > 0|| y > 0); {
    document.getElementById("result5").innerHTML = y * z;
    
  }
  if  (isNaN(y || z)){
    alert("Please write a number between 1-1000"); 
  }
  
  else (z || y > 1000 && z || y < 0);{
    alert("Please write a number between 1-1000");
   
  }

  } 

I’m trying to retrieve data from an Api.
When I log the response data, everything looks fine. When i load my component I get ‘undefined’ on each place where I should have data from the Api. When I press on my sidebar, every ‘undefined’ turns into the right data. I think that I encounter some problem with the asynchronous behaviour of my calls but I don’t realy know how to solve this problem.

For information : I’m using ReactJs

function Dashboard() {
  const [isLoading, setIsLoading] = useState(true);
  const [loadedDataFromApi, setLoadedDataFromApi] = useState([]);

  //some other vars
 
  useEffect(() => {
    setIsLoading(true);
    fetch(`https://soccer.sportmonks.com/api/v2.0/fixtures/between/${todayString}/${inTenDaysString}?api_token=oAF3XOevLeC24Zjuzvu56vfOfvyrmHSd11eHr4Ij6ifeJq563NzHeKFrLaJy`
    )
      .then((response => {
        return response.json();
      }))
      .then((response => {

        //FOREACH to loop over every {} in the []
        response.data.forEach((data) => {

          var localTeam = data.localteam_id;
          var visitorTeam = data.visitorteam_id;

          var docRef1 = db.collection("Teams").doc(`${localTeam}`)
          var docRef2 = db.collection("Teams").doc(`${visitorTeam}`)

          docRef1.get().then((doc) => {
            if (doc.exists) {
              data.localTeam = doc.data().name;
              data.logoLocalTeam = doc.data().logo;
            } else {
              // doc.data() will be undefined in this case
              console.log("No such Team found!");
            }
          }).catch((error) => {
            console.log("Error getting document:", error);
          });

          docRef2.get().then((doc) => {
            if (doc.exists) {
              data.visitorTeam = doc.data().name;
              data.logoVisitorTeam = doc.data().logo;
            } else {
              // doc.data() will be undefined in this case
              console.log("No such Team found!");
            }
          }).catch((error) => {
            console.log("Error getting document:", error);
          });
        })

        setLoadedDataFromApi(response.data);
        setIsLoading(false);

      }))

  }, [todayString, inTenDaysString])

  // if we are loading the data return loading .. 
  if (isLoading) {
    return (
      <section>
        <p>Loading ...</p>
      </section>)
  }

  return (
  // some code ) 

Is it possible to convert an living component instance back to template?

Currently I am working on a form-making website with element-ui and VueJS. I have finish the <preview /> component. It will present the editing result to the user, and now I need to export the whole result form as VueJS template.

Since the result form is simply made up of a whole bunch of element-ui‘s form input components, like <el-input>, <el-button>. it might be possible to convert them back to template. But soonly I realized it is not as simple as I throught. I tried doing this by treversing the virtual dom tree, but ended up discorvering that Vue.js doesn’t offer public vnode treversing API. there is an instance attribute named $vnode, but it is the the placeholder node for the component in parent’s render tree, according to the source code comment. Besides, it’s children property is undefined. that means I cannot access the children vnodes, thus become impossible to treverse the virtual DOM tree. Another way is use the private property _vnode, it is feasible way though, but the property is private and I’d rather not touch it, unless I have no other ways.

Another problem I realized later, is that the vdom tree doesn’t keep the informations about v-if. One the current true branch will remains in the virtual DOM tree, and I cannot withdraw other false/invisible tags from the vdom tree.

So it looks treversing the DOM tree cannot convert an instance back to template (or maybe I am wrong). Is it some other ways that can accomplish my goal?