Angular.js format date de json objet
Ma réponse json ressemble à ceci:
[{"Id":"dab4580b-e24d-49f8-9fd5-2e968b10d3b5","Title":"MVVM-Sidekick 入精","CreatedOn":"\/Date(1390272893353)\/","IsChecked":false},{"Id":"66a0f134-e240-4cc4-96fa-ac3807853ca7","Title":"Windows Phone 开发入精","CreatedOn":"\/Date(1390018447080)\/","IsChecked":false}]
la date "CreatedOn" est dans ce type de format: '/ Date (1390272893353) /'
lorsque je lie ce résultat à un tableau html, la date ne peut pas être formatée:
<td>{{item.CreatedOn | date: 'yyyy-MM-dd HH:mm'}}</td>
me donne toujours:
/ Date (1390272893353) /
Je ne veux changer aucun code côté serveur (ne modifiez pas la chaîne json), quel est le meilleur moyen de formater cette date?
Une option consiste à écrire un autre filtre et à le mettre dans la chaîne. Par exemple.:
app.filter("mydate", function() {
var re = /\/Date\(([0-9]*)\)\//;
return function(x) {
var m = x.match(re);
if( m ) return new Date(parseInt(m[1]));
else return null;
};
});
Fondamentalement, il utilise l'expression régulière pour analyser la chaîne et créer une Date (si le format est différent de celui présenté, vous devrez ajuster légèrement l'expression régulière).
Utilisez-le comme:
<td>{{item.CreatedOn | mydate | date: 'yyyy-MM-dd HH:mm'}}</td>
En fait, j'ai combiné les réponses de @Charminbear et de @Nikos dans ce filtre qui fonctionne assez bien et qui est assez clair sans l'expression rationnelle:
myApp.filter("jsDate", function () {
return function (x) {
return new Date(parseInt(x.substr(6)));
};
});
Cela permet d'écrire
{{ $scope.item.CreatedOn | jsDate | date:"yyyy-MM-dd" }}
Je sais que je suis en retard pour la fête. Mais je veux dire ce qui m'a aidé était: -
<td>{{item.yourdatefield.slice(6,-2) | date:'dd-MMM-yyyy' }}</td>
J'espère que ça va aider les codeurs paresseux comme moi. :)
Le filtre de date angulaire attend une date JS. Vous devez donc analyser la date JSON avant de la transmettre au filtre.
Essaye ça:
<td>{{item.CreatedOnParsed | date: 'yyyy-MM-dd HH:mm'}}</td>
Et dans votre méthode de rappel de la réponse, faites quelque chose comme:
$scope.item.CreatedOnParsed = new Date(parseInt(item.CreatedOn.substr(6)));
comme il est montré dans ce Answer
EDIT Comme on peut le voir dans les commentaires de votre message, même l'horodatage suffit pour le filtre de dates, ce qui devrait donc suffire:
$scope.item.CreatedOnParsed = item.CreatedOn.substr(6);
//input - "DocDate":"\/Date(1127318400000-0000)\/"
-------
<tr dir-paginate="user in SalesOrder>
<td>{{user.DocDate | jsonDate}}</td>
</tr>
controller
----------
app.filter('jsonDate', ['$filter', function ($filter) {
return function (input, format) {
return (input)
? $filter('date')(parseInt(input.substr(6)), format)
: '';
};
}]);
Une autre option, peut-être préférable, consiste à analyser la date lorsque vous recevez le JSON.
J'utilise la fonction suivante:
(function() {
if (JSON && !JSON.parseWithDate) {
JSON.parseWithoutDate = JSON.parse; //Store the original JSON.parse function
var reISO = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/;
var reMsAjax = /^\/Date\((d|-|.*)\)[\/|\\]$/;
JSON.parseWithDate = function (json) {
/// <summary>
/// parses a JSON string and turns ISO or MSAJAX date strings
/// into native JS date objects
/// </summary>
/// <param name="json" type="var">json with dates to parse</param>
/// </param>
/// <returns type="value, array or object" />
try {
var res = JSON.parseWithoutDate(json,
function (key, value) {
if (typeof value === 'string') {
var a = reISO.exec(value);
if (a)
return new Date(Date.UTC(+a[1], +a[2] - 1,
+a[3], +a[4], +a[5], +a[6]));
a = reMsAjax.exec(value);
if (a) {
var b = a[1].split(/[-+,.]/);
return new Date(b[0] ? +b[0] : 0 - +b[1]);
}
}
return value;
});
return res;
} catch (e) {
// orignal error thrown has no error message so rethrow with message
throw new Error("JSON content could not be parsed");
return null;
}
};
JSON.dateStringToDate = function (dtString) {
/// <summary>
/// Converts a JSON ISO or MSAJAX string into a date object
/// </summary>
/// <param name="" type="var">Date String</param>
/// <returns type="date or null if invalid" />
var a = reISO.exec(dtString);
if (a)
return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3],
+a[4], +a[5], +a[6]));
a = reMsAjax.exec(dtString);
if (a) {
var b = a[1].split(/[-,.]/);
return new Date(+b[0]);
}
return null;
};
JSON.stringifyWcf = function (json) {
/// <summary>
/// Wcf specific stringify that encodes dates in the
/// a WCF compatible format ("/Date(9991231231)/")
/// Note: this format works ONLY with WCF.
/// ASMX can use ISO dates as of .NET 3.5 SP1
/// </summary>
/// <param name="key" type="var">property name</param>
/// <param name="value" type="var">value of the property</param>
return JSON.stringify(json, function (key, value) {
if (typeof value == "string") {
var a = reISO.exec(value);
if (a) {
var val = '/Date(' +
new Date(Date.UTC(+a[1], +a[2] - 1,
+a[3], +a[4],
+a[5], +a[6])).getTime() + ')/';
this[key] = val;
return val;
}
}
return value;
})
};
//Make Date parsing the default
JSON.parse = JSON.parseWithDate;
}
})();
Ce qui est pris ici: http://codepaste.net/i89xhc , sauf que je remplace la fonction standard JSON.parse par cette version qui analyse la date. Cela signifie que Angular analysera automatiquement les dates ASMX à partir de tous les fichiers JSON qu’il voit.
Vous pouvez également écrire une transformation personnalisée à l'aide de transformations angulaires $ http. Voir: https://docs.angularjs.org/api/ng/service/ $ http
En supposant qu'il s'agisse d'une date .net JSON et que vous utilisez moment.js. Puis exploitez sa fonctionnalité ( définie ici ) dans un filtre
myApp.filter('JSONdate', [
'$filter', function ($filter) {
return function (input, appformat) {
if (input != null) {
return moment(input).format(appformat);
// use the line below if you want to leverage the standard date filter on top of this
// return $filter('date')(new Date(moment(input)), appformat);
} else {
return '';
}
};
}])