Карта Javascript не является функцией, которая пытается читать данные.

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

Проблема в том, что obj.boats является объектом, а не массивом, следовательно, не имеет метода map.

Попробуйте вместо этого:

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

См MDN

Answer 2

boats - объект, а не массив. Карта предназначена для массивов.

Вы можете использовать цикл for (in) или Object.keys(), чтобы получить массив ключей и работать с ним.

Answer 3

Две другие ответы правы, я бы изменить данные, хотя:

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

Использование идентификатора в качестве ключа и затем предоставление содержащего объекта свойства «id» является беспредметным. Когда вы измените данные в эту структуру, ваш код будет работать нормально.

Answer 4

Кроме того, все другие ответы, которые уже правильно указывают на obj.boats будучи Object, а не Array, я хотел бы обеспечивая решение, которое демонстрирует изящную красоту Array.reduce ...

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);

Примечание

Принимая во внимание дополнительную дополнительную ОП omment, упоминая реальную структуру данных, предоставленной в 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: [] 
}); 

.., доказательство того, что общие решения могут быть переработаны/адаптированы легко, если, например, структуры данных меняются.