# cc-csv-parser

**Repository Path**: xabobo/cc-csv-parser

## Basic Information

- **Project Name**: cc-csv-parser
- **Description**: cocos creator 解析 csv 文件  TypeSrcipt版本
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2020-12-26
- **Last Updated**: 2020-12-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# cocos creator csv 解析

天下苦 json 久矣。一般 JavaScript 项目都会使用 json 作为配置，一旦配置越写越多， json 会变得难以阅读，而且编写 json 也有许多不方便的地方，比如最后一个子项必须不能有逗号，key 必须加引号，必须使用双引号等。    

使用 csv 的优势在于能使用 wps 或者 excel 等先进的工具进行编辑，文件格式简介

## 图片示例

> 在 wps 中优雅地阅读编辑 csv   
>> ![在 wps 中阅读编辑 csv](example/emp1.png)  
> 在编辑器中的 json 
>> ![在编辑器中的 json](example/emp2.png)  
> 解析 csv  
>> ![解析 csv](example/emp3.png)   

## 如何使用

### 基本用法

``` javascript
    import { loadCsv } from 'ccCsvParser' // 首先引入 loadCsv 这个函数 

    const url = 'config/myCsvFile' // 这里是你要加载的 csv 文件的路径 （相对于项目 resources 目录的路径）
    loadCsv(url)
        .then((ccCsv) => { // 这个函数返回 Promise， Promise 的回调函数参数是一个 CCcsv 对象，其 getParsedData 方法返回被解析的数据（二维数组）
            const data = ccCsv.getParsedData()
        })
```

### CCcsv

ccCsv 实例化后 

#### 属性

* originData csv 文件的原始数据 string
* parsedData 解析过的数据，array[][]

#### 方法

* getParsedData 获取被解析过的数据，array[][]
* getColumnByIndex 根据索引返回一列数据 array[string]，索引从 0 开始
* getColumnByHeadName 根据表头名字返回一列数据array[string]
* getRowByIndex 根据索引返回数据对象 object { header: 表头数组, data: 该行数据 }，索引从 0 开始
* getRowByNameAndValue 根据表头和对应数值数据对象 object { header: 表头数组, data: 该行数据 }

### 例子

该例子的文件是本项目中的 example.csv

``` javascript
    let data = null
    loadCsv(url).then((ccCsv) => {

        data = ccCsv.getColumnByIndex(2)
        // data: ["防御", "2", "3", "4", "5" ...]

        data = ccCsv.getColumnByHeadName('攻击')
        // data: ["攻击", "2", "4", "6", "8" ...]

        data = ccCsv.getRowByIndex(5)
        // data: {head: Array(4), data: Array(4)}head: (4) ["等级", "攻击", "防御", "升级奖励"]data: (4) ["5", "10", "6", "10"]

        data = ccCsv.getRowByNameAndValue('防御', '10')
        // data: {head: Array(4), data: Array(4)}head: (4) ["等级", "攻击", "防御", "升级奖励"]data: (4) ["9", "18", "10", "10"]

    })
```

## 可能会遇到的问题

### WPS 或者 Excel 到处的 csv 文件乱码

* 导出的 csv 文件在 cocos 中可能会出现乱码，因为 WPS 导出的 csv 是 ANSI 编码
* 在 VSCode 中打开该 csv 文件，通过编码重新打开: 选 Simplified Chinese(GBK)，然后再通过编码保存: 选 UTF-8，完成后即可解决乱码问题