I have been trying to parse the following JSON data using JSON.Parse(), I only need the url tags inside images not the caption or resizedImageUrls.
{"images": [
{
"url": "https://media.IMG_0001.jpg",
"caption": "Photo1",
"resizedImageUrls": {
"size135x100": "https://media.IMG_0001_135x100.jpg",
"size476x317": "https://media.IMG_0001_476x317.jpg",
"size656x437": "https://media.IMG_0001_656x437.jpg"
}
},
{
"url": "https://media.IMG_0002.jpg",
"caption": "Photo2",
"resizedImageUrls": {
"size135x100": "https://media.IMG_0002_135x100.jpg",
"size476x317": "https://media.IMG_0002_476x317.jpg",
"size656x437": "https://media.IMG_0002_656x437.jpg"
}
},{
"url": "https://media.IMG_0003.jpg",
"caption": "Photo3",
"resizedImageUrls": {
"size135x100": "https://media.IMG_0003_135x100.jpg",
"size476x317": "https://media.IMG_0003_476x317.jpg",
"size656x437": "https://media.IMG_0003_656x437.jpg"
}
}
]}
I declared the above JSON as variable data and then used following code.
var items = JSON.parse(data);
return {
url: items.images;
}
But it returned all the urls, captions and resized image urls. I know another method is to use items.images[0].url. But, sometimes there are lots of image urls and its not feasible to add codes from 0 to n numbers. I thought about using for loop, but, I dont know how.
You can make a map and return urls only.
const items = JSON.parse(data);
const urls = items.images.map(item => item.url);
Related
I am using Postman to run some APIs and get response. There is 1 API where I get the response:
{
"Id": 412,
"properties": {
"instruction01": "RFI100044",
"instruction02": "RFI100107",
"instruction03": "RFI100127",
}
}
What I want:
Get values from all the attributes containing text "instruction" and put it in a list (which I will use later) OR
To get all the values(instruction01,instruction02..) from "properties" attribute and put it in a list and access from the list then.
How can I achieve this?
You can try
const res = pm.response.json();
let keys = Object.keys(res.properties);
let values = [];
keys.forEach((element) => {
values.push(res.properties[element]);
});
console.log(values);
//["RFI100044", "RFI100107", "RFI100127"]
I've been wondering for some days what kind of scheme would be more appropriate to use a data list in json in a web application.
I'm developing a REST Web Application, and im using Angular for front end, i should order, filter and print these data list also in xml ...
For you what scheme is better and why?
1) {
"datas": [
{ "first":"","second":""},
{ "first":"","second":""},
{ "first":"","second":""}
]
}
2) {
"datas": [{
"data": { "first":"","second":""},
"data": { "first":"","second":""},
"data": { "first":"","second":""}
}]
}
3) [
{ "first":"","second":""},
{ "first":"","second":""},
{ "first":"","second":""}
]
Thanks so much.
The first and third notations are quite similar because the third notation is included in your first.
So the question is "Should I return my datas as an array or should I return an object with a property that contain the array ?
It will depend on either you want to have more information alongside your datas or not.
For exemple, if your API might return an error, you will want to manage it from the front end.
In case of error, the JSON will looks like this :
{
"datas": null,
"error": "An error occured because of some reasons..."
}
At the opposite, if everything goes well and your API actually return the results, it will looks like this :
{
"datas": [
{ "first":"","second":""},
{ "first":"","second":""},
{ "first":"","second":""}
],
"error": null
}
Then your front end can use the error property to manage errors sent from the API.
var result = getDatas(); // Load datas from the API
if(result.error){
// Handle the error, display a message to the user, ...
} else {
doSomething(result.datas); // Use your datas
}
If you don't need to have extra properties like error then you can stick with the third schema.
The second notation is invalid. The datas array will contain only one object which will have one property named data. In this case data is a property that is defined multiple times so the object in the array will contain only the last occurence:
var result = {
"datas": [{
"data": { "first":"a","second":"b"},
"data": { "first":"c","second":"d"},
"data": { "first":"e","second":"f"}
}]
}
console.log("Content of result.datas[0].data : ")
console.log(result.datas[0].data)
Obviously the first option would be easy to use. Once you will access datas it'll give you an array. Any operation (filter, sort, print) on that array will be easy in comparison to anything else. Everywhere you just need to pass datas not datas.data.
I'm building a bubble chart in d3 and I'd like the color of the bubbles to be based off of logFC values I have in a local json file.
My json file looks like this:
{
"name": "genes",
"children": [
{
"value": "9.57E-06",
"logFC": "-5.51658163",
"symbol": "BCHE",
},
{
"value": "0.0227",
"logFC": "3.17853632",
"symbol": "GRIA2",
},
{
"value": "0.00212",
"logFC": "-2.8868275",
"symbol": "GRIN2A",
}
]
}
The file is not flat which is why I think I'm having trouble referencing the leaf nodes with d3.extent. I know I could use:
var color1 = d3.scale.linear()
.domain([-5.51658163,3.17853632]) //manually putting in min/max into the domain
.range(["lightgreen", "green"]);
But my data will change, and to make the code dynamic - I've tried the following along with many other variations:
var color1 = d3.scale.linear()
.domain([d3.extent(d3.values(data, function(data) { return +d.logFC;}))])
.range(["lightgreen", "green"]);
Basically, Im having trouble using d3.extent on leaf nodes. Is there a simple way to find the min and max values using d3.extent to find the min and max values of logFC?
Thank you!
(PS if there are any problems with parenthesis it was a mistake I made when copying my data into the question box)
When I look in the console editor, I see:
d3.extent accepts an array of values and return the bounds as an array. So I guess your code should be more like:
.domain(d3.extent(d3.values(data, function(data) {
return +d.logFC;
})))
(no square brackets)
Not 100% sure, because I don't know what the data variable is in your example.
Update:
If the data variable is the loaded JSON object, do the following:
.domain(d3.extent(data.children.map(function(child) {
return +child.logFC;
})))
I am trying to get an image ID of the Umbraco's Image Cropper property in order to use it with TypedMedia(id).GetResponsiveCropUrl() method.
I am struggling to extract only the ID. My current implementation item.GetProperty("mainImage").Value.ToString() returns JSON object consisting of additional Image Cropper data such as focal point:
{ "focalPoint": { "left": 0.71111111111111114, "top": 0.57 }, "src": "/media/1004/9910_03_7326-river-flood_web.jpg", "crops": [ { "alias": "Carousel", "width": 700, "height": 400 } ] }1156
What would be the best approach for retrieving the image ID?
This is my implementation:
foreach (Node item in Node.GetCurrent().GetDescendantNodes())
{
if (item.GetProperty<bool>("showInNewsCarousel") == true)
{
Response.Write(item.GetProperty("mainImage").Value.ToString());
// var slideImage = Umbraco.Media(item.GetProperty("mainImage").Value);
<img class="img-responsive" src="#Umbraco.TypedMedia(1155).GetResponsiveCropUrl("Carousel")" />
}
}
The 1156 value that you said in the comments was the image ID is not actually part of the JSON, but appears to have been tacked on later. (If you try to validate the string at JSONLint.com, you'll see what I mean.) Since the ID is not part of the JSON, you will not be able to use a JSON parser to get the value. I think your best bet is just to find the last closing brace and then take everything after that.
string id = json.Substring(json.LastIndexOf('}') + 1).Trim();
In my project I got a JSON response via GET request. The subTopics will be selected by the user and stored. Afterwards I send a POST request to the server with the selected ids.
Example JSON1: (from GET request)
{
"TopicList" :
[{
"id": "1234",
"name": "topic1",
"number": "1",
"subTopics": [
{
"id": "4567",
"name": "subTopic1.1",
"number": "1.1"
},
{
"id": "9876",
"name": "subTopic1.2",
"number": :1.2"
}
]
}]
}
In the POST response I get another JSON object from the server, which I have to show in my HTML view as a table. In the response JSON I have the subTopics id (selected by the user) but I do not have the subTopic name associated with the id.
I have to show the subTopic name in my table which is available in a separate object(see above JSON file). I don't know how to access the first JSON object while working with another.
My table view looks like this,
<tr ng-repeat-start="tableRow in searchCtrl.tableViewData" ng-click="tableRow.expanded = !tableRow.expanded">
<td>{{tableRow.project.name}}</td>
<td>{{tableRow.project.number}}</td>
<td>{{tableRow.project.endDate | date}}</td>
<td>{{tableRow.topicIds[0]}}</td>
<td>{{tableRow.matching.score}}</td>
</tr>
As you can see the 4th row: <td>{{tableRow.topicIds[0]}}</td> shows the id. How can I show the topicName?
Any help would be appreciable.
EDIT
In my controller this variable contains the above JSON object.
if (!self.topic) {
searchService.getTopic().then(
function (response) {
self.topic = response.data;
},
function (error) {
alert("Server is not found");
}
);
}
So, the topic variable contains the response JSON object. Maybe it will help.
You can create a function that takes an id and returns the subTopic.
$scope.getSubTopic = function(id) {
var selectedSubTopic = {};
angular.forEach(subTopics, function(subTopic) {
// loop through subTopics until a matching id is found
if (subTopic.id === id) {
selectedSubTopic = subTopic;
return;
}
});
return selectedSubTopic;
};
then you can update your fourth row to:
<td>{{getSubTopic(tableRow.topicIds[0]).name}}</td>
This assumes you have an array named subTopics.
Edit
As mentioned in my comment this will end up performing pretty slow for heavy pages and/or large datasets. You will likely want to generate a map object for the subTopics for quick access. The downside being you have to generate this each time the TopicList is modified.
function generateSubTopicMap(topics) {
var map = {};
angular.forEach(topics, function(topic) {
angular.forEach(topic.subTopics, function(subTopic) {
// use this if you want the map to reference the same data
// (i.e. updating subTopic.name will update the map at the same time)
map[subTopic.id] = subTopic;
// use this if you don't want the map to reference the same data
// map[subTopic.id] = {};
// angular.copy(subTopic, map[subTopic.id]);
// you can also add the parent id here if you need access to it
// this will modify the original object if you use the first method!
// map[subTopic.id].parentId = topic.id
});
});
return map;
}
The output looks like:
{
"4567": {
"id": "4567",
"name": "subTopic1.1",
"number": "1.1"
},
"9876": {
"id": "9876",
"name": "subTopic1.2",
"number": :1.2"
}
}
With this you would call it after every GET request and pass it the array of topics.
// where topics is the response from the GET request
$scope.subTopics = generateSubTopicMap(topics);
And finally to display you just need:
<td>{{subTopics[tableRow.topicIds[0])].name}}</td>
Edit 2
Here is a jsfiddle showing how to use the second method. All you have to do is pass the array containing your TopicList to generateSubTopicMap and it returns an object with the keys as subTopic ids and the value as the subTopic itself.
I wouldn't worry about my first solution. It isn't going to be performant inside an ng-repeat or grabbing 2nd level objects.