Remove duplicates from JSON array data

PHOTO

Sun Feb 11 2024 04:02:25 GMT+0000 (Coordinated Universal Time)

// removes all duplicates of a key in a json array, in this case we create a new const that loops over a cities json array and checks for countries with the same name. it will return only the first instance of that country object where there are multiple of the same country

const countriesUnique = new Set(
  cities.map(city =>
    JSON.stringify({ country: city.country, emoji: city.emoji }),
  ),
)
const countries = [...countriesUnique].map(each => JSON.parse(each))
console.log(countries)

COPY

Save snippets that work from anywhere online with our extensions

Comments

JS

@davidmchale

If statement with switch delete duplicates from an array loop and find class Nullish with an Object - basic tranverse classes in a list substring capitalize substring text with elipses array.at() js media query Dynamic Filter - buttons advanced flow converted if statement Add an array to a HTML dataset getElement Function Intersection Observer template intersection Observer Basic Example fetch data, display and filter for of loop - get index get random index value from an array fetch with post method get id value from url debounce for scrolling get element or elements check functions return values from functions indexOf explantion sorting basic using for-of loop for getting index value of iteration import json data into a JS module Splide slider with modal JS change active class if url path matches Pagination / array of arrays FIlter array or return full array price formatting ignores wrapping element on click Create a dummy array with numbers Random Generated Number Dummy array - list items dummy id Limits the amount of text Random Number generator function format date function Remove duplicates from JSON array data Filter Posts from state remove duplicates and create object simple ternary remove transition with propertyName sorting in reverse counting items using reduce splice explanation Declaring Variables Get primitive properties on a number / string etc using proto check an array of objects exists / check using regex Destructuring nested function scope IFFE function basic switch Switch with function passing an object check length of object while loops (for when the number we are iterating over is unknown) Ternary with 2 conditions for of loop with index array nested ternary operator callbacks Method Borrowing this keyword and arrow functions rest operator - args functions p1 rest operator - args functions p2 for of loop with index and entries callback functions explained version 1 callback functions explained version 2 Form and value IF Element shorthand function as a callback inside a higher order function Using param for symbol remove 'px' from number scrolling behaviour test 1 clearing event listeners new URL applying css vars scroll behaviours testing intersection observer intersection observer with loop JS docs - writing js docs check is key exists call() nested ternary with function forEach with function and ...args using template literals filter duplicates get class by indexOf returning ternary operator remove children from parent bootstrap rows with cols fetching multple data endpoints Promise.all remove file extension Js snippet for aria expanded passes this from a function containing a listener, to another function dynamic function to change icons compare arrays and push to an empty instead of pushing an object to a data array return the Object.entries(data).map

#react #hook

8 Awesome React Hooks

https://thesmartcoder.dev/awesome-react-hooks/

#react #hook

usehooks-ts - React hooks library, written in Typescript

https://usehooks-ts.com/

#react #hook

8 Awesome React Hooks

https://thesmartcoder.dev/awesome-react-hooks/

#woocommerce #wordpress #orders #hook

Order status change hooks for WooCommerce

https://squelchdesign.com/web-design-newbury/woocommerce-detecting-order-complete-on-order-completion/

#usestate #hook

React Hooks

https://www.w3schools.com/react/react_hooks.asp

#usestate #hook

useState --simple example

//FavColor.jsx

import React,{useState} from 'react';

const fav=()=>{

const[color,setColor]=useState("red");
  
  return(
<>
    <h1>fav color is {color}</h1>
    <button     type="button"  onClick={()=>setColor("blue")} className="btn1">
    Blue
    </button>

<button type="button"  onClick={()=>setColor("red")}  className="btn2">Red</button>



    </>
  )
}

export default fav;


//App.jsx
import React from 'react';
import FavColor from './FavColor';

export function App() {
  return (
    <div className='App'>
    <FavColor  />

    </div>
  );
}

#reacth #hook

React hook

// use Fetch hook file
import { useState, useEffect } from "react";


const useFetchCities = (url) => { // need this url placeholder to put into where the fetch hook is being called


 const [cities, setCities] = useState([]);
 const [loading, setLoading] = useState(false);
 const [error, setError] = useState(null);



//fetch for local url => move later to a hook
 useEffect(() => {
      const citiesData = async(url) => {
        setLoading(true)
        try {
          const response = await fetch(url);
          if(!response.ok) return
          
          if(response.status === 200){
            const data = await response.json();
            setCities(data)
            
          }
        
        } catch (error) {
          setError(error)
          setLoading(true)
        }finally{
          setLoading(false)
        }
      }
      citiesData(url)
 
 }, [url]);


 return {cities, loading, error}
}


export default useFetchCities;






//import the hook into another file

// fetch hook for cities => see useFetchCties file
const {cities, loading, error} = useFetchCities(`${BASE_URL}/cities`);

#reacth #hook

Remove duplicates from JSON array data

// removes all duplicates of a key in a json array, in this case we create a new const that loops over a cities json array and checks for countries with the same name. it will return only the first instance of that country object where there are multiple of the same country

const countriesUnique = new Set(
  cities.map(city =>
    JSON.stringify({ country: city.country, emoji: city.emoji }),
  ),
)
const countries = [...countriesUnique].map(each => JSON.parse(each))
console.log(countries)

#react #context #provider #hook

Context AP with import of Custom Hook

import { createContext } from "react";
import useFetch from '../hooks/useFetch' // import the useFetch hook


const BASE_URL = 'http://localhost:8000';


const CitiesContext = createContext();



function CitiesProvider({children}){

    // fetch hook for cities => see useFetchCties file
    const {data: cities, loading, error} = useFetch(`${BASE_URL}/cities`);  


    return(
      <CitiesContext.Provider value={{
          cities: cities,
          loading: loading,
          error: error
      }}>

        {children}
      </CitiesContext.Provider>
    )
}

export {CitiesContext, CitiesProvider}

Remove duplicates from JSON array data

Save snippets that work from anywhere online with our extensions

Comments

More like this

JS

Browse more snippets >>

Remove duplicates from JSON array data

Save snippets that work from anywhere online with our extensions

Comments

More like this

JS

Browse more snippets >>

Embed code snippet