Converting XML to JSON and output to HTML with jQuery - javascript

I'm trying to test out an idea I had but using this XML to JSON script:
https://github.com/sergeyt/jQuery-xml2json
But then take the JSON data and then output that into HTML with jQuery.
So far, I've been able to load up the data correctly and I can console.log out the JSON data which turns out to be something like this:
releases:
$: {}
matching_count: "698"
returned_count: "50"
latestModified: "1537876805"
release: Array(50)
0:
$: {}
id: "713"
headline: "Eiger BioPharmaceuticals to Participate in Investor Conferences"
released: "1537876800"
releaseDate: "Tue, 25 Sep 2018 08:00:00 -0400"
modified: "1537876805"
modifiedDate: "Tue, 25 Sep 2018 08:00:05 -0400"
1:
$: {}
id: "712"
headline: "Communications industry innovator to speak at AMEC Global Summit"
released: "1491400800"
releaseDate: "Wed, 05 Apr 2017 10:00:00 -0400"
modified: "1491400806"
modifiedDate: "Wed, 05 Apr 2017 10:00:06 -0400"
...
My JS code that I have so far is this:
var ul = $("<ul>").appendTo("body");
$.ajax({
url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/8689/list.xml",
dataType: "xml",
success: function(response) {
json = $.xml2json(response);
console.log(json);
$(json).each(function(index, headline) {
ul.append($(document.createElement("li")).text(headline));
});
}
});
The issue is that when it renders out, all that comes back is [object Object] in a single li.
So, I know that I'm doing something incorrectly, but I'm not sure where and at what point I need to change over to get the data so I can render out the headline, releaseDate, and so on.
I've created a Codepen here:
https://codepen.io/ultraloveninja/pen/YzPRjRw
I've read that I might need to use jQuery.parseJSON but after testing that a bit, I get some errors since it's still getting in that object.Object again.
I feel that I need to drill down a bit more to get within the releases.release somehow since that's where all the data is at to be rendered out.

The response you try to loop is an object representing the xml document.
To access the releases array you have to use json["#document"].releases.release
var ul = $("<ul>").appendTo("body");
$.ajax({
url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/8689/list.xml",
dataType: "xml",
success: function(response) {
json = $.xml2json(response);
let release = json["#document"].releases.release
$(release).each(function(index, headline) {
ul.append($(document.createElement("li")).text(headline.headline));
});
}
});
Example

Related

How to pass a File JS object to Rails controller

I have a JS file object (like the one below) that I'd like to pass to my rails controller.
File {name: 'undefined', lastModified: 1652457009460, lastModifiedDate: Fri May 13 2022 10:50:09 GMT-0500 (Central Daylight Time), webkitRelativePath: '', size: 582843, …}lastModified: 1652457009460lastModifiedDate: Fri May 13 2022 10:50:09 GMT-0500 (Central Daylight Time) {}name: "undefined"size: 582843type: "image/png"webkitRelativePath: ""[[Prototype]]: FilelastModified: (...)lastModifiedDate: (...)name: (...)webkitRelativePath: (...)constructor: ƒ File()Symbol(Symbol.toStringTag): "File"size: (...)type: (...)get lastModified: ƒ lastModified()get lastModifiedDate: ƒ lastModifiedDate()get name: ƒ name()get webkitRelativePath: ƒ webkitRelativePath()[[Prototype]]: Blob
I'm trying to pass it inside a data object like this:
data: { someData: '', myFile: JSON.stringify(myFile)}
Unfortunately that results in passing an empty object like below:
data: { someData: '', myFile: {}}
If I try to pass it without stringifying it I get:
serialize.js:66 Uncaught TypeError: Illegal invocation
The only way I've been able to do it is via FormData() like:
const formData = new FormData(); formData.append("file", myFile);
However, I cannot use formData in this occasion for other reasons.
Can you provide some guidance on what other ways are there to pass this data?

sending data in correct format from react to node

I have a date object in my state coming from a react-datepicker component.
Sat Aug 28 2021 18:00:00 GMT+0530 (India Standard Time)
On Submit I am trying to pass this to my Node backend
try {
const responseData = await sendRequest('http://localhost:5000/challenge/createChallenge', 'POST',
JSON.stringify({
location: selectedOption,
format: selectedOption1,
date: selectedDate,
opponent: props.initialValues
}),
{
'Content-Type': 'application/json',
Authorization: 'Bearer ' + auth.token
})
Using Stringify, it loses its form. The date loses 5.5 hours and becomes a string.
date: '2021-08-24T12:30:00.000Z'
how do I preserve the original IST format while sending it across? I tried removing the Json.stringify but it keeps erroring me out.
I think if you send a date object to backend as below, your problem will be sorted out
date: new Date(yourDate)
and remove that JSON.stringify.
Not sure if this is the right solution but I passed the data with to.String() and its now getting received accurately in NODE. Thanks.
JSON.stringify({
location: selectedOption,
format: selectedOption1,
date: selectedDate.toString(),
opponent: props.initialValues
}),

Get data from the response

I have a response which is of the below format,
{
"access_token": "eWcWLctGW-_NgGVAmFbO9l-nt3yztFzlZCLLlilI9mGDcM5q8d0kQw0uzvFOoXynHcb-MuPVJGTGkSkBhrr69_-aN1r5j9zB4fCl4u4aqOQ-scNI36xgHeGYpXky60drIBpMI83FGqd9pMjL4GWXjFHq61nhJ6xkGj1u1r9a5u6EJrB1lfjNhljzC_j65xaqxtubQ4AglKFO2ib-levpvnd_bEU-QGQrtvS2QbaXhb_hlnX8czo61Gn_OQyBVk7HbN1SozxIPe3RBvf5AiCAouDMz1WMHy9ybVFy8SnoNIgszjo7Ev2IEWS9aFb87u6bvoJvSVJv7s3z-2GUvG2kwfOk2sUWrmq0QeIJJrYwdKQfs3T8HrK2MNKSGteJ04-O",
"token_type": "bearer",
"expires_in": 1799,
"refresh_token": "f1005c7fd74247069dbdb078ee379410",
"as:client_id": "438dc832-33c7-413b-9c71-d0b98a196e6a",
"userName": "master",
".issued": "Fri, 20 Jan 2017 14:30:09 GMT",
".expires": "Fri, 20 Jan 2017 15:00:09 GMT"
}
I'm not sure how to access .issued , .expires and as:client_id
I'm using angular and passing username, password and company_id and getting the response in the above format.
dataService.getAuthToken($scope.username, $scope.password, $scope.company_password).then(function (response) {
//response data here
});
I can easily get token_type, access_token by just using response.data.access_token but not sure how to access .issued , .expires and as:client_id
You can access every property of an object in JavaScript by the indexer syntax, like if it was a map (because an object is a map in javascript):
var issued = response.data[".issued"];
var expires = response.data[".expires"];
var asClient_id= response.data["as:client_id"];
See this link: http://www.w3schools.com/js/js_objects.asp
Accessing Object Properties
You can access object properties in two ways:
objectName.propertyName
or
objectName["propertyName"]

accessing mongodb's object from mapper (MapReduce)

I have an extra question based on the one I asked before:
calculate frequency using mongodb aggregate framework
so my data in MongoDB looks like this now:
{
"data": {
"interaction": {
"created_at": "Wed, 09 Apr 2014 14:38:16 +0000"
}
},
"_id": {
"$oid": "53455b59edcd5e4e3fdd4ebb"
}
}
before I used to have it like:
[
{
created_at: "2014-03-31T22:30:48.000Z",
id: 450762158586880000,
_id: "5339ec9808eb125965f2eae1"
}
]
so to access created_at I was using mapper like:
var mapper = function () {
if ( this.created_at.getTime() > ( last_date + 10000 ) ) {
...
but as the structure in my database has changed, I tried to change:
this.created_at.getTime()
to:
this.data.interaction.created_at.getTime()
but unfortunately it didn't work out. Thank you for any help
Hate to make this that simple but all you want to do when importing these date strings is this:
new Date("Wed, 09 Apr 2014 14:38:16 +0000")
Which will return a proper date type that you actually should be inserting as part of your data.

Modifying mongoose object literal result does not work [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Why can’t you modify the data returned by a Mongoose Query (ex: findById)
First I am making the query to mongoDB, get all the correct results but only the small modification to object literal does not work. What I am trying to do, is adding new field to comments. I tried to use the DBref method but it didn't work so i make 2 queries now.
var query = Rss.findOne({ _id: itemId});
query.exec(function(err, feed) {
if (!err && feed.comments) {
console.log(feed.comments.length);
for (var index in feed.comments) {
var author = feed.comments[index].author;
if (author !== undefined) {
User.findById(author, function(err, user) {
/**Problem is here **/
feed.comments[index].name = 'Some random field';
console.log('Added new field' + util.inspect(feed));
});
}
}
}
});
Also the response is this without the missing .name field.
Added new field{ _id: 4f34f343c7b0434217000012,
original_link: 'http://com',
publish_date: Fri, 10 Feb 2012 10:36:00 GMT,
summary: 'some text',
title: 'title exampel',
comments:
[ { body: 'well',
author: 4f30265e6f60dc061d000002,
_id: 4f34f3b6f96c58541700000f,
create_date: Fri, 10 Feb 2012 10:38:46 GMT } ],
create_date: Fri, 10 Feb 2012 10:36:51 GMT }
// EDIT more information
Well i haven't found the answer but some how the console.log(feed.comments[index]) returns reference to function. Maybe someone who has more experience with mongoosejs could explain what would be workaround in this situation.
{ [Function] author: 'Some random field' }
You have to tell Mongoose to convert the result into a proper object. Before modifying the feed object simply call:
feed = feed.toObject();
And then you can add all the additional properties you want to it.

Categories