Develop Reference

Unable to send array in a object via ajax post request. Array is not basically visible in the object after the after post requestsuccess

This is the Object which used in Post request#
ProductBrandName: "asd"
ProductCatagoryMenOrWomen: "Men"
ProductDiscription: "asd"
ProductImages: Array(1)
0: "https://firebasestorage.googleapis.com/v0/
1: "https://firebasestorage.googleapis.com/v0/
length: 2
__proto__: Array(0)
ProductName: "asd"
ProductPrice: "asd"
ProductType: "Shoes"
ProductUplodedDate: Wed Oct 14 2020 10:00:15{}
'''
After Post call, it is not displaying the array in the obj.
This is the obj after the post-call
I want an array in it
{
"id": "4",
"ProductName": "asd",
"ProductPrice": "asd",
"ProductDiscription": "asd",
"ProductCatagoryMenOrWomen": "Men",
"ProductBrandName": "asd",
"ProductUplodedDate": "Wed Oct 14 2020 10:00:15 GMT+0530 (India Standard Time)",
"ProductType": "Shoes"
}
This is the ajax call I am using to post it
$.ajax({
type:"post",
url:"https://5f844e4d6b9744002.mockapi.io/ShopingWebSit",
data:product
})

How could i change my JSON structure into chartJS barchart JSON structure?

[
0: {flight: "Spicejet", range: "min", Jul 1: 2397, Jul 2: 2397, Jul 3: 2397},
1: {flight: "Spicejet", range: "max", Jul 1: 3045, Jul 2: 3045, Jul 3: 3045,},
2: {flight: "Spicejet", range: "med", Jul 1: 2789, Jul 2: 2789, Jul 3: 2789,},
3: {flight: "Indigo", range: "min", Jul 1: 3000, Jul 2: 3000, Jul 3: 3000,},
4: {flight: "Indigo", range: "max", Jul 1: 5000, Jul 2: 5000, Jul 3: 5000,},
5: {flight: "Indigo", range: "med", Jul 1: 4000, Jul 2: 4000, Jul 3: 4000,},
]
into
labels: ["Jul 1","Jul 2","Jul 3"],
datasets: [
{
label: "SpiceJet",
data: [3045,3045,3045],
},
{
label: "airways",
data: [5000,5000,5000],
},
]
for chartJS reactjs (Linechart). The chartjs is complicated in this case please give some solution in this. In datasets[ {data:[only get the range "max" value]} ]

While the question is quite unclear regarding the intended usage of the target format, the actual transformation for the example can easily be achieved.
If we assume all input elements share the same data properties (Jul * in this case), we can extract the labels from an arbitrary input element.
The data sets can be obtained by mapping the input data.
// a filter function to determine the data properties we're interested in
let dataPropertiesFilter = (k) => k !== "flight" && k !== "range";
let result = {
// this assumes the first element has all data properties set and subsequent ones share the same properties
labels: Object.keys(input[0]).filter(dataPropertiesFilter),
// transforms each input element into the target format
datasets: input.map(e => {
return {
label: e.flight,
data: Object.keys(e)
.filter(dataPropertiesFilter)
.map(v => e[v])
};
})
};
Here's a codesandbox for demonstration: https://codesandbox.io/s/stack-overflow-q-62406854-vzxnq?file=/src/index.js

Vue.js: Accessing first item in an array not working

I'm trying to subscribe to the first object from the following json array.
"data" : [ {
"registrationNumber" : "1234",
"vehicleMake" : "B.M.W.",
"vehicleModel" : "R1100 S",
"cylinderCapacity" : "1100",
"typeOfFuel" : "Petrol",
"colour" : "Blue",
"dateOfFirstRegistration" : "Wed Feb 18 00:00:00 GMT 2000"
} ]
Here is the vehicle.js which is accessing data fine under the previous json structure, which did not use an array to store the object (only ever going to be single).
export function getVehicleEnquiry({ regNumber }) {
return axios.post(`${API}/VehicleLookup`, {
fieldname: 'registrationNumber',
value: regNumber,
}).then(data => ({
data: {
regNumber: data.registrationNumber,
make: data.vehicleMake,
model: data.vehicleModel,
firstRegistered: data.dateOfFirstRegistration,
capacity: data.cylinderCapacity,
fuelType: data.typeOfFuel,
color: data.colour,
},
}));
}

As your response contains an array now, the object is not directly accessible. With [0] you're referring to the first index of the array, which "contains" the object you're looking for.
Change data to data[0]:
data: {
regNumber: data[0].registrationNumber,
make: data[0].vehicleMake,
model: data[0].vehicleModel,
firstRegistered: data[0].dateOfFirstRegistration,
capacity: data[0].cylinderCapacity,
fuelType: data[0].typeOfFuel,
color: data[0].colour,
},

Basic Timesheet table - Using ajax requests and jquery

Im basically building a very basic timesheet page. I am having problems getting the output onto a basic HTML table. Problem is, I got 2 list of data, one being the parent and the other the child. Child contains the ID of the parent and im having issues finding an easy way to merge the parent/child data together and output them to look something like this:
ID / Description / Start / End / Hours / Night or Day?
------------------------------------------------------------------------------
1 Description1 2016-05-31 10:00 2016-05-31 12:00 2 Day
2016-06-02 14:00 2016-06-02 15:00 1 Day
2016-06-04 19:00 2016-06-04 20:00 1 Night
------------------------------------------------------------------------------
2 Description2 2016-04-06 14:00 2016-04-02 15:00 1 Day
2016-06-02 18:00 2016-06-02 22:00 4 Night
------------------------------------------------------------------------------
3 Description3 2016-05-30 23:00 2016-05-31 00:00 1 Night
------------------------------------------------------------------------------
Etc ...
All these fields are entered manually, and I just want to simply output them on a table to review the entered data.
I got started on an example page to show my progress so far:
https://jsfiddle.net/tj6bcjos/2/
Here is my code so far:
data_array = {};
$.ajax({
url:"Ajax/Path1",
dataType: "json",
cache: false,
success: function (data) {
data.d.results.forEach(function (data) {
data_array[data.ID] = {};
data_array[data.ID][data.description] = {};
});//foreach end
console.log(data_array);
}//sucess end
});
$.ajax({
url:"Ajax/Path2",
dataType: "json",
cache: false,
success: function (data) {
data.d.results.forEach(function (data) {
if (data_array[data.ID] === data.ID_of_parent) { data_array[data.data.ID_of_parent] = {}; }
});//foreach end
console.log(data_array);
}
});
Its with the second Ajax where I cant find a way to look trough the existing array, match the child's ID_of_parent to the parent's ID and merge the data.
Then I hoping to do something like
dara_array.forEach(function (data) {
$("#my_table tbody").append("<tr>"+
"<td>"+data.ID+"</td>"+
"<td>"+data.Description+"</td>"+
"<td>"+data.Start+"</td>"+
"<td>"+data.End+"</td>"+
"<td>"+data.Hours+"</td>"+
"<td>"+data.Night_or_Day+"</td>"+
"</tr>");
});
Would anyone know how to accomplish this?

Here is a complete solution.
var tableMaker = o => {var keys = Object.keys(o[0]),
rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
: "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),rowMaker(keys,"th"));
return "<table>" + rows + "</table>";
},
results1 = [{
ID: "17",
description: "Description 1"
}, {
ID: "22",
description: "Description 2"
}, {
ID: "34",
description: "Description 3"
}, {
ID: "54",
description: "Description 4"
}],
results2 = [{
ID_of_parent: "17",
Day_or_night: "day",
Start: "2016-06-01 08:00",
End: "2016-06-01 10:00",
Hours: "2"
}, {
ID_of_parent: "17",
Day_or_night: "day",
Start: "2016-06-01 13:00",
End: "2016-06-01 14:00",
Hours: "1"
}, {
ID_of_parent: "17",
Day_or_night: "night",
Start: "2016-06-01 21:00",
End: "2016-06-01 22:00",
Hours: "1"
}, {
ID_of_parent: "22",
Day_or_night: "day",
Start: "2016-06-01 09:00",
End: "2016-06-01 10:00",
Hours: "1"
}, {
ID_of_parent: "22",
Day_or_night: "day",
Start: "2016-06-01 14:00",
End: "2016-06-01 15:00",
Hours: "1"
}, {
ID_of_parent: "54",
Day_or_night: "day",
Start: "2016-06-01 13:30",
End: "2016-06-01 16:00",
Hours: "2.5"
}],
desclut = results1.reduce((p,c) => (p[c.ID] || (p[c.ID] = c.description),p),{}),
merged = results2.map(e => (e.Description = desclut[e.ID_of_parent], delete e.ID_of_parent,e)),
myTable = tableMaker(merged);
document.write(myTable);
The tableMaker function is generic and generates a table from array of objects. The object's properties must be the same and they are used for the table headers and each object constructs a row with its values.
desclut is a look up table constructed from results1. By doing this we prevent using array.find() type of expensive searches for each element of the results2 array.
merged is the array we get result1 and result2 merged in the form that we can use with our tableMaker function.
If you want to reorder the properties (table headers) you can use a merged.reduce((p,c) => {sort the properties accordingly here},{}) instruction.

https://jsfiddle.net/tj6bcjos/9/
tested. data1 is the parent, data2 is the children
for each (p in data1.d.results){
var pId = p.ID;
//find the child
var children = data2.d.results.filter(function(d){
return d.ID_of_parent == pId
})
var s=[], e=[], h=[], n=[] //start, end hours...
for each (c in children)
{
s.push(c.Start);
e.push(c.End);
h.push(c.Hours);
n.push(c.Day_or_night);
}
var rw = '<tr><td>'+p.ID+'</td><td>'+p.description+'</td><td>'+
s.join('<br>')+'</td><td>'+e.join('<br>')+'</td><td>'+h.join('<br>')
+'</td><td>'+n.join('<br>')+'</td></tr>'
console.log(rw)
$('#my_table tbody').append(rw);
}

How do I serialize this into JSON?

{
"_id" : ObjectId("4ccb42cb8aad692e01000004"),
"loc" : {
"lat" : 37.799506,
"long" : -122.459445
},
"test_set" : 1,
"title" : "Melissa Mills Housewife 01 SIGNED",
"num_comments" : 58,
"down_votes" : 66,
"up_votes" : 79,
"image_url" : "http://farm2.static.flickr.com/1374/5126544615_79170591e5_m.jpg",
"image_url_thumb" : "http://farm2.static.flickr.com/1374/5126544615_79170591e5_t.jpg",
"date" : "Fri Oct 29 2010 21:55:23 GMT+0000 (UTC)",
"flickr_id" : "5126544615"
}
One of the elements in thelist is above.
thejson = simplejson.dumps({"results":thelist})
However, I can't serialize this because of the date field. It can't serialize datetime.

I doubt that the problem has to do anything with datetime: in your dictionary, there is no datetime object at all, but the "date" key has a regular string value.
More likely, the problem is that it can't serialize the ObjectId class. To overcome this limitation, create a new class inheriting from JSONEncoder, and overriding the default method.

Unless i'm missing something - its the ObjectId that is causing the error (works for me here without it). You might want to consider munging or removing that field if not needed.
The date parses fine.

This works for me. I have removed ObjectId as I do not have the class with me.
result = {
"loc" : {
"lat" : 37.799506,
"long" : -122.459445
},
"test_set" : 1,
"title" : "Melissa Mills Housewife 01 SIGNED",
"num_comments" : 58,
"down_votes" : 66,
"up_votes" : 79,
"image_url" : "http://farm2.static.flickr.com/1374/5126544615_79170591e5_m.jpg",
"image_url_thumb" : "http://farm2.static.flickr.com/1374/5126544615_79170591e5_t.jpg",
"date" : "Fri Oct 29 2010 21:55:23 GMT+0000 (UTC)",
"flickr_id" : "5126544615"
}
import simplejson
thejson = simplejson.dumps(result)
print thejson
Output:
{"down_votes": 66, "loc": {"lat": 37.799506000000001, "long": -122.459445}, "image_url": "http://farm2.static.flickr.com/1374/5126544615_79170591e5_m.jpg", "test_set": 1, "title": "Melissa Mills Housewife 01 SIGNED", "up_votes": 79, "num_comments": 58, "image_url_thumb": "http://farm2.static.flickr.com/1374/5126544615_79170591e5_t.jpg", "date": "Fri Oct 29 2010 21:55:23 GMT+0000 (UTC)", "flickr_id": "5126544615"}
And if you are getting the following error, then you need to have class ObjectId :
"_id" : ObjectId("4ccb42cb8aad692e01000004"),
NameError: name 'ObjectId' is not defined