Javascript map 不是试图读取数据的函数

Question

我正在尝试填充图表，因此我将数据放入 2 个列表中以执行此操作。

这是数据：

var data = [{
    "id": "622",
    "name": "some name",
    "boats": {
        "637": {
            "id": "637",
            "name": " Subcat 1",
            "translations": null
        },
        "638": {
            "id": "638",
            "name": "Subcat 2",
            "translations": null
        }
    },
    "image": "73e043a7fae04b55855bede22da6286b"
}];

我运行此代码是为了填充列表：

var chList = [];
var boatList = [];
var boatCount = [];


for (var i = 0; i < data.length; i++) {

    var obj = data[i];

    var cl = obj.name + " [" + obj.id + "]";

    if (obj.boats != null) {
        chList.push(cl);
    }

    if(obj.boats) {

        var nme = obj.boats.map( function(item){
            return item.name;
        });

        boatList = boatList.concat(nme);
        boatCount.push(nme.length);

    }

}

console.log(boatList);
console.log(boatCount);

我的问题是我不断收到：

TypeError: obj.boats.map 不是函数

我该如何解决这个问题？

注：数据其实是这样的：

{
    "id": "622",
    "name": "some name",
    "boats": {
        "637": {
            "id": "637",
            "name": " Subcat 1",
            "translations": null
        },
        "638": {
            "id": "638",
            "name": "Subcat 2",
            "translations": null
        }
    },
    "image": "73e043a7fae04b55855bede22da6286b"
};

但我向其中添加了 [ 和 ] 以便使用 data.length 并且列表也是空的...然后我是否保留这些数据？

Answer 1

boats 是对象，不是数组。映射用于数组。

您可以使用 for ( in ) 循环或 Object.keys() 获取键数组并使用它。

Answer 2

问题是 obj.boats 是一个对象，而不是数组，因此没有 map 方法。

试试这个：

Object.keys(obj.boats).map(function(k) { return obj.boats[k].name; });

见MDN

Answer 3

其他两个答案是正确的，不过我会更改数据：

"boats": [
    {
        "id": "637",
        "name": " Subcat 1",
        "translations": null
    },
    {
        "id": "638",
        "name": "Subcat 2",
        "translations": null
    }
],

使用 id 作为键然后给包含对象一个 "id" 属性有点毫无意义。当您将数据更改为此结构时，您的代码将正常工作。

Answer 4

除了已经正确指向 obj.boats 是 Object 而不是 Array 的所有其他答案之外，我想提供一个解决方案来展示 [= 的优雅之美15=] ...

var boatChartData = [{
  "id": "622",
  "name": "some name",
  "boats": {
    "637": {
      "id": "637",
      "name": "Subcat 1",
      "translations": null
    },
    "638": {
      "id": "638",
      "name": "Subcat 2",
      "translations": null
    }
  },
  "image": "73e043a7fae04b55855bede22da6286b"
}, {
  "id": "623",
  "name": "other name",
  "boats": {
    "639": {
      "id": "639",
      "name": "Supercat",
      "translations": null
    },
    "640": {
      "id": "640",
      "name": "Supercat II",
      "translations": null
    },
    "641": {
      "id": "641",
      "name": "Supercat III",
      "translations": null
    }
  },
  "image": "73e043a7fae04b55855bede22da6295c"
}];


function collectBoatChartData(collector, chartItem/*, idx, list*/) {
  var
    boatNameList,
    boatMap = chartItem.boats;

  if (boatMap != null) {
    collector.chartItemTitleList.push([

      chartItem.name,
      " [",
      chartItem.id,
      "]"

    ].join(""));

    boatNameList = Object.keys(boatMap).map(collector.getBoatNameByKey, boatMap);

    collector.boatNameList = collector.boatNameList.concat(boatNameList);

  //collector.chartItemBoatNameList.push(boatNameList);
    collector.chartItemBoatCountList.push(boatNameList.length);
  }
  return collector;
}


var processedBoatChartData = boatChartData.reduce(collectBoatChartData, {

  getBoatNameByKey: function (key) {
    return this[key].name;
  },
  boatNameList: [],
  chartItemTitleList: [],
//chartItemBoatNameList: [],
  chartItemBoatCountList: []
});

console.log("processedBoatChartData.boatNameList : ", processedBoatChartData.boatNameList);
console.log("processedBoatChartData.chartItemTitleList : ", processedBoatChartData.chartItemTitleList);
  //console.log("processedBoatChartData.chartItemBoatNameList : ", processedBoatChartData.chartItemBoatNameList);
console.log("processedBoatChartData.chartItemBoatCountList : ", processedBoatChartData.chartItemBoatCountList);

备注

考虑到OP的附加评论，提到提供的axample的真实数据结构，我上面提供的解决方案只是更改为...

var boatChartData = {
  "id": "622",
  "name": "some name",
  "boats": {
    "637": {
      "id": "637",
      "name": "Subcat 1",
      "translations": null
    },
    "638": {
      "id": "638",
      "name": "Subcat 2",
      "translations": null
    }
  },
  "image": "73e043a7fae04b55855bede22da6286b"
};

var processedBoatChartData = [boatChartData].reduce(collectBoatChartData, {

  getBoatNameByKey: function (key) {
    return this[key].name;
  },
  boatNameList: [],
  chartItemTitleList: [],
//chartItemBoatNameList: [],
  chartItemBoatCountList: []
});

..，证明通用解决方案可以很容易 recycled/adapted，例如数据结构确实发生了变化。

Javascript map 不是试图读取数据的函数

Javascript map is not a function what trying to read data

javascript

iteration

reduce

data-structures