Question 197574 in Html Question posted in
Some basic documentation can be found here.

How to avoid duplicate elements when append select options in javascript and html?

can anybody could me explain how i can avoid duplicate my categories? – Im new in js/api things.

enter image description here

dom-utils.js:

const createCategorySelectOptions = (expense) =>{
    const selectOption = document.createElement("option");
    selectOption.text = expense.category;
    selectOption.value = expense.category; 
    return selectOption;
}

const createCategorySelectElement = (expenses) =>{
    const selectElement = document.createElement("select");
    expenses.forEach((expense) => {
        selectElement.appendChild(createCategorySelectOptions(expense)); 
    });
    
    return selectElement;

}

export const renderExpensesList = (expenses) => {

    const categorySelector = document.querySelector("#category");
    categorySelector.appendChild(createCategorySelectElement(expenses));
    
}

html:

<label id="category"><span>Category</span> </label>

app.js:

import { renderExpensesList } from './dom-utils.js';
let expenses;

const API_URL = "../expenses.json";
fetch(API_URL).then((response) => response.json()).then((data) =>{
expenses = data.map(expense =>{
    return {
        name: expense.name,
        cost: expense.cost,
        currency: expense.currency,
        category: expense.category,
        date: expense.date,
    };
    
});

renderExpensesList(expenses);
})
.catch((err) =>{
});

JSON:

[
  {
    "name": "cofee",
    "cost": "40",
    "currency": "PLN",
    "category": "food",
    "date": "2022-07-16T00:00:00"
  },
  {
    "name": "bread",
    "cost": "8",
    "currency": "PLN",
    "category": "food",
    "date": "2022-08-03T00:00:00"
  },
  {
    "name": "cheese",
    "cost": "21",
    "currency": "PLN",
    "category": "food",
    "date": "2022-08-03T00:00:00"
  },
  {
    "name": "fuel",
    "cost": "320",
    "currency": "PLN",
    "category": "car",
    "date": "2022-08-14T00:00:00"
  },
  {
    "name": "bread",
    "cost": "8",
    "currency": "PLN",
    "category": "food",
    "date": "2022-09-01T00:00:00"
  },
  {
    "name": "ham",
    "cost": "14",
    "currency": "PLN",
    "category": "food",
    "date": "2022-09-01T00:00:00"
  },
  {
    "name": "butter",
    "cost": "6",
    "currency": "PLN",
    "category": "food",
    "date": "2022-09-10T00:00:00"
  },
  {
    "name": "fuel",
    "cost": "320",
    "currency": "PLN",
    "category": "car",
    "date": "2022-09-10T00:00:00"
  },
  {
    "name": "car wash",
    "cost": "60",
    "currency": "PLN",
    "category": "car",
    "date": "2022-09-10T00:00:00"
  }
]

Thank you for any help! 🙂

Im trying to avoid duplicate my categories. Pure JS.
Something like that:

enter image description here

Tags:

2

Answers


  1. 0

    It’s a matter of finding unique category names in your data. Also you create unneeded number of extra intermediate variables and functions but in reality you could do it in 1 function. Also adding new DOM elements with pure HTML often less verbose and always faster:

    const expenses = [{ "name": "cofee", "cost": "40", "currency": "PLN", "category": "food", "date": "2022-07-16T00:00:00"}, { "name": "bread", "cost": "8", "currency": "PLN", "category": "food", "date": "2022-08-03T00:00:00"}, { "name": "cheese", "cost": "21", "currency": "PLN", "category": "food", "date": "2022-08-03T00:00:00"}, { "name": "fuel", "cost": "320", "currency": "PLN", "category": "car", "date": "2022-08-14T00:00:00"}, { "name": "bread", "cost": "8", "currency": "PLN", "category": "food", "date": "2022-09-01T00:00:00"}, { "name": "ham", "cost": "14", "currency": "PLN", "category": "food", "date": "2022-09-01T00:00:00"}, { "name": "butter", "cost": "6", "currency": "PLN", "category": "food", "date": "2022-09-10T00:00:00"}, { "name": "fuel", "cost": "320", "currency": "PLN", "category": "car", "date": "2022-09-10T00:00:00"}, { "name": "car wash", "cost": "60", "currency": "PLN", "category": "car", "date": "2022-09-10T00:00:00"}];

const renderExpensesList = (expenses) => {

    const selectElement = document.createElement("select");

    selectElement.innerHTML = [...new Set(expenses.map(item => item.category))]
      .map(category =>
        `<option value="${category}">${category}</option>`
      ).join('');
    
    document.querySelector("#category").appendChild(selectElement);
}

renderExpensesList(expenses);
    <div id="category"></div>

    If you are obsessed with speed:
    Collect unique names in an array with Array::reduce() and use Set to check whether a category name is already added to the array:

    const expenses = [{ "name": "cofee", "cost": "40", "currency": "PLN", "category": "food", "date": "2022-07-16T00:00:00"}, { "name": "bread", "cost": "8", "currency": "PLN", "category": "food", "date": "2022-08-03T00:00:00"}, { "name": "cheese", "cost": "21", "currency": "PLN", "category": "food", "date": "2022-08-03T00:00:00"}, { "name": "fuel", "cost": "320", "currency": "PLN", "category": "car", "date": "2022-08-14T00:00:00"}, { "name": "bread", "cost": "8", "currency": "PLN", "category": "food", "date": "2022-09-01T00:00:00"}, { "name": "ham", "cost": "14", "currency": "PLN", "category": "food", "date": "2022-09-01T00:00:00"}, { "name": "butter", "cost": "6", "currency": "PLN", "category": "food", "date": "2022-09-10T00:00:00"}, { "name": "fuel", "cost": "320", "currency": "PLN", "category": "car", "date": "2022-09-10T00:00:00"}, { "name": "car wash", "cost": "60", "currency": "PLN", "category": "car", "date": "2022-09-10T00:00:00"}];

const categories = expenses.reduce((acc, item) => {
  const {arr, set} = acc;
  set.has(item.category) || set.add(arr[arr.length] = item.category);
  return acc;
}, {arr:[], set:new Set}).arr;

console.log(categories);
    Login or Signup to reply.
  2. 0

    You can filter your expenses array, turn it into a set, or one of the other options documented in this answer to a similar question:

    const expenseSet = new Set(expenses); 
expenseSet.forEach((expense) => {
    selectElement.appendChild(createCategorySelectOptions(expense)); 
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search