脚本告诉我它不是函数ERROR

时间：2017-12-04 16:47:42

标签： javascript html

可能是一个非常快速的解决方案，但我坚持它是什么 - 我从API（https://api.roleplay.co.uk/v1/player/76561198062083666）获取信息，其中车辆数量不断变化，以及classname和classtypes。我正在尝试创建一个由逗号分隔的车辆名称列表，然后为每个车辆名称提供其类型的类别，以便我可以根据其类型（即汽车，船，飞机等）对它们进行着色。 。我相信我的代码不起作用，因为你不能把多个变量放在.join后面，但我怎么能超越它呢？

var vehicleList = data.vehicles.map(v => v.classname);
var vehicleType = data.vehicles.map(v => v.classtype);

var content = ("<span class='" + vehicleType + "'>"+ vehicleList + "</span>).join(", ");

document.getElementById("vehicle").textContent = content;

它给了我以下错误：

player.js:404 Uncaught TypeError: (((("<span class='" + vehicleType) + "'>") + vehicleList) + "</span>").join is not a function
    at Object.success (player.js:404)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)

3 个答案:

答案 0 :(得分：1)

我相信这会实现你想要做的事情。

var data = {
  vehicles: [
    { classtype: "test1", classname: "A" },
    { classtype: "test2", classname: "B" },
    { classtype: "test3", classname: "C" }
  ]
}

var content = data.vehicles.map(v => "<span class='" + v.classtype + "'>" + v.classname + "</span>").join(", ");

document.getElementById("vehicle").innerHTML = content;
<div id="vehicle"></div>

编辑：

var data = {
    "uid": 169243,
    "name": "PC Ant Arni",
    "steamid": "76561198062083666",
    "forumname": null,
    "forumid": null,
    "forumurl": null,
    "steam": {
        "name": "Ant Arni",
        "profileurl": "https:\/\/steamcommunity.com\/id\/Antarni\/",
        "avatarSmall": "https:\/\/steamcdn-a.akamaihd.net\/steamcommunity\/public\/images\/avatars\/25\/25f4a505cbce0a9b1deacb7468e18898bcff484f.jpg",
        "avatarMedium": "https:\/\/steamcdn-a.akamaihd.net\/steamcommunity\/public\/images\/avatars\/25\/25f4a505cbce0a9b1deacb7468e18898bcff484f_medium.jpg",
        "avatarLarge": "https:\/\/steamcdn-a.akamaihd.net\/steamcommunity\/public\/images\/avatars\/25\/25f4a505cbce0a9b1deacb7468e18898bcff484f_full.jpg"
    },
    "guid": "33b56e488b3d41d67ff3bc1f57b3d101",
    "cash": 0,
    "bank": 11048411,
    "adminlevel": 0,
    "wanted": false,
    "groupid": 204,
    "grouprank": 3,
    "groupname": "The Copper Kings",
    "unmcrank": 0,
    "unmcair": 0,
    "unmcranger": 0,
    "unmclastlogin": null,
    "policerank": 3,
    "npasrank": 0,
    "mporank": 2,
    "arrank": 0,
    "ncarank": 0,
    "rturank": 1,
    "undercoverrank": "0",
    "policelastlogin": "2017-12-03 19:19:15",
    "nhsrank": 4,
    "nhsarrank": 0,
    "nhsrirrank": 1,
    "nhslastlogin": "2017-11-05 21:27:15",
    "civ_licenses": [{
        "license": "driver",
        "owned": true
    }, {
        "license": "air",
        "owned": true
    }, {
        "license": "heroin",
        "owned": true
    }, {
        "license": "marijuana",
        "owned": true
    }, {
        "license": "boat",
        "owned": true
    }, {
        "license": "oil",
        "owned": true
    }, {
        "license": "dive",
        "owned": true
    }, {
        "license": "truck",
        "owned": true
    }, {
        "license": "gun",
        "owned": true
    }, {
        "license": "rebel",
        "owned": true
    }, {
        "license": "coke",
        "owned": true
    }, {
        "license": "diamond",
        "owned": true
    }, {
        "license": "copper",
        "owned": true
    }, {
        "license": "plastic",
        "owned": true
    }, {
        "license": "aluminium",
        "owned": true
    }, {
        "license": "silica",
        "owned": true
    }, {
        "license": "iron",
        "owned": true
    }, {
        "license": "sand",
        "owned": true
    }, {
        "license": "salt",
        "owned": true
    }, {
        "license": "cement",
        "owned": true
    }, {
        "license": "home",
        "owned": true
    }, {
        "license": "event",
        "owned": false
    }, {
        "license": "meth",
        "owned": true
    }, {
        "license": "taxi",
        "owned": true
    }, {
        "license": "arac",
        "owned": true
    }, {
        "license": "rebelimports",
        "owned": true
    }],
    "vehicles": [{
        "id": 360502,
        "classname": "B_Quadbike_01_F",
        "type": "Car",
        "color": 7
    }, {
        "id": 360505,
        "classname": "C_Offroad_01_F",
        "type": "Car",
        "color": 4
    }, {
        "id": 364532,
        "classname": "C_Van_01_box_F",
        "type": "Car",
        "color": 1
    }, {
        "id": 367013,
        "classname": "C_Kart_01_Vrana_F",
        "type": "Car",
        "color": 0
    }, {
        "id": 373584,
        "classname": "O_MRAP_02_F",
        "type": "Car",
        "color": 0
    }, {
        "id": 386845,
        "classname": "C_Hatchback_01_sport_F",
        "type": "Car",
        "color": 0
    }, {
        "id": 392893,
        "classname": "C_Scooter_Transport_01_F",
        "type": "Ship",
        "color": 3
    }, {
        "id": 393490,
        "classname": "B_Truck_01_box_F",
        "type": "Car",
        "color": 0
    }, {
        "id": 398146,
        "classname": "O_Plane_CAS_02_F",
        "type": "Air",
        "color": 0
    }, {
        "id": 402207,
        "classname": "B_Truck_01_box_F",
        "type": "Car",
        "color": 0
    }, {
        "id": 402335,
        "classname": "O_LSV_02_unarmed_F",
        "type": "Car",
        "color": 1
    }, {
        "id": 407171,
        "classname": "C_Scooter_Transport_01_F",
        "type": "Ship",
        "color": 4
    }, {
        "id": 414610,
        "classname": "C_Plane_Civil_01_racing_F",
        "type": "Air",
        "color": 0
    }, {
        "id": 414696,
        "classname": "C_Hatchback_01_sport_F",
        "type": "Car",
        "color": 3
    }, {
        "id": 415938,
        "classname": "C_Plane_Civil_01_racing_F",
        "type": "Air",
        "color": 0
    }, {
        "id": 415939,
        "classname": "I_Heli_light_03_unarmed_F",
        "type": "Air",
        "color": 2
    }, {
        "id": 419203,
        "classname": "I_C_Offroad_02_unarmed_F",
        "type": "Car",
        "color": 5
    }, {
        "id": 420228,
        "classname": "B_T_VTOL_01_infantry_F",
        "type": "Air",
        "color": 0
    }, {
        "id": 420230,
        "classname": "B_Heli_Transport_03_unarmed_F",
        "type": "Air",
        "color": 0
    }, {
        "id": 420248,
        "classname": "I_Truck_02_covered_F",
        "type": "Car",
        "color": 0
    }, {
        "id": 427634,
        "classname": "O_MRAP_02_F",
        "type": "Car",
        "color": 0
    }, {
        "id": 427635,
        "classname": "O_Heli_Light_02_unarmed_F",
        "type": "Air",
        "color": 3
    }, {
        "id": 427640,
        "classname": "C_Hatchback_01_sport_F",
        "type": "Car",
        "color": 0
    }, {
        "id": 427641,
        "classname": "O_Heli_Transport_04_bench_F",
        "type": "Air",
        "color": 0
    }, {
        "id": 429865,
        "classname": "I_Truck_02_fuel_F",
        "type": "Car",
        "color": 0
    }, {
        "id": 438410,
        "classname": "C_Plane_Civil_01_racing_F",
        "type": "Air",
        "color": 0
    }, {
        "id": 445053,
        "classname": "B_Heli_Light_01_F",
        "type": "Air",
        "color": 14
    }, {
        "id": 445054,
        "classname": "B_Heli_Light_01_F",
        "type": "Air",
        "color": 3
    }, {
        "id": 445857,
        "classname": "B_T_VTOL_01_infantry_F",
        "type": "Air",
        "color": 0
    }, {
        "id": 447813,
        "classname": "C_Van_02_vehicle_F",
        "type": "Car",
        "color": 7
    }, {
        "id": 447814,
        "classname": "C_Van_02_transport_F",
        "type": "Car",
        "color": 7
    }, {
        "id": 448115,
        "classname": "I_G_Van_02_transport_F",
        "type": "Car",
        "color": 0
    }, {
        "id": 448119,
        "classname": "I_G_Van_02_vehicle_F",
        "type": "Car",
        "color": 0
    }, {
        "id": 453900,
        "classname": "C_Van_01_fuel_F",
        "type": "Car",
        "color": 0
    }, {
        "id": 458437,
        "classname": "O_Plane_Fighter_02_Stealth_F",
        "type": "Air",
        "color": 0
    }]
};
var content = data.vehicles.map(v => "<span class='" + v.type + "'>" + v.classname + "</span>").join(", ");

document.getElementById("vehicle").innerHTML = content;
<div id="vehicle"></div>

答案 1 :(得分：0)

var carsText = data.vehicles.reduce((acc,vehicle)=>{
  return acc.concat(`<span class=${vehicle.classtype}>${vehicle.classname}</span>,`)
},'');

document.getElementById('vehicle').innerHTML = carsText.slice(0,-1); //slicing to omit the last extra comma

这应该达到你想要做的目的。

答案 2 :(得分：-1)

我认为，vehicleType是数组，您尝试使用字符串添加数组，这就是您收到此错误的原因，请检查vehicleType。

相关问题
最新问题