Unable to dynamically translate special characters using npm latinize

When translating German special characters to English using latinize, the module only works when strings are passed within single or double quotes. However, it does not work when storing them inside a variable.

import latinize from 'latinize';

Within the render, I tested this and it worked perfectly,

console.log('render', latinize('VfL Osnabrück'))

It also worked fine when I passed my

let tag_name = 'VfL Osnabrück';
console.log('render', latinize('VfL Osnabrück'))

However, it did not work properly when retrieving the tag_name from my API. The complete code is provided below:

let tag_parsing = sub_category_id.split('%20');
let tag_string = '';
for (let i = 0; i < tag_parsing.length; i++) {
    tag_parsing[i];
   
    console.log('latinized text', tag_parsing[i]);
    tag_string += ' ' + tag_parsing[i]
}

OUTPUT

Output of the latinized text ==> Osnabr%C3%BCck

Output of the latinized text inside quotes ==> Osnabruck

https://i.sstatic.net/0UIrK.pnghttps://i.sstatic.net/CojAW.png I also attempted using .toString() but it did not work as expected

Answer №1

It seems like there might be an issue with how the query string from the URL is being processed.

Check out this code snippet that demonstrates how I handled processing the query string in a forked codesandbox. I opted for a functional component for simplicity, but you can adapt the same logic for a class-based component as well.

// access the search string
const { search } = useLocation();

const [latinizedValue, setLatinizedValue] = React.useState("");

React.useEffect(() => {
  console.log({ search });

  // create a new search params object
  const newParams = new URLSearchParams(search);

  const key = newParams.get("key");
  const value = newParams.get("value")?.trim();

  console.log("Param", key, `"${value}"`);
  console.log("latinize param:", `"${latinize(value)}"`);

  setLatinizedValue(latinize(value));
}, [search]);

Live Demo

https://i.sstatic.net/HlUl0.png

https://codesandbox.io/s/quirky-bassi-i5rz3?expanddevtools=1&fontsize=14&hidenavigation=1&initialpath=%2Fapi%2Fcategories%3Fkey%3Dtags%26value%3D%2520VfL%2520Osnabr%C3%BCck&module=%2Fsrc%2FApp.js&theme=dark

Answer №2

I recently discovered that the font I was initially using did not include special German characters. After switching to a font with full support for these characters, my text now appears correctly and Latinize function works perfectly as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can I take to troubleshoot the cause of my browser freezing when I try to navigate to a different webpage

Within this div, users can click on the following code: <div id="generate2_pos" onclick="damperdesign_payload();" class="button">Generate P-Spectra</div> Upon clicking, the damperdesign_payload() function is triggered, leading to a link to an ...

Guide on duplicating a Select2 element integrated with Django and Python

I am facing an issue where the select element inside a div is not cloning correctly. The Select2 element does not retain the loaded values from the Django code when cloned. Is there a way to clone the div with all the Select2 element values intact? Current ...

Display a hidden div on hover using JQUERY

How can I make a hover popup appear when submitting a form, and have it disappear only when the mouse is out of both the popup div and the submit button? Currently, the hover popup shows up but disappears when entering the popup. Can someone assist me in r ...

Query modifier contains an unexpected token ":"

For my API project, I have opted to use sailsjs as my framework. The documentation at provides a list of query modifiers that can be used. User.find({ or: [ name: { startsWith: 'thelas' }, email: { startsWith: 'thelas' } ] ...

Troubleshooting Problems with Ajax Servlets

When I perform a search, the results are returned and shortly after, the page redirects to a servlet displaying raw JSON data. It's a bit confusing for me. This JSP form submission: <form class="col-lg-12" action="./urllinks" method="GET" id="sea ...

Is it possible to transfer an Azure Artifact to npmjs.org?

Is it feasible to release my Azure Artifact on npmjs.org? I've successfully linked to the feed I established, but now I want to publish the package on npmjs.org and share it as open-source. My assumption is that it should be doable since npmjs.org op ...

Turn off error notifications from eslint parsing

Within my code, there is a conditional export that looks like this: if (process.env.NODE_ENV === 'testing') export myFunc; While in es6, this type of statement is typically not allowed due to the requirement for imports and exports to be top- ...

401 Unauthorized: Failure to install [Package name] from Azure DevOps feed using npm

Having an issue with AzureDevop artifacts and npm feeds. Keep getting a 401 Unauthorized exception when trying to run npm install. Any insights on what might be causing this problem? ...

install <GitHub> packages along with development dependencies using npm

One common method for managing private npm modules involves storing them in a Git repository and then using npm install with the repository path to install the module. If you include the dependency in your package.json file, you can simplify the installat ...

A warning has been issued: CommonsChunkPlugin will now only accept one argument

I am currently working on building my Angular application using webpack. To help me with this process, I found a useful link here. In order to configure webpack, I created a webpack.config.js file at the package.json level and added the line "bundle": "web ...

Processing requests through Axios and Express using the methods GET, POST, PUT, and DELETE

When working with express router and Axios (as well as many other frameworks/APIs), the use of GET/POST/PUT/DELETE methods is common. Why are these methods specified, and what are their differences? I understand that a GET request is used to retrieve dat ...

JavaScript Question: How can I extract the click value from a JavaScript visualization when displayed in a table?

I am working with a Hierarchical Edge Bundling visualization in JS. My goal is to have the name of the value displayed on the table when I click on it. Currently, I am facing an issue with retrieving the value dynamically. If I manually input a value, I c ...

Developing dynamic progress indicators in Django - A guide

I'm in the process of figuring out how to create a real-time progress bar for updating. The idea is that the server will update the user periodically on the current progress. Fortunately, I am familiar with making an Ajax call using Django and jQuery ...

Preventing users from navigating away from the page without choosing an answer in a React application

My dilemma involves the implementation of a question component, where I aim to prevent users from leaving a page without selecting an answer. Below is my question component: import React, { Component } from 'react'; import { Link } from 're ...

The function batchWriteItem() has been known to produce unpredictable outcomes

Currently in my Node.js project, I am attempting to write records to a DynamoDB table using the batchWriteItem() method. When I call the insertTransactionDetails() function for the first time, I send 9 records to be inserted. On the second call to the sam ...

Issue encountered while attempting to attach an event listener to an element within a class

Upon running the code, I encountered an error message that reads: Uncaught TypeError: this.startButton.addEventListener is not a function and I'm unsure of how to resolve it. Although I can successfully console.log the button inside the class, adding ...

Encountering the error message "Unexpected JSON input has caused Expo start to fail when trying to launch on an Android simulator

My expo app is giving me trouble. Every time I try to launch it on the android simulator, it gets stuck at 99% Building Javascript Bundle and displays a mysterious message in the console: Unexpected end of JSON input I've attempted several solutions ...

Prevent the need to constantly regenerate node_modules when using Elastic Beanstalk

Our node.js app is fairly simple, but the AWS Elastic Beanstalk deployment process causes delays of about 5 minutes when rolling out a new version (via git aws.push) even after making a small file commit. The actual commit and upload are quick (just one f ...

Generate an HTML document from a website page

Having difficulty grasping this concept. I am completely lost on where to begin. It is imperative that I determine how my website can generate a file (whether it be HTML or Text format) and enable users to download it, similar to the functionality in Goo ...

My ability to click() a button is working fine, but I am unable to view the innerHTML/length. What could be the issue? (NodeJS

Initially, my goal is to verify the existence of the modal and then proceed by clicking "continue". However, I am facing an issue where I can click continue without successfully determining if the modal exists in the first place. This occurs because when I ...