Kevin Powell - Community•12mo ago

Get ride of commas

I'm doing an english dictionary app, a problem I'm running into is: because of the map function, the code is displaying commas. I want to get ride of the commas, I thought about using "replace" but I'm afraid it will also replace the commas from the examples and definitions texts. Does anyone know how to do this or how to display the content in a better way?

19 Replies

Pi, a future fluent jp speakerOP•12mo ago

Pi, a future fluent jp speakerOP•12mo ago

html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section id="SearchWord" class="[ l__searchWord ]">
        <form id="FindWord" class="[ m__form ]">
            <div class="[ m__container ]" >
                <label for="Word">Search your Word:</label>
                <input type="text" name="search word" id="Word">
            </div>
            <input type="submit" value="Search">
        </form>
    </section>
    <section id="Dictionary" class="[ l__dictionary ]">
        <h1>English dictionary. Find the word's meanings and synonyms!</h1>
        <main id="Meanings" class="[ l__meanings ]">
            <h3>Hello!</h3>
            <p>It is a greeting!</p>
        </main>
    </section>
</body>
<script src="./assets/script/index.js"></script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section id="SearchWord" class="[ l__searchWord ]">
        <form id="FindWord" class="[ m__form ]">
            <div class="[ m__container ]" >
                <label for="Word">Search your Word:</label>
                <input type="text" name="search word" id="Word">
            </div>
            <input type="submit" value="Search">
        </form>
    </section>
    <section id="Dictionary" class="[ l__dictionary ]">
        <h1>English dictionary. Find the word's meanings and synonyms!</h1>
        <main id="Meanings" class="[ l__meanings ]">
            <h3>Hello!</h3>
            <p>It is a greeting!</p>
        </main>
    </section>
</body>
<script src="./assets/script/index.js"></script>
</html>

js code

const URL = "https://api.dictionaryapi.dev/api/v2/entries/en/";
const submitButton = document.querySelector("#FindWord");

submitButton.addEventListener("submit", async function (e) {
    e.preventDefault();

    const word = document.querySelector("#Word").value;
    const meanings = document.querySelector("#Meanings");
    

    meanings.innerHTML = `
        <div class="[ loading ]">Wait a minute. We are looking for your word... </div>
    `

    const data = await fetch_api(URL + word);

    meanings.innerHTML = `
        ${
            data[0].meanings.map((data) => {
                return `
                    <div class="[ l__${data.partOfSpeech} ]">
                        <h3>${data.partOfSpeech}</h3>
                        <ul class=" [ m_definition ] "> 
                            <li>
                                ${
                                    data.definitions.map((d, i) => `
                                        <h4>${d.definition}</h4>
                                        <p>${d.example ? d.example : "" }</p>
                                    `)
                                }
                            </li>
                        </ul>
                    </div>
                
                `
            })
        }
    `


})


async function fetch_api(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(response)
        }
        const data = await response.json();

        return data;
    } catch (error) {
        throw new Error(`Couldn't complete task due to: ${error}`);
    }

}

const URL = "https://api.dictionaryapi.dev/api/v2/entries/en/";
const submitButton = document.querySelector("#FindWord");

submitButton.addEventListener("submit", async function (e) {
    e.preventDefault();

    const word = document.querySelector("#Word").value;
    const meanings = document.querySelector("#Meanings");
    

    meanings.innerHTML = `
        <div class="[ loading ]">Wait a minute. We are looking for your word... </div>
    `

    const data = await fetch_api(URL + word);

    meanings.innerHTML = `
        ${
            data[0].meanings.map((data) => {
                return `
                    <div class="[ l__${data.partOfSpeech} ]">
                        <h3>${data.partOfSpeech}</h3>
                        <ul class=" [ m_definition ] "> 
                            <li>
                                ${
                                    data.definitions.map((d, i) => `
                                        <h4>${d.definition}</h4>
                                        <p>${d.example ? d.example : "" }</p>
                                    `)
                                }
                            </li>
                        </ul>
                    </div>
                
                `
            })
        }
    `


})


async function fetch_api(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(response)
        }
        const data = await response.json();

        return data;
    } catch (error) {
        throw new Error(`Couldn't complete task due to: ${error}`);
    }

}

and here is the codepen link

Pi, a future fluent jp speakerOP•12mo ago

https://codepen.io/leoncelestino/pen/dyrMGWP

LeonCelestino

CodePen

Dictionary

...

ἔρως•12mo ago

use .join('') after the top-most .map when you return an array from a function, and convert it to a string, you're effectively doing .join(',') by default

ἔρως•12mo ago

here's an example

Pi, a future fluent jp speakerOP•12mo ago

i see thxxxxxxxx

ἔρως•12mo ago

you're welcome you wouldn't suffer this type of issue if you use a <template> tag and modify it, then append it to the element you want to

Pi, a future fluent jp speakerOP•12mo ago

Hm,Imma look into that

ἔρως•12mo ago

check the mdn website it has really good examples

Pi, a future fluent jp speakerOP•12mo ago

Aside from the duplicate ID's and the innerhtml thing. What are the problems with the code?

ἔρως•12mo ago

well, you have unused variables you re-fetch the template every iteration of the loop you don't handle cases where data is empty you misspelled items - please install the codespell extension you still have a innerHTML there, which should be changed your code doesn't hide the parent element before doing changes, which can cause many re-draws

Pi, a future fluent jp speakerOP•12mo ago

Which parent element?

ἔρως•12mo ago

meanings

Pi, a future fluent jp speakerOP•12mo ago

How'd you hide it? I thought about deleting it from the HTML file, to append it with the other elements But I'm not sure about this approach

ἔρως•12mo ago

css

Pi, a future fluent jp speakerOP•12mo ago

Oh Ic

ἔρως•12mo ago

you can add a class for the current state of that parent's parent the element above meanings can have the "loading" element, and the "meanings" element; then you swap which one is visible based on the class (or a data attribute)

Pi, a future fluent jp speakerOP•12mo ago

I'll use the css later on, I want to work with the js first

ἔρως•12mo ago

good luck

Gaming

Programming

Get ride of commas