mostrar - recorrer objeto json javascript
Fecha del formato Angular.js del objeto json (7)
De hecho, combiné las respuestas de @Charminbear y @Nikos terminando en este filtro, que funciona bastante bien y es bastante claro sin la expresión regular:
myApp.filter("jsDate", function () {
return function (x) {
return new Date(parseInt(x.substr(6)));
};
});
Esto hace posible escribir
{{ $scope.item.CreatedOn | jsDate | date:"yyyy-MM-dd" }}
Mi respuesta json se ve así:
[{"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 fecha "CreatedOn" está en este tipo de formato: ''/ Date (1390272893353) /''
cuando enlace este resultado a la tabla html, la fecha no se puede formatear:
<td>{{item.CreatedOn | date: ''yyyy-MM-dd HH:mm''}}</td>
todavía me da:
/ Fecha (1390272893353) /
No quiero cambiar ningún código del lado del servidor (no modifique la cadena json), ¿cuál es la mejor forma de formatear esta fecha?
Otra opción, posiblemente mejor, es analizar la fecha al recibir el JSON.
Yo uso la siguiente función:
(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;
}
})();
Lo cual está tomado de aquí: http://codepaste.net/i89xhc , excepto que sobreescribo la función estándar JSON.parse con esta versión que analiza la fecha. Esto significa que Angular analizará las fechas de ASMX automáticamente de todos los JSON que vea.
También puede escribir una transformación personalizada usando transformaciones angulares $ http. Ver: https://docs.angularjs.org/api/ng/service/ $ http
//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)
: '''';
};
}]);
Una opción es escribir otro filtro y ponerlo en la cadena. P.ej:
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;
};
});
Básicamente usa la expresión regular para analizar la cadena y hacer una Date (si el formato es diferente al que se muestra, tendrá que ajustar la expresión regular).
Úselo como:
<td>{{item.CreatedOn | mydate | date: ''yyyy-MM-dd HH:mm''}}</td>
Sé que llego tarde a la fiesta. Pero quiero decir lo que me ayudó fue:
<td>{{item.yourdatefield.slice(6,-2) | date:''dd-MMM-yyyy'' }}</td>
Espero que ayude a codificadores perezosos como yo. :)
Angular Date-Filter espera una JS-Date. Entonces necesita analizar la fecha JSON antes de dársela al filtro.
Prueba esto:
<td>{{item.CreatedOnParsed | date: ''yyyy-MM-dd HH:mm''}}</td>
Y en su método de devolución de llamada de la respuesta, haga algo como:
$scope.item.CreatedOnParsed = new Date(parseInt(item.CreatedOn.substr(6)));
como se muestra en esta respuesta
EDITAR Como lo acaban de ver los comentarios de su publicación, incluso la marca de tiempo es suficiente para el filtro de fecha, así que incluso esto debería ser suficiente:
$scope.item.CreatedOnParsed = item.CreatedOn.substr(6);
Suponiendo que es una fecha .NET JSON y está usando moment.js. Luego aproveche su funcionalidad ( definida aquí ) en un filtro
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 '''';
}
};
}])