/ / Експорт JSON в CSV в Angular - json, angularjs, csv

Експортувати JSON в CSV у кутовий - json, angularjs, csv

Я шукаю способи перетворення об'єкта JSON у формат CSV за допомогою Angular. Я натрапив на це https://www.npmjs.com/package/jsonexport що саме я хочу використовувати,але я не впевнений, якщо я дійсно можу використовувати це з Angular (здається, вузол специфічний?), А якщо ні, чи є готові директиви і т.д.

Чи може хто-небудь вказати мені на деякі корисні приклади, я мав озирнутися, і вони, здається, мало і далеко, і те, що я знайшов тільки здається, справляється з дуже базовими плоскими структурами JSON.

Дякую

Відповіді:

3 для відповіді № 1

Спробуйте це http://ngmodules.org/modules/ng-csv

Для робочого прикладу - https://asafdav.github.io/ng-csv/example/

Приклад використання js (взято з їхніх документів)

Сценарій

    var myapp = angular.module("myapp", ["ngSanitize", "ngCsv"]);

myapp.controller("myctrl", function ($scope) {
$scope.filename = "test";
$scope.getArray = [{a: 1, b:2}, {a:3, b:4}];

$scope.addRandomRow = function() {
$scope.getArray.push({a: Math.floor((Math.random()*10)+1), b: Math.floor((Math.random()*10)+1)});
};

$scope.getHeader = function () {return ["A", "B"]};

$scope.clickFn = function() {
console.log("click click click");
};
});

Розмітка

<div ng-app="myapp">
<div class="container" ng-controller="myctrl">

<div class="page-header">
<h1>ngCsv <small>example</small></h1>
</div>

<div class="form-group">
<label for="filename">Filename </label>
<input type="text" id="filename" class="form-control" ng-model="filename">
</div>

<div class="form-group">
<label for="separator">Field separator</label>
<input type="text" id="separator" class="form-control" ng-model="separator" ng-init="separator=","">
</div>

<div class="form-group">
<label for="decimal-separator">Decimal separator</label>
<input type="text" id="decimal-separator" class="form-control" ng-model="decimalSeparator" ng-init="decimalSeparator="."">
</div>

<button class="btn btn-default"
ng-csv="getArray" filename="{{ filename }}.csv" field-separator="{{separator}}" decimal-separator="{{decimalSeparator}}"
>Export to CSV</button>

<button class="btn btn-default"
ng-csv="getArray" csv-header="getHeader()" filename="{{ filename }}" field-separator="{{separator}}" decimal-separator="{{decimalSeparator}}"
>Export to CSV with header</button>

<button class="btn btn-default"
ng-csv="getArray" csv-header="getHeader()" filename="{{ filename }}" field-separator="{{separator}}" decimal-separator="{{decimalSeparator}}"
ng-click="clickFn()">Export with ng-click</button>

<button class="btn btn-default"
ng-csv="getArray" filename="{{ filename }}.csv" field-separator="{{separator}}" decimal-separator="{{decimalSeparator}}" add-bom="true"
>With BOM</button>

<button class="btn btn-default" ng-click="addRandomRow()">Add row</button>
</div>
</div>

0 для відповіді № 2

Немає можливості для експорту даних підмережіui-grid. Але у нас є інший вибір для експорту ui-grid і даних підсети як .csv-файлу за допомогою FileSaver.js. Я створив Директиву для отримання даних grid / Json, а потім форматування даних, як деревоподібна структура і потім завантажте файл .csv за допомогою FileSaver.js, він має обмеження до вкладеної сітки.

    angular.module("exampleModule", [])
.controller("exampleController", function ($scope) {
$scope.dataList = [
{
id: 1,
name: "github",
price: "200$",
publisher: {
name: "hieutran",
company: "Dtag-VN"
},
nested:[
{
name: "name1",
company: "company1"
},
{
name: "name2",
company: "company2"
}]
},
{
id: 2,
name: "twitter",
price: "500$",
publisher: {
name: "twitter tran",
company: "Canada"
},
nested:[]
},

{
id: 3,
name: "google",
price: "300$",
publisher: {
name: "tran",
company: "Vietname"
},
nested:[
{
name: "name3",
company: "company3"
},
{
name: "name4",
company: "company4"
}]
}
]
})
.directive("ngGridJsonExportExcel", function($timeout) {
return {
restrict: "AE",
scope: {
data: "=",
filename: "=?",
reportFields: "=",
nestedReportFields: "=",
nestedDataProperty: "@"
},
link: function(scope, element) {
scope.filename = !!scope.filename ? scope.filename : "export-excel";

function generateFieldsAndHeaders(fieldsObject, fields, header) {
_.forEach(fieldsObject, function(field, key) {
if (!field || !key) {
throw new Error("error json report fields");
}
fields.push(key);
header.push(field);
});
return {fields: fields, header: header};
}
var fieldsAndHeader = generateFieldsAndHeaders(scope.reportFields, [], []);
var fields = fieldsAndHeader.fields, header = fieldsAndHeader.header;
var nestedFieldsAndHeader = generateFieldsAndHeaders(scope.nestedReportFields, [], [""]);
var nestedFields = nestedFieldsAndHeader.fields, nestedHeader = nestedFieldsAndHeader.header;
function _convertToExcel(body, header) {
return header + "n" + body;
}
function _objectToString(object) {
var output = "";
_.forEach(object, function(value, key) {
output += key + ":" + value + " ";
});

return """ + output + """;
}
function generateFieldValues(list, rowItems, dataItem) {
_.forEach(list, function(field) {
var data = "", fieldValue = "", curItem = null;
if (field.indexOf(".")) {
field = field.split(".");
curItem = dataItem;
// deep access to obect property
_.forEach(field, function(prop) {
if (curItem !== null && curItem !== undefined) {
curItem = curItem[prop];
}
});
data = curItem;
} else {
data = dataItem[field];
}
fieldValue = data !== null ? data : " ";
if (fieldValue !== undefined && angular.isObject(fieldValue)) {
fieldValue = _objectToString(fieldValue);
}
rowItems.push(fieldValue);
});
return rowItems;
}
function _bodyData() {
var body = "";

_.forEach(scope.data, function(dataItem) {
var rowItems = [];var nestedBody = "";
rowItems = generateFieldValues(fields, rowItems, dataItem);
//Nested Json body generation start
if (scope.nestedDataProperty && dataItem[scope.nestedDataProperty].length) {
_.forEach(dataItem[scope.nestedDataProperty], function(nestedDataItem) {
var nestedRowItems = [""];
nestedRowItems = generateFieldValues(nestedFields, nestedRowItems, nestedDataItem);
nestedBody += nestedRowItems.toString() + "n";
});
var strData = _convertToExcel(nestedBody, nestedHeader);
body += rowItems.toString() + "n" + strData;
////Nested Json body generation end
} else {
body += rowItems.toString() + "n";
}
});
return body;
}

$timeout(function() {
element.bind("click", function() {
var bodyData = _bodyData();
var strData = _convertToExcel(bodyData, header);
var blob = new Blob([strData], {
type: "text/plain;charset=utf-8"
});

return saveAs(blob, [scope.filename + ".csv"]);
});
}, 1000);
}
};
});
</ pre>

HTML code:

<button ng-json-export-excel data="dataList"  nested-data-property="nested" report-fields="{id: "ID Heder", name: "Name Header", price: "Price Head",  "publisher.name": "Publisher Head", "publisher.company": "Company Head"}" nested-report-fields="{name: "Nested Name", company: "Nested Company"}">Json Export</button>
</ pre>

</ code> Ось мій plunker

</ code></ p>