Sort data in javasript using images

Question

I am creating a project using angular 6. I have coming into problem where i want to sort the array of object who have valid image, but some of the images having broken links, so i want to sort the array in the form who have valid image comes into top.

The broken links means that there is no image at that path

This is the data:

"producteviews": [
    {
      "pBuyer": "Franco Fresilli",
      "
      "image": "https:\/\/eqhub.com\/eqhubV2\/equhub-server\/public\/uploads\/defaultEqp.jpg",

    },
    {
      "pBuyer": "Gabriel Rodriguez",

      "image": "",

    },
    {
      "pBuyer": "David King",

      "image": "https:\/\/eqhub.com\/eqhubV2\/equhub-server\/public\/uploads\/defaultEqp.jpg",

    },
    {
      "pBuyer": "Michael Cook",
      "
      "image": "",

    }],

Answer 1

Provided that you simply need to sort entries with missing image properties and entries with image properties with invalid syntax lower in the list, you can accomplish this using the array .sort method:

 const productReviews = [ { "pBuyer": "Franco Fresilli", "image": "https://eqhub.com/eqhubV2/equhub-server/public/uploads/defaultEqp.jpg", }, { "pBuyer": "Gabriel Rodriguez", "image": "", }, { "pBuyer": "Gozer", "image": "You must choose!" }, { "pBuyer": "David King", "image": "https://eqhub.com/eqhubV2/equhub-server/public/uploads/defaultEqp.jpg", }, { "pBuyer": "Michael Cook", "image": "", } ]; const urlCheck = /^(?:http(s)?:\\/\\/)?[\\w.-]+(?:\\.[\\w\\.-]+)+[\\w\\-\\._~:/?#[\\]@!\\$&'\\(\\)\\*\\+,;=.]+$/gm; // this is a regex that checks for valid URL structure; taken from https://www.regextester.com/94502 ; I recommend finding one specifically suited to your needs productReviews.sort((prA, prB) => { const checkA = !!prA.image && urlCheck.test(prA.image) ? -1 : 1; const checkB = !!prB.image && urlCheck.test(prB.image) ? -1 : 1; return checkA > checkB ? 1 : -1; }); console.log(productReviews)

Answer 2

Not sure this is helpful, but it might be a start, if I understand your question correctly. There is a way to detect JS runtime errors programmatically. Here is an example:

HTML:

<div id = "imagelist">
<img src = "https://www.w3schools.com/w3css/img_mountains.jp">
<img src = "https://www.w3schools.com/w3css/img_mountains.jpg">
<img src = "https://www.w3schools.com/w3css/img_mountains.jp">
<img src = "https://www.w3schools.com/w3css/img_mountains.jpg">
<img src = "https://www.w3schools.com/w3css/img_mountains.jp">
</div>

JS

/* Option 1: */

// window.addEventListener('error', function(event) { console.log(event.target);}, true);

/* Option 2: */

images = document.querySelectorAll("img");
imagelist = document.getElementById("imagelist");

images.forEach(function(elem, index) {

    elem.addEventListener("error", function(event) {
    imagelist.appendChild(this); 
/*     this.remove(); */
    event.index = index;
    console.log(event);
    this.error = null;

    });
});

With Option 2, probably better really since it attached to the image elements, you'll get an error object (see below. I actually modified to to add the "index" property value to the object, so you could actually have a set of the images that threw an error. Not sure how you would implement that really with your code. Something to think about. I only test in Firefox. There is probably a way to suppress the error in the console also, but not sure how to do that.

 /* Option 1: */ // window.addEventListener('error', function(event) { console.log(event.target);}, true); /* Option 2: */ images = document.querySelectorAll("img"); imagelist = document.getElementById("imagelist"); images.forEach(function(elem, index) { elem.addEventListener("error", function(event) { imagelist.appendChild(this); /* this.remove(); */ event.index = index; console.log(event); this.error = null; }); });

 <div id = "imagelist"> <img src = "https://www.w3schools.com/w3css/img_mountains.jp"> <img src = "https://www.w3schools.com/w3css/img_mountains.jpg"> <img src = "https://www.w3schools.com/w3css/img_mountains.jp"> <img src = "https://www.w3schools.com/w3css/img_mountains.jpg"> <img src = "https://www.w3schools.com/w3css/img_mountains.jp"> </div>

Console showing the Object.

bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
explicitOriginalTarget: <img src="https://www.w3schools.com/w3css/img_mountains.jp">
index: 4
isTrusted: true
originalTarget: <img src="https://www.w3schools.com/w3css/img_mountains.jp">
returnValue: true
srcElement: <img src="https://www.w3schools.com/w3css/img_mountains.jp">​
target: <img src="https://www.w3schools.com/w3css/img_mountains.jp">
timeStamp: 183
type: "error"
<get isTrusted()>: function isTrusted()
<prototype>: EventPrototype { composedPath: composedPath(), stopPropagation: stopPropagation(), stopImmediatePropagation: stopImmediatePropagation(), … }