CODEWITHSUNDEEP
javascript
Tristian
Tristian

Reputation: 31

Cant figure out how to remove comma between array items without breaking rest of webpage

I am creating an array of images that will be tagged for sorting using buttons, I understand that the array is being converted into a string(?) and that is why the commas after each set of tags is showing up on the final item (The "}," at the end of each array item). I've included my code to turn that pulls the array into my "<div id="app"></div>" on the page. Is there an alternative here?

I understand this issue is stumping me because I have a fundamental lack of understanding of javascript, so I am not understanding the solutions I find online in a way that does not break everything I have setup so far, and I'm on a deadline here - and this code works with the rest of my code for this webpage that does a bunch of other stuff, and I lack the understanding to integrate this tag system in with the rest of the code when I use the solutions I've managed to find online.

const imgArr = [{
    src: "https://www.w3schools.com/how-spaces-works3.png",
    MultiFamily: 1,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 1,
    Sunshades: 1,
    GlassRailings: 1
  },
  {
    src: "https://www.w3schools.com/how-spaces-works3.png",
    MultiFamily: 0,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 1,
    Sunshades: 1,
    GlassRailings: 1
  },
  {
    src: "https://www.w3schools.com/how-spaces-works3.png",
    MultiFamily: 0,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 1,
    Sunshades: 1,
    GlassRailings: 1
  },
  {
    src: "https://www.w3schools.com/how-spaces-works3.png",
    MultiFamily: 1,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 0,
    Sunshades: 1,
    GlassRailings: 1
  }
];

/* Gemeric function to display array content on screen */
const init = (ar) => ar.map(el => {
  return `<div class="MasonryImagesDiv"><img class="MasonryImage" alt="FillerImage" src=${
    el.src
  }>
      <div>MultiFamily: ${el.MultiFamily}<br>
        AllGlass: ${el.AllGlass}
  </div>`;
});

const sortByAllGlass = (a, b) => {
  if (a.AllGlass === b.AllGlass) {
    return 0;
  }
  return a.AllGlass > b.AllGlass ? 1 : -1;
};
    /* MultiFamily Sorter low to high */
const sortByMultiFamily = (a, b) => {
  if (a.MultiFamily === b.MultiFamily) {
    return 0;
  }
  return a.MultiFamily > b.MultiFamily ? 1 : -1;
};
    
/* Generate array sorted by ascending numbers */
const function1 = () => {
  document.getElementById("app").innerHTML = init([...imgArr].sort(sortByAllGlass));
}
const function2 = () => {
  document.getElementById("app").innerHTML = init([...imgArr].sort(sortByMultiFamily));
}

document.getElementById("app").innerHTML = init(imgArr);

Upvotes: 3

Views: 55

Answers (1)

happymacarts
happymacarts

Reputation: 2604

as @Octavian stated you are missing the doubleQuote (") around the src attribute. Also since array.map always returns an array, using the array.entries might get you there better.

const imgArr = [{
    src: "https://via.placeholder.com/150/0000FF/808080?text=Image1",
    MultiFamily: 1,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 1,
    Sunshades: 1,
    GlassRailings: 1
  },
  {
    src: "https://via.placeholder.com/150/FF0000/FFFFFF?text=Image2",
    MultiFamily: 0,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 1,
    Sunshades: 1,
    GlassRailings: 1
  },
  {
    src: "https://via.placeholder.com/150/FFFF00/000000?text=Image3",
    MultiFamily: 0,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 1,
    Sunshades: 1,
    GlassRailings: 1
  },
  {
    src: "https://via.placeholder.com/150/000000/FFFFFF/?text=Image4",
    MultiFamily: 1,
    Retail: 1,
    Hospitality: 1,
    Educational: 1,
    Industrial: 1,
    Office: 1,
    Sporting: 1,
    Region: 1,
    WindowWall: 1,
    CurtainWall: 1,
    CassetteWall: 1,
    Storefront: 1,
    Windows: 1,
    RevolvingDoor: 1,
    FoldingWalls: 1,
    TerraceDoors: 1,
    SlidingDoors: 1,
    AllGlass: 0,
    Sunshades: 1,
    GlassRailings: 1
  }
];

const init = (ar) => {
  let $output = ''; // initialize an empty string
  for (const [index, el] of ar.entries()) {
    //append our template for each array item
    $output += `
    <div class="MasonryImagesDiv">
      <img class="MasonryImage" alt="FillerImage" src="${el.src}">
      <div>MultiFamily: ${el.MultiFamily}<br>
           AllGlass: ${el.AllGlass}
      </div>
    </div>`;
  }
  return $output; // return the final string
}

document.getElementById("app").innerHTML = init(imgArr);
<div id="app"></div>

Upvotes: 1

Related Questions