What is wrong with my object(regarding knockoutjs mapping plugin) - javascript

I'm pulling my hair out with this. I'm not sure what is going on. I've read all the tutorials on mapping but I'm obviously missing something.
{
"address": "110",
"city": "Durham",
"id": 1,
"name": "Keep",
"persistent": true,
"salesRep": "Me",
"state": "NC",
"user": {
"email": "test#test.com",
"id": 4,
"name": "Test",
"password": "test",
"persistent": true
}
}
I've tried
ko.mapping.fromJSON(data);
and
ko.mapping.fromJS(data);
In my old code I ended up doing this.
viewModel.customers(data);
But my JSON looked different. It didn't have a nested object and it also had brackets on the beginning and end making it an array. It seems this would be pretty basic. I'm not getting any errors at all. Thanks for the help.
EDIT
http://jsfiddle.net/gjemN/

In your sample you are dealing with a JavaScript object and not JSON (string representation of it).
So, you would want to call ko.mapping.fromJS. If you are getting back an array of customers, then you could do:
ko.mapping.fromJS(data2, null, viewModel.customers)
Something like: http://jsfiddle.net/rniemeyer/BQe2z/

Related

HTMLized API data

I have a web app that accesses data from an API. I need to pull data out, but it's been 'HTMLized' and I'm unsure how to go about rendering the actual data.
I've tried pulling the data from the array using bracket notation, which gives me the data but it includes the HTML tags.
javascript
{
"id": "5c9cd6576ebf251b944ed16d",
"number": 3451,
"user_id": "5b8425c8e694aa3c6a835b67",
"state": "active",
"subject": "Bower Steel 3D",
"label_ids": [
"5c4b0cf4bbddbd48cd69e68a"
],
"customer_id": "5b51be9ee694aa03f8c834be",
"type": "email",
"reply_to": "xxxxxxx.xxxxxx#xxxxxxx.com",
"reply_cc": "",
"group_id": "5a5f65fed5593070120b9779",
"inbox_id": "5a5f65fed5593070120b9779",
"updated_at": "2019-04-03T12:46:50Z",
"created_at": "2019-03-28T14:12:39Z",
"spam": false,
"trash": false,
"summary": "Great! Glad to hear it.",
"rating": null,
"waiting_since": "2019-04-03T12:21:43Z",
"messages": [
{
"id": "5c9cd6576ebf251b944ed16e",
"type": "reply",
"from_name": "Cxxxxxxx Sxxxxxx",
"body": "<div class=\"5cb74b836ebf2578174d567c\">
<style>cb74b836ebf2578174d567c
p.5cb74b836ebf2578174d567cMsoNormal,
</style>\n\n\n
<div class=\"5cb74b836ebf2578174d567cWordSection1\">\n
<p class=\"5cb74b836ebf2578174d567cMsoNormal\">
Actual content I want to render
</p>
<p class=\"5cb74b836ebf2578174d567cMsoNormal\"></p>\n
<p class=\"5cb74b836ebf2578174d567cMsoNormal\"></p>\n
<p class=\"5cb74b836ebf2578174d567cMsoNormal\"></p>
The content I want to render is embedded like this. It's basically an array within the object, called messages, and it contains a message trail - from the 1st message to the last reply.
I've never come across HTMLized data like this. I can get to the data by using bracket notation, but I don't know how to parse the extraneous tags and get to the data.
Any help would be appreciated.
Short of having the API produce a better endpoint for you to consume, you will have to handle the 'HTMLized' data. In cases like this, I have used something to parse the HTML. For example you could throw the body string into the jQuery constructor.
jQuery(messages[i].body)
That will give you something digestible programmatically to search for your data.

How do I make a basic typeahead search of JSON data using javascript or jQuery?

I have a JSON data file stored locally on my PC. The file is an array of various "name": "value". For instance -
[
{
"name": "Joe",
"id": "0",
"age": "24",
},
{
"name": "Mary",
"id": "1",
"age": "25",
}
]
Now I need to make a typeahead search box for this kind of JSON data using javascript.
The code I wrote is displayed in the image:
Where "dummy" is the name of my locally stored JSON file. The code is not displaying the suggestive data from the JSON file and just gives me an input search box to enter stuff. How do I make it work? Kindly correct me and help.

Annotator.js load annotations from json

I am trying to develop a website in which i need some annotations.
I have found a great js library, annotator.js, but i can't seem to be able to start it.
I am trying to highlight some annotations when the page is loaded, but i can't seem to get it right. I do receive a JS error saying .slice is not a function, but no matter how i change the json object, i cant get it to work.
Can anyone help me understand how it works ? I have been through their documentation but i dont seem to be able to load anything.
THis is what i have so far:
<div id="annon">
Lorem ipsum
</div>
<script>
var annotator = $('#annon').annotator();
annotator.annotator('loadAnnotations',
{"rows":
[{
"quote": "Lorem",
"ranges":
[{
"endOffset": 5,
"startOffset": 0,
"end": "/",
"start": "/"
}],
"text": "Lorem", "id": 1
}],
,"total": 1}
</script>
From what I can tell, the object you are passing in to the annotator is incorrect. You want to pass in an array of annotation objects (format here: http://docs.annotatorjs.org/en/stable/annotation-format.html)
Example:
var annotator = $('#annon').annotator();
annotator.annotator('loadAnnotations', [{
"quote": "Lorem",
"ranges": [{
"endOffset": 5,
"startOffset": 0,
"end": "/",
"start": "/"
}],
"text": "A comment.",
"id": 1
}]);
However when I run this, annotator complains about the XPath you are setting in the start/end ranges. You'll have to figure out how to set the ranges correctly to get the text to highlight properly.
Well, I managed to get the annotated word to light up.
I have done testing in the browser to play around with the structure of the object so that i can correct the RANGE property in particular. This is my solution:
annotator.loadAnnotations([{
"id": "39fc339cf058bd22176771b3e3187329",
"created": "2011-05-24T18:52:08.036814",
"updated": "2011-05-26T12:17:05.012544",
"text": "This is a comment",
"quote": "Lorem",
"ranges":
[{
"start": "/div[1]",
"end": "/div[1]",
"startOffset": 17,
"endOffset": 22
}]
What i am having problems undestanding is why the startOffset is 17 considering LOREM is the first word in the div.
If anyone can explain that, that would be great !
LE
I have identified the problem with 17-22. It was the actual spaces in the div, which my IDE added when i've put them on a new line.

How do I dynamically update a Maps Engine data table with JavaScript?

I have a Maps Engine map with one of the layers linked to a data table containing a single location. I would like to update the data table via JavaScript in Google Sites. The mapsengine.tables.features.batchPatch seems to do what I want, and the help page for the batchInsert version of the same command seems like it could be modified to do what I want. However, I'm having difficulty getting it to work properly. I believe the problem is due to the fact that I don't know what the primary key is for this table or where I can find it (see here for more explanation).
Can anyone here tell me if I'm headed in the right direction, and how I might be able to find this primary key (it also seems to be referred to as a gx_id at times)? Thanks in advance for whatever help you may be able to provide.
Edit: When I go here and get the information on my table, I get the following response:
{
"tables": [
{
"id": {My Table ID},
"etag": "\"6030101253664097613\"",
"projectId": {My Project ID},
"name": "Current Location",
"description": "",
"tags": [
],
"writersCanEditPermissions": false,
"sourceEncoding": "UTF-8",
"processingStatus": "complete",
"bbox": [
-180,
-90,
180,
90
],
"creationTime": "2014-11-11T21:33:43.982Z",
"lastModifiedTime": "2014-11-12T20:55:20.613Z"
}
]
}
As you can see, there is no gx_id listed. Is there some way to add it, or do I need to recreate the table to be able to add it from the start? If I need to recreate the table, what do I need to do to make sure the gx_id is there, since it wasn't immediately apparent when I created the table last time that anything was missing.
Yes, that should work fine. You can find your gx_id simply by fetching a copy of your table and checking the properties. Here's a sample from the docs:
Request:
https://www.googleapis.com/mapsengine/v1/tables/12421761926155747447-06672618218968397709/features?maxResults=500&version=published&key=(YOUR_KEY_HERE)
Response:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
149.23531999999997,
-35.352484
]
},
"properties": {
...
"gx_id": "1" <-- HERE
}
},

Replace a character by a line break

I have a ajax server response
{
"applicationBankList": [
{
"id": "${addressId}",
"accountNumber": "",
"accountName": "",
"paymentMethodCode": "DRDEB",
"name": "BANKOFENGLAND",
"yearsWithBank": "8",
"bankSortCode": "100000",
"monthsWithBank": "8",
"branch": "HeadOffice",
"sortCode": "10-00-00",
"validationInformation": "",
"validationStatus": ""
}
],
"applicationBillingAddress": {
"defaultFlag": "Y"
}
}
I need to make it much human readable by aligning them properly, i have huge set of responses its quite very hard to read them so i am looking for a solution which automatically formats for human readability
is there any solution for this
Just wanting it pretty defeats the purpose of using json. It's meant to be compact, adding spaces, line breaks, and indents, goes against the grain.
If you want to debug or check the structure of it: http://jsonlint.com/
I think making it "human-readable" has to be done on the server-side. What you are getting is the server-response, the way it is sent. Do you have access to the server code that returns the response string?

Categories