如何通過從單獨的數組中匹配的字符串對象值從 3 個嵌套的 json 數組中提取對象值，然后在 html/javascript 中顯示它

Question

我想將一個 json 響應數組中的“標題”和“縮略圖”值匹配到另一個響應數組中的值，並將它們顯示在一個 html 列表中。 本質上，我通過正則表達式將多維數組與另一個數組匹配，然后嘗試在列表中顯示內容，如底部的列表。 任何幫助表示贊賞。

這是第一個數組

jsonArray = [
  [{
    "position": "1",
    "title": "player 1",
    "thumbnail": "www.picuture.com/jpeg"
  }, {
    "position": "2",
    "title": "player 1",
    "thumbnail": "www.picuture2.com/jpeg"
  }],
  [{
    "position": "1",
    "title": "player 2",
    "thumbnail": "www.picuture.com/jpeg"
  }, {
    "position": "2",
    "title": "player 2",
    "thumbnail": "www.picuture2.com/jpeg"
  }],
  [{
    "position": "1",
    "title": "player 3",
    "thumbnail": "www.picuture1.com/jpeg"
  }, {
    "position": "2",
    "title": "player 3",
    "thumbnail": "www.picuture2.com/jpeg"
  }]
]

下面是它需要匹配的第二個數組

array2 = ["player1_details", "player2_details", "player3_details"]

我想要一個 html 列表，其中包含來自 jsonArray 的標題和圖像值以及來自 array2 的播放器詳細信息。

example:
<ul>
  <li>player 1 </li><li>www.picuture1.com/jpeg" </li><li>player1_details </li>
  <li>player 2 </li><li>www.picuture2.com/jpeg" </li><li>player2_details </li>
  <li>player 3 </li><li>www.picuture3.com/jpeg" </li><li>player3_details </li>
</ul> 

Answer 1

因此，您可以這樣做從位置 1 獲取玩家詳細信息，如評論中所討論的，這是眾多方法之一，我定義了一個具有必需屬性的類並將類對象推送到列表中。 在此之后，您可以使用此列表顯示您想要的詳細信息

class reqInformation {
  constructor(title, thumbnail, details) {
    this.title = title;
    this.thumbnail = thumbnail;
    this.details = details;
  }
}
p = new reqInformation("titletest","thumbnailtest","detailstest");
var finalList=[]
var loopCount = 0;
const itemPos = 1;



Object.keys(jsonArray).forEach(function(key) {
    var matchText = jsonArray[key][itemPos]['title'].replace("player ", "");
    if(array2[loopCount].includes(matchText)){
        var p = new reqInformation(
            jsonArray[key][itemPos]['title'],
            jsonArray[key][itemPos]['thumbnail'],
            array2[loopCount]);
    }
    finalList.push(p)
    loopCount++
});
console.log(finalList)

如果您希望對象位於位置0 ，請將itemPos to 0 0