Question

我正在使用angular 6创建一个项目。我遇到了一个问题，我想对具有有效图像的对象数组进行排序，但是某些图像具有断开的链接，因此我想对表单进行排序拥有有效图片的人居首位。

断开的链接意味着该路径上没有图像

这是数据：

"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

假设您只需要对列表中缺少image属性的条目和具有image属性的条目进行排序，并且其语法无效，可以使用数组.sort的方法来完成此操作：

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

不确定这是否有帮助，但如果我正确理解您的问题，那可能是一个开始。有一种方法可以以编程方式检测JS运行时错误。这是一个示例：

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;

    });
});

使用选项2，可能真的更好，因为它附加到图像元素上，您将获得一个错误对象（请参见下文。我实际上进行了修改，将“ index”属性值添加到对象，因此实际上一组引发错误的图像。不确定如何用代码真正实现它。要考虑的事情。我仅在Firefox中进行测试。也可以通过一种方法来抑制控制台中的错误，但不确定该怎么做。

/* 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>

显示对象的控制台。

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(), … }

使用图像对javasript中的数据进行排序

2 个答案: