I am starting off with a json file that includes all of my data that I need and from this data I want to use the letters constant as an index to nest the designerNames based on the first letter of the name (need this to be alphabetical) inside 1 object and then display the object

  const designerName = designerArray
    .filter(
      (designer, id, designerArray) => designerArray.indexOf(designer) === id
    )
    .sort((a, b) => a.localeCompare(b, "fr"));

  const letters = designerArray
    .map((name) => name[0])
    .filter((name, id, designerArray) => designerArray.indexOf(name[0]) === id)
    .sort((a, b) => a.localeCompare(b, "fr"));

  const obj = {};

  letters.forEach((element, index) => {
    obj[element] = designerName[index];
  });

My expected output from this is :

<ul>{letters[0]}</ul>
    <li>{designerName}</li>
<ul>{letters[1]}</ul>
    <li>{designerName}</li>

or 

A
  designerName(asics), designerName (arena)

C
  designerName(Cooper)

N 
  designerName(nike)
... etc etc

I got as far as being able to separate all the details I need and combine them into a single object but it is not taking into account the array with the first letters of each brand name.

Would appreciate any help or guidance.. Thank you in advance!

EDIT : Here is the json data that I am pulling from and the results of designerArray as requested

 ['Hermes', 'Dakine', 'Dior', 'Hermes', 'Gucci']

[
  {
    "product-name": "Jacket",
    "designer": "Hermes",
    "sizes": ["sm", "md", "lg", "xl"],
    "color": ["black", "green"],
    "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae ullam, saepe explicabo eum vel molestiae veritatis omnis, natus a deleniti, iure eligendi quam quisquam maiores repellendus aspernatur atque fuga consectetur.",
    "price": "$532"
  },
  {
    "product-name": "Jacket2",
    "designer": "Dakine",
    "sizes": ["sm", "md", "lg", "xl"],
    "color": ["black", "green"],
    "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae ullam, saepe explicabo eum vel molestiae veritatis omnis, natus a deleniti, iure eligendi quam quisquam maiores repellendus aspernatur atque fuga consectetur.",
    "price": "$532"
  },
  {
    "product-name": "Sweater",
    "designer": "Dior",
    "sizes": ["sm", "md", "lg", "xl"],
    "color": ["green"],
    "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae ullam, saepe explicabo eum vel molestiae veritatis omnis, natus a deleniti, iure eligendi quam quisquam maiores repellendus aspernatur atque fuga consectetur.",
    "price": "$532"
  },
  {
    "product-name": "Shirt",
    "designer": "Hermes",
    "sizes": ["sm", "md", "xl"],
    "color": ["white"],
    "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae ullam, saepe explicabo eum vel molestiae veritatis omnis, natus a deleniti, iure eligendi quam quisquam maiores repellendus aspernatur atque fuga consectetur.",
    "price": "$532"
  },
  {
    "product-name": "Pants",
    "designer": "Gucci",
    "sizes": ["sm", "md", "lg"],
    "color": ["black"],
    "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae ullam, saepe explicabo eum vel molestiae veritatis omnis, natus a deleniti, iure eligendi quam quisquam maiores repellendus aspernatur atque fuga consectetur.",
    "price": "$532"
  }
]

CodePudding user response：

You can (using Array.reduce function) extract first letter and group them by that letter.

Does this work for you?

const designerArray = [
{
    "product-name": "Pants3",
    "designer": "Giovanni",
    "sizes": ["sm", "md", "lg"],
    "color": ["black"],
    "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae ullam, saepe explicabo eum vel molestiae veritatis omnis, natus a deleniti, iure eligendi quam quisquam maiores repellendus aspernatur atque fuga consectetur.",
    "price": "$532"
  },
  {
    "product-name": "Jacket",
    "designer": "Hermes",
    "sizes": ["sm", "md", "lg", "xl"],
    "color": ["black", "green"],
    "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae ullam, saepe explicabo eum vel molestiae veritatis omnis, natus a deleniti, iure eligendi quam quisquam maiores repellendus aspernatur atque fuga consectetur.",
    "price": "$532"
  },
  {
    "product-name": "Jacket2",
    "designer": "Dakine",
    "sizes": ["sm", "md", "lg", "xl"],
    "color": ["black", "green"],
    "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae ullam, saepe explicabo eum vel molestiae veritatis omnis, natus a deleniti, iure eligendi quam quisquam maiores repellendus aspernatur atque fuga consectetur.",
    "price": "$532"
  },
  {
    "product-name": "Pants",
    "designer": "Gucci",
    "sizes": ["sm", "md", "lg"],
    "color": ["black"],
    "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae ullam, saepe explicabo eum vel molestiae veritatis omnis, natus a deleniti, iure eligendi quam quisquam maiores repellendus aspernatur atque fuga consectetur.",
    "price": "$532"
  },
{
    "product-name": "Pants2",
    "designer": "Domeco",
    "sizes": ["sm", "md", "lg"],
    "color": ["black"],
    "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae ullam, saepe explicabo eum vel molestiae veritatis omnis, natus a deleniti, iure eligendi quam quisquam maiores repellendus aspernatur atque fuga consectetur.",
    "price": "$532"
  }
];

designerNames = designerArray.map(d => d.designer).sort((a, b) => a.localeCompare(b, "fr"));

console.log(designerNames);

const orderedByLetter = designerNames.reduce((acc, name) => {
   const firstLetter = name[0];
   acc[firstLetter] = acc[firstLetter] || []; //Set if previously not set
   acc[firstLetter].push(name);
   return acc;
}, {})

console.log(orderedByLetter);