When I work with a partner to write a website, the backend returns the json format as follows. My front end uses angular4 but I don't know how to use angular4 to process the following json format data. It is a bit worse and there is no json.parse method.
{
"pageNum":1,
"pageSize":4,
"size":1,
"startRow":1,
"endRow":1,
"total":1,
"pages":1,
"list":[
{
"owner":"aa",
"zh_name":"武世伟：广佛06.19-24搭乘ID（正确）",
"push_status":1,
"business":1,
"create_time":1514256602000,
"coupon_status":1,
"monitor_status":1,
"model_status":3,
"message_status":1,
"monitor_end_time":1514256602000,
"random_group":1,
"name":"p_pm_passenger_taxi_20171226105028119",
"calc_way":1,
"monitor_start_time":1514256602000,
"id":11,
"model_num":8837
}
],
"prePage":0,
"nextPage":0,
"isFirstPage":true,
"isLastPage":true,
"hasPreviousPage":false,
"hasNextPage":false,
"navigatePages":8,
"navigatepageNums":[
1
],
"navigateFirstPage":1,
"navigateLastPage":1,
"status":200,//状态200正常，400 错误
"firstPage":1,
"lastPage":1
}
Angular indeed provides you with a JSON.parse()-method which actually derives from JavaScript. You can convert your server response json into an object.
// in your component
private object;
Then you can access the content. For example:
// call this method after having received your json
private show(data: any): void {
this.object = JSON.parse(data);
console.log(this.object.pageNum);
console.log(this.object.total);
console.log(this.object.list[0].zh_name);
}
Related
I am making a web app with express + react and I'm sending JSON data.
I am fetching this data with axios and using setState to set the messages variable to response.data.messages
{
"messages":{
"message":{
"username":"Khigoris"
}
}
}
and it doesn't let me do this
<p>{messages.message.username}</p>
But it says it is undefined
I am new to using JSON so I think it's the syntax but I need help.
It looks like the messages object is wrapped in another object, i.e your code looks like:
const value = {
"messages":{
"message":{
"username":"Khigoris"
}
}
}
So you should use:
<p>{value.messages.message.username}</p>
I am trying to upload JSON file in order to read values from it and save them in database, but I have problem with that. Code of my controller looks as following:
[Produces("application/json")]
[Route("api/[controller]")]
[ApiController]
public class ImportController : ControllerBase
{
private readonly DatabaseContext dbContext;
public ImportController(DatabaseContext dbContext)
{
this.dbContext = dbContext;
}
[HttpPost]
public IActionResult ImportData(IFormFile file)
{
var content = string.Empty;
using (var reader = new StreamReader(file.OpenReadStream()))
{
content = reader.ReadToEnd();
}
List<UserModel> userObjects = null;
try
{
userObjects = JsonConvert.DeserializeObject<List<UserModel>>(content);
}
catch
{
return BadRequest();
}
foreach (var user in userObjects)
{
UserModel us = new UserModel
{
Username = user.Username,
Password = user.Password
};
dbContext.User.Add(us);
dbContext.SaveChanges();
}
return Ok();
}
}
I'm using Postman to send JSON data, but anytime I try to do it, I get following response:
{"Username":["The input was not valid."]}
when I try to send JSON data as raw->application/json OR
{"":["The input was not valid."]}
when I try to send it by form-data with key called "file" and test.json file as value.
Could you direct me to the right path? I tried to use [FromBody] UserModel user as parameter of my action, but it only allows me to process one JSON string.
You can use [FromBody] IEnumerable<UserModel> users to process many rows. In this case json should look like:
[
{
"userName": "name",
"password": "password",
},
{
"userName": "name1",
"password": "password1",
}
]
You need to standardize your approach one way or another. If you want to accept JSON, then bind to an action param of type List<UserViewModel> with the [FromBody] attribute, and client-side, use JavaScript's FileReader to get the actual content of the upload loaded file and post the content, rather than the file.
If you want to do it by file upload, then you can keep the action as it is, but you'll need to then send your own "JSON" as a file upload as well. This can be achieved by using FormData in JavaScript and creating a Blob manually from your JSON object as a string.
Long and short, whichever path you choose, be uniform about it. There's no way to handle both posting a JSON object and a file upload that happens to be a text file with a .json extension in the same action.
I resolved it... All I had to do was deleting [ApiController] attribute. Having that attribute caused application to didn't visit my ImportData method at all.
So I am coming from a background of C# where I can do things in a dynamic and reflective way and I am trying to apply that to a TypeScript class I am working on writing.
Some background, I am converting an application to a web app and the backend developer doesn't want to change the backend at all to accommodate Json very well. So he is going to be sending me back Json that looks like so:
{
Columns: [
{
"ColumnName": "ClientPK",
"Label": "Client",
"DataType": "int",
"Length": 0,
"AllowNull": true,
"Format": "",
"IsReadOnly": true,
"IsDateOnly": null
}
],
Rows:[
0
]
}
I am looking to write an Angular class that extends Response that will have a special method called JsonMinimal which will understand this data and return an object for me.
import { Response } from "#angular/http";
export class ServerSource
{
SourceName: string;
MoreItems: boolean;
Error: string;
ExtendedProperties: ExtendedProperty[];
Columns: Column[];
}
export class ServerSourceResponse extends Response
{
JsonMinimal() : any
{
return null; //Something that will be a blank any type that when returned I can perform `object as FinalObject` syntax
}
}
I know StackOverflow isn't for asking for complete solutions to problems so I am only asking what is one example taking this example data and creating a dynamic response that TypeScript isn't going to yell at me for. I don't know what to do here, this developer has thousands of server-side methods and all of them return strings, in the form of a JSON or XML output. I am basically looking for a way to take his column data and combine it with the proper row data and then have a bigger object that holds a bunch of these combined object.
A usage case here after that data has been mapped to a basic object would be something like this.
Example:
var data = result.JsonMinimal() as LoginResponse; <-- Which will map to this object correctly if all the data is there in a base object.
var pk = data.ClientPK.Value;
I'm not exactly sure I understand, but you may want to try a simple approach first. Angular's http get method returns an observable that can automatically map the response to an object or an array of objects. It is also powerful enough to perform some custom mapping/transformation. You may want to look at that first.
Here is an example:
getProducts(): Observable<IProduct[]> {
return this._http.get(this._productUrl)
.map((response: Response) => <IProduct[]> response.json())
.do(data => console.log('All: ' + JSON.stringify(data)))
.catch(this.handleError);
}
Here I'm mapping a json response to an array of Product objects I've defined with an IProduct interface. Since this is just a "lambda" type function, I could add any amount of code here to transform data.
In after inline edit free jqgrid sends variable number of columns to ASP.NET MVC4 WebAPI controller using POST method.
Posted data contains json string below.
json string posted to controller in POST body looks like:
{"Toode":"","Kogus":"0.0000",
"Nimetus":"1","Mootyhik0_nimetus":"",
"Reanr":"2",
"_oper":"edit","_rowid":"1673",
"_dokdata":"[
{\"name\":\"Maksetin1_tingimus\",\"value\":\"\"},
{\"name\":\"Kinnitatud\",\"value\":\"False\"}]"
}
It has 3 regions of properties:
Order details. Dynamic properties "Toode":"","Kogus":"0.0000","Nimetus":"1","Mootyhik0_nimetus":"",
"Reanr":"2"
This list may change on runtime depending on user preferences.
This is created by using jqgrid extraparam: getDetails() setting.
Fixed properties stating with underscore `"_oper":"edit","_rowid":"
Those are
_oper and _rowid are always present
jqgrid adds them automatically.
Order data. fixed property _dokdata which contains json array of dynamic properites {\"name\":\"Maksetin1_tingimus\",\"value\":\"\"},{\"name\":\"Kinnitatud\",\"value\":\"False\"}
This is created from jqgrid colmodel.
This list may change in runtime and may contain same poperty names as in p.1 order details.
How to get this data in controller ? Probably it shoud be parsed into two dictionaries . Is it possible to force WebAPI to pass this data as classes/collection to controller or should it parsed manually?
jqgrid settings are from answer Using jqGrid's inline-editing with RESTful urls?
Those and serialize methods can changed if this makes data passing more reasonable.
Resulting WebAPI should have easily understandable data format (good API) since it will be used by third party applications also.
$.extend($.jgrid.defaults, {
ajaxRowOptions: { contentType: "application/json", async: true },
serializeRowData: function (data) {
var propertyName, propertyValue, dataToSend = {};
for (propertyName in data) {
if (data.hasOwnProperty(propertyName)) {
propertyValue = data[propertyName];
if ($.isFunction(propertyValue)) {
dataToSend[propertyName] = propertyValue();
} else {
dataToSend[propertyName] = propertyValue;
}
}
}
return JSON.stringify(dataToSend);
}
});
Update
serializeRowData is changed to
serializeRowData: function (data) {
return JSON.stringify({
headerData: $("#_form").serializeArray(),
rowData: data
} );
}
This produces bloated json for headerData:
{"headerData": [
{"name":"Tasudok","value":"134"},
{"name":"Kuupaev","value":"2015-11-23"},
{"name":"Dokumnr","value":"135319"}
],
"rowData": {"Toode":"",
"Kogus":"0.0000",
"Nimetus":"öäölä<a",
"_rowsum":"0.00",
"Id":"1639",
"Dokumnr":"135319",
"_oper":"edit",
"_rowid":"1639"
}
}
How remove name and value properties from headerData so that it contains property name and value pairs like in rowData:
headerData: {
"Tasudok": "134",
"Kuupaev": "2015-11-23",
"Dokumnr": "135319"
}
I can successfully make a jQuery Ajax call into my C# Controller and receive back an XML string, but I need to in turn gather some Portfolio dates and package them up into a JSON object so I can send them back into another C# Controller.
If it's a C# issue, then I apologize if I'm in the wrong forum...however I'd like to pass my JSON object into the server side controller ..
Here's what I'm trying to do:
var nodeDatesJson = {"nodedates": // CREATE JSON OBJECT OF DATE STRINGS
{ "date": 01/20/2012,
"date": "01/21/2012" } };
getTradeContribs(thisPfId, nodeDatesJson.nodedates.date);
Now call the next js function:
function getTradeContribs(pfid, nodedates) {
//alert(nodedates);
$.ajax({ // GET TRADE CONTRIBS FROM SERVER !!
url: "/Portfolios/getTradeContribs?portfolioId=" + pfid + "&nodedates=" + nodedates,
type: "GET", // or "PUT"
dataType: "json",
async: true,
success: parseTradeContribs,
error: function (error) {
alert("failed in opening Trade Contribs file !!!");
}
});
}
function parseTradeContribs(data) {
alert("In parseTradeContribs..." );
$(data).find("Trade").each(function(){
$(".TradeContrib").append($(this).text());
})
}
and my C# controller is trying to read in the "nodedates" JSON object, but HOW do I read it in ?
public string getTradeContribs(string portfolioId, **string nodedates**)
{
// Build Portfolio Select request here !
RequestBuilder rzrRequest = new RequestBuilder();
// REQUEST FOR CONTRIBUTIONS !
// ... more code here..
xmlResponse.LoadXml(contribResponse);
string jsonTest = #" {""nodedates"": ""date"":""01/01/2012""}";
//return xmlResponse.OuterXml; // WORKS FINE
return "<Trade><TradeId>1234</TradeId></Trade>"; // RETURN TEST XML STR
}
thank you in advance...
Bob
The best way to receive a list of dates in a MVC action is to bind to a collection. What this means is that you should put your dates and other attributes in a form with the following naming convention:
<input type="hidden" name="dates" value="2012-1-20" />
<input type="hidden" name="dates" value="2012-1-21" />
Then you should serialize this form (look into jquery's docs for this) and post its data to your action, which will be something along the lines of:
public ActionResult getTradeContribs(string portfolioId, IList<DateTime> dates) {
// Do your work here
}
You should really take a look into MVC Model binding and collection binding as well:
Model binding to a list
Model binding objects
Also, if I may, your javascript object has two properties with the same name, which is probably not what you mean. If you want to have multiple dates stored somewhere in a object, you should use an array:
var nodeDatesJson = {"nodedates":
[ "01/20/2012", "01/21/2012" ] };
Sorry, but I didn't understand your doubt very well...but here it goes:
Maybe you should pass the json, well-formatted, as a string and use some C# parser.
This way you can get a object in server-side as same as the Json object in javascript.
=]