I am retrieving records from mongodb .find() and trying to nest them with d3v4 .stratify(). Unfortunately, I'm getting the error
Error: ambiguous: Product Line 1
I'm presuming I'm misunderstanding the API documentation.
While the problem seems close to this post, I don't think it's quite the same. However, the result I'm trying to get to IS something like this.
Can someone help me understand how to use .stratify() properly? Or suggest an easier way to do this?
My result set (mongodb_data) is not large (maybe ~2500 products).
My flat mongodb_data looks like this,
[
{
"name": "Product Line 1",
"reference": "product 1.A identifier"
},
{
"name": "Product Line 1",
"reference": "product 1.B identifier"
},
{
"name": "Product Line 2",
"reference": "product 2.A identifier"
},
{
"name": "Product Line 2",
"reference": "product 2.B identifier"
}
];
The desired hierarchical/nested data needs to look like this,
{
"name": "Master Product Catalog",
"children": [
{
"name": "Product Line 1",
"children": [
{ "name": "product 1.A identifier" },
{ "name": "product 1.B identifier" }
]
},
{ "name": "Product Line 2",
"children": [
{ "name": "product 2.A identifier" },
{ "name": "product 2.B identifier" }
]
}
]
}
I have been using the example from the API documentation as follows,
var stratdata = d3.stratify()
.id(function(d) { return d.name; })
.parentId(function(d) { return d.name; })
(mongodb_data);
Your flat data doesn't represent a hierarchical structure. It doesn't answer the question who does "Product Line 1" or "Product Line 2" parent to? Also, your name property doesn't hold both the parent and the child information (reference is the parent, name is the child). Your data before d3.stratify() should look like this:
[{
"reference": "Master Product Catalog",
"name": "" //<-- has no parent
}, {
"reference": "Product Line 1",
"name": "Master Product Catalog" //<-- parent is master
}, {
"reference": "Product Line 2",
"name": "Master Product Catalog"
}, {
"name": "Product Line 1",
"reference": "product 1.A identifier"
}, {
"name": "Product Line 1",
"reference": "product 1.B identifier"
}, {
"name": "Product Line 2",
"reference": "product 2.A identifier"
}, {
"name": "Product Line 2",
"reference": "product 2.B identifier"
}];
Running code:
<!DOCTYPE html>
<html>
<head>
<script data-require="d3#4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var json = [{
"reference": "Master Product Catalog",
"name": ""
}, {
"reference": "Product Line 1",
"name": "Master Product Catalog"
}, {
"reference": "Product Line 2",
"name": "Master Product Catalog"
}, {
"name": "Product Line 1",
"reference": "product 1.A identifier"
}, {
"name": "Product Line 1",
"reference": "product 1.B identifier"
}, {
"name": "Product Line 2",
"reference": "product 2.A identifier"
}, {
"name": "Product Line 2",
"reference": "product 2.B identifier"
}];
var root = d3.stratify()
.id(function(d) {
return d.reference;
})
.parentId(function(d) {
return d.name;
})
(json);
console.log(root)
</script>
</body>
</html>
Related
I have this JSON which I'm parsing using NodeJS and it needs to be restructured into the second JSON which I've added below.
In the first JSON, the rows object has two pages objects (any number of pages objects can be present) which contains all the same keys and values with the exception of values and display keys.
{
"pages": [
{
"label": "SomeLabel",
"name": "Some",
"sections": [
{
"type": "Repeat",
"label": "Label 1",
"name": "Name 1",
"rows": [
{
"pages": [
{
"label": "Label 1",
"name": "Name 1",
"sections": [
{
"type": "Flow",
"label": "Label 2",
"name": "Name 2",
"answers": [
{
"label": "Question Label",
"question": "Question",
"values": [
"Value A"
],
"valuesMetadata": [
{
"display": "Display A",
"row": {
"columns": []
}
}
]
}
]
}
]
}
]
},
{
"pages": [
{
"label": "Label 1",
"name": "Name 1",
"sections": [
{
"type": "Flow",
"label": "Label 2",
"name": "Name 2",
"answers": [
{
"label": "Question Label",
"question": "Question",
"values": [
"Value B"
],
"valuesMetadata": [
{
"display": "Display B",
"row": {
"columns": []
}
}
]
}
]
}
]
}
]
}
],
"footer": null
}
]
}
]
}
In the second JSON the rows object has a single pages object, inside of which the values and display keys have multiple values (the non-common values).
{
"pages": [
{
"label": "SomeLabel",
"name": "Some",
"sections": [
{
"type": "Repeat",
"label": "Label 1",
"name": "Name 1",
"rows": [
{
"pages": [
{
"label": "Label 1",
"name": "Name 1",
"sections": [
{
"type": "Flow",
"label": "Label 2",
"name": "Name 2",
"answers": [
{
"label": "Question Label",
"question": "Question",
"values": [
"Value A",
"Value B"
],
"valuesMetadata": [
{
"display": [
"Display A",
"Display B"
],
"row": {
"columns": []
}
}
]
}
]
}
]
}
]
}
],
"footer": null
}
]
}
]
}
So, I want to know the fast and easy steps to do this. Please let me know the process and methods to solve this.
Thanks
If I understand you correctly, you want to combine all pages in a single page that holds all information.
This can be achieved using the Array.reduce function. reduce takes an array and combines all elements to a single value using a function (provided by you) to combine the first two elements until only one is left (i.e. 1 * 2 => new1; new1 * 3 => new2 where * represents your function).
Your problem would look something like this:
rows[0].pages = rows[0].pages.reduce((currentElement, currentState) => {
if (!currentState) { // first iteration return first element but make sure display is an array
currentElement.sections[0].answers[0].valuesMetadata[0].display =
[currentElement.sections[0].answers[0].valuesMetadata[0].display];
return currentElement;
}
// add values of current element to arrays in current state
currentState.sections[0].answers[0].values
.concat(currentElement.sections[0].answers[0].values);
currentState.sections[0].answers[0].valuesMetadata[0].display
.concat(currentElement.sections[0].answers[0].valuesMetadata[0].display);
return currentState;
});
currentElement is the object of the array that is currently reduced, currentState is the intermediate result of the reduction.
PS:
The object looks like you are way too many arrays where you would not need them. The given code snippet works only for the first element in each array (hence the [0]s. If you really do have multiple values in each array you would have to iterate over all of those accordingly.
I am trying to insert/update data with the javascript elasticsearch client, but I am getting the error:
{
"error": {
"root_cause": [
{
"type": "illegal_argument_exception",
"reason": "Malformed action/metadata line [1], expected a simple value for field [_data] but found [START_OBJECT]"
}
],
"type": "illegal_argument_exception",
"reason": "Malformed action/metadata line [1], expected a simple value for field [_data] but found [START_OBJECT]"
},
"status": 400
}
This is the data that is being sent
esclient.bulk({
body: [
{
"index":
{
"_index":"myindex",
"_type":"movie",
"_id":"1IEAEHNOIORANIT4SEOASNIE3HAETN2E...",
"_data":
{
"title":"Title 2",
"description":"This should be updated with this new data.",
"score":1,
"suggest_title":"Title 2",
"img":"http://url.to.image/img.jpeg",
"genres":["Comedy"],
"release":"2015-01-07T23:00:00.000Z",
"language":"EN",
"provider":
{
"id":"InstaFilmFlixify",
"url":"http://www.InstaFilmFlixify.com/play?id=238412"
}
}
}
}
]
})
It appears as this code generates the following request to ES:
-> POST http://docker.me:9200/_bulk
{
"index": {
"_index": "myindex",
"_type": "movie",
"_id": "1IEAEHNOIORANIT4SEOASNIE3HAETN2E...",
"_data": {
"title": "Title 2",
"description": "This should be updated with this new.",
"score": 1,
"suggest_title": "Title 2",
"img": "http://url.to.image/img.jpeg",
"genres": [
"Comedy"
],
"release": "2015-01-07T23:00:00.000Z",
"language": "EN",
"provider": {
"id": "InstaFilmFlixify",
"url": "http://www.InstaFilmFlixify.com/play?id=238412"
}
}
}
}
What am I doing wrong? What is happening? Can this possibly be a bug in ES / the ES adapter.
Elasticsearch version 2.1
I haven't seen the "_data" parameter before. Where did you get the idea to use that?
Take a look at the docs for the js client.
Anyway, this should work for you:
esclient.bulk({
body: [
{
"index":
{
"_index":"myindex",
"_type":"movie",
"_id":"1IEAEHNOIORANIT4SEOASNIE3HAETN2E...",
}
},
{
"title":"Title 2",
"description":"This should be updated with this new data.",
"score":1,
"suggest_title":"Title 2",
"img":"http://url.to.image/img.jpeg",
"genres":["Comedy"],
"release":"2015-01-07T23:00:00.000Z",
"language":"EN",
"provider":
{
"id":"InstaFilmFlixify",
"url":"http://www.InstaFilmFlixify.com/play?id=238412"
}
}
]
})
I asked this question here:
Working With Dynamic Multidimensional key-value pairs in JSON
But it's become a bit more involved and I can't get where I'm going from that answer. If I have a data object that looks like this:
{
"email": "user#someco.com",
"firstname": "Bob",
"lastname": "Smith",
"company": "ACME",
"custom": {
"services": [
{
"name": "svc1",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc2",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc3",
"desc": "abcdefg",
"selected": "false",
"status": "None"
},
{
"name": "svc4",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
],
"fields": [
{
"name": "Products",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Product1",
"desc": "abcdef"
},
{
"name": "Product2",
"desc": "abcdef"
}
],
"services": [
"svc1",
"svc2",
"svc3"
]
},
{
"name": "Wines",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Wine 1",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
},
{
"name": "Fruits",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Fruit 1",
"desc": "abcdef"
},
{
"name": "Fruit 2",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
}
]
}
};
How can I convert that into an Angular menu? The menu would need to list all of the services, and then if the service has an associated item in "fields" that item should be listed underneath it. So for instance "svc1" and its description should be listed on a line (got that working) but then "Product1" and "Product2" with their descriptions should appear on the next two lines because you can see that "svc1" is listed in the "services" field for "Products." Similarly, "svc4" should appear on a line, and then "Wines" and its description on the next line because "svc4" appears in the "services" field of "Wines."
I think the best way is to unpack and re-pack this JSON object in sequential order in the Angular controller and then push this data out to the Angular view but there might be a solution using only the logic available from the view. I've tried a bunch of nested fors and ifs along these lines (very much not working):
var i, j;
var listArray = [];
for (i = 0; i < $scope.svcs.length; i++) {
var littleArray = [$scope.svcs[i].status, $scope.svcs[i].name, $scope.svcs.desc];
listArray.push[littleArray1];
for (j=0; j < $scope.jFA.length; j++) {
if ($scope.jFA[j] == $scope.svcs[i].name) {
if ($scope.jFA[j] == $scope.svcs[i].fields)
littleArray = [$scope.jFA[j].fields] //...etc
}
}
...but that logic just keeps getting more and more dense and isn't working no matter now I try to use it. I liked the simplicity in the answer to the other question but have not had success in replicating it.
So if someone can help me figure out how to get the data into the right sequence using JS I can handle the Angular part. Or if you're an Angular whiz and have an answer along those lines, even better.
So it was a little hard understanding your question, but I gave it my best shot. Does this fiddle show what you are trying to achieve? http://jsfiddle.net/arknr6qz/1/
JS:
var app = angular.module('TestApp',[]);
app.controller('TestController', function($scope)
{
$scope.checkService = function(service, fieldServices)
{
if (fieldServices.indexOf(service) != -1) return true;
return false;
};
$scope.data = {
"email": "user#someco.com",
"firstname": "Bob",
"lastname": "Smith",
"company": "ACME",
"custom": {
"services": [
{
"name": "svc1",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc2",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc3",
"desc": "abcdefg",
"selected": "false",
"status": "None"
},
{
"name": "svc4",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
],
"fields": [
{
"name": "Products",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Product1",
"desc": "abcdef"
},
{
"name": "Product2",
"desc": "abcdef"
}
],
"services": [
"svc1",
"svc2",
"svc3"
]
},
{
"name": "Wines",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Wine 1",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
},
{
"name": "Fruits",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Fruit 1",
"desc": "abcdef"
},
{
"name": "Fruit 2",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
}
]
}
};
});
HTML:
<div ng-app="TestApp">
<div ng-controller="TestController">
<div ng-repeat="service in data.custom.services">
{{ service.name }}
<div class="indent" ng-repeat="fields in data.custom.fields">
<span ng-if="checkService(service.name, fields.services)">
{{fields.services.values}}
<span ng-repeat="value in fields.values">
{{value.name}} - {{value.desc}}<br>
</span>
</span>
</div>
</div>
</div>
</div>
and finally css:
.indent {
margin-left:10px;
}
I am have some trouble with a script I am working on. I have been provided with an object with multiple items from a product catalog.
What I am trying to do is to write a function which to which will allow me to render this data easily.
<script type="application/javascript">
SKUinfo =
{
"s238554": {
"Age": {
"Description": "Age 18+",
"Thumbnail": "/productImages/assets/img/icon18.gif"
},
"Barcode": {
"Barcode": "50622132430794"
},
"Currency": "£",
"Description": "Description goes here",
"Id": 44305,
"Packshots": [
"/productImages/238556/1min.jpg",
"/productImages/238556/2med.jpg",
"/productImages/238556/3max.jpg"
],
"Pegis": [],
"Platform": {
"Button": "Xbox 360",
"ID": 0
},
"Publisher": {
"Description": null
},
"Release": "/Date(1392940800000+0000)/",
"Screenshots": [
{
"ScreenshotMax": "/productImages/238556/5scrmax1.jpg",
"ScreenshotMin": "/productImages/238556/4scrmin1.jpg"
}
],
"Title": "Product title 2 goes here",
"Variants": [
{
"Id": 58242,
"MaxOrderQuantity": 3,
"Presellable": true,
"Price": 29.97,
"PriceCultureFormat": "29.97",
"PriceWithCurrencyFormat": "£29.97",
"Sku": 238556,
"Type": {
"Description": "New"
}
},
],
"Vendor": {
"Description": ""
},
},
"s238556": {
"Age": {
"Description": "Age 18+",
"Thumbnail": "/productImages/assets/img/pegi/icon18.gif"
},
"Barcode": {
"Barcode": "5060134530794"
},
"Currency": "£",
"Description": "Description here",
"Id": 654654,
"Packshots": [
"/productImages/238556/1min.jpg",
"/productImages/238556/2med.jpg",
"/productImages/238556/3max.jpg"
],
"Pegis": [],
"Platform": {
"Button": "PlayStation 3",
"ID": 0
},
"Publisher": {
"Description": null
},
"Release": "/Date(1392940800000+0000)/",
"Screenshots": [
{
"ScreenshotMax": "/productImages/238556/5scrmax1.jpg",
"ScreenshotMin": "/productImages/238556/4scrmin1.jpg"
},
{
"ScreenshotMax": "/productImages/238556/7scrmax2.jpg",
"ScreenshotMin": "/productImages/238556/6scrmin2.jpg"
},
],
"Title": "Product title 2 goes here",
"Variants": [
{
"Id": 58242,
"MaxOrderQuantity": 3,
"Presellable": true,
"Price": 29.97,
"PriceCultureFormat": "29.97",
"PriceWithCurrencyFormat": "£29.97",
"Sku": 238556,
"Type": {
"Description": "New"
}
},
],
"Vendor": {
"Description": ""
},
"VideoHTML": "html here",
"status": {
"Response": "product found",
"Success": true
}
}
}
</script>
The above example is the output I get for two products.
If I try to get access to this data this is where I have a problem
<script type="application/javascript">
function getSKU(s)
{
console.log(SKUinfo.s.Title);
}
getSKU(s238554);
</script>
I imagine this is being caused when I am passing the argument s back to the function getSKU a the node selection in the data object. In this I would expect the console output to be the Title from SKU s238554.
What I get however, is: Uncaught ReferenceError: s238554 is not defined
I would appreciate any guidance that can be offered as I am a javascript novice.
Access your property by used[] on SKUinfo.s.Title like SKUinfo[s].Title
And also pass your property name within the quotes 's238554' as it's not variable.
Something like this.
function getSKU(s){
console.log(SKUinfo[s].Title);
}
getSKU('s238554'); // s238554 within quotes.
I want to generate a treeview from a json, but I need to fill. “attr or .date” in the nodes of treeview
how to do?
data = [{
"text": "Item 1",
"attr": {
"id": 12145646541 "class": "folder"
}
}, {
"text": "Item 2",
"nodes": [{
"text": "Item 2.1"
}, {
"text": "Item 2.2"
}, {
"text": "Item 2.3"
}]
}, {
"text": "Item 3"
}, {
"text": "Item 4"
}]
$("#ul_menu").wijtree({
nodes: data
});
<ul id="ul_menu"></ul>
Kindly take a look at this blog article which explains about binding a wijtree to an external datasource as an json object:
http://wijmo.com/populate-wijtree-from-external-data-source-using-knockout/