[
{
"productName": "saree",
"productDescription": "bomkai saree",
"productDiscountPrice": 12000,
"imageUrl": "drdrfd",
"productActualPrice": 12400,
"productImages": [
{
"id": 10,
"name": "Screenshot from 2022-09-05 18-27-38.png",
"type": "image/png",
"picByte": "3B0JoYZ1QGDSDBwyYAP0p4AgqrkuCDxrnc4dx3KCk4kHrj3rRbY3EgluN4exFo2KYC4pdyHuuog3KfVIPlDWvoS1uGO8T1nVByTumaZbzz/PYNA7DacA8zbANn4tGqDy2IQ563ZKYGxgkdA1DdNNjFlwzn6k+OO4Hjj27mAqXhcbyvg+SVoaYpDOGcyemBNINSGCd4UOLuvN5fjzXW08cNM95EULIhse4yDHWaFt+Rts6HHWXWgPrusOJ+YfGTI3/A4U7lzwWAyjoAAAAAElFTkSuQmCC"
}
],
"id": 22
}
]
how i can Access picByte from angular UI,
i got response from the api with list of obect inside other object like i mentioned here ,the productImages is a seperate list i need productImages.picByte value to set inside image tag to make a view ,how can i do it? with a for loop or any thing? please help(https://i.stack.imgur.com/x0a6e.png)](https://i.stack.imgur.com/Ib8vA.png),i need to shoe these byte inside my image tag for display the images,
You should be able to easily just loop through the results in your html as so:
<div *ngFor="let data of myObject">
<p>Id: {{data.id}}</p>
<img
*ngFor="let images of data.productImages"
[src]="getImageSrc(images.picByte)"
width="250px"
height="250px"
/>
</div>
Where myObject is your apiResponse. getImageSrc is defined in the component code as:
getImageSrc(image: string) {
return 'data:image/png;base64, ' + image;
}
Related
I was trying to find ways to get an attribute path from a JSON.
However, I only see a path extractor if the path is known and not vice verca.
Here is an example:
I'm looking to get the 'numComments' attribute path from the following JSON (the path is: inpage.header.numComments).
{
"inpage": {
"conversation": {
"completeEmailRegistration": {
"button": "重新寄出确认电邮",
"succesMessage": {
"first": "确认电邮已经寄到",
"second": "请检查你的邮箱。"
},
"text": "请检查您的邮箱以完成账号登记手续。"
},
"loadMoreReplies": "Show More Comments",
"loadMoreReviews": "显示更多评价",
"loadReplies": "显示评论",
"replyTyping": "{{value}}正在回复",
"showAllMessages": "显示所有{{messagesCount}}回复",
"showMoreMessagesErrorMessage": "无法得到更多回复",
"sortMenu": {
"best": "最好",
"newest": "最新",
"oldest": "最旧",
"social": "社交",
"sortBy": "排序方式"
},
"viewReplies": "显示回复",
"newMessagesMobile_0": "{{numOfComments}} 条新评论",
"newMessages_0": "查看 {{numOfComments}} 条新评论",
"showMoreMessagesOnlyNumber_0": "{{messagesCount}} 个回复",
"showMoreMessages_0": "再显示 {{messagesCount}} 个回复",
"showPreviousMessages_0": "显示{{messagesCount}}个以前的回复",
"typingUsers_0": "{{count}} 人在输入"
},
"header": {
"comments": "评论",
"commentsCount": {
"more": "{{messagesCount}}帖子",
"one": "1个帖子"
},
"conversation": "对话",
"explore": "探索",
"starsRating": "评价",
"subheader": {
"communityGuidelines": "社区准则",
"gotIt": "明白了",
"powered-by": "技术支持：",
"text": "阅读我们的"
},
"viewing": "{{viewersCount}} 人正在观看",
"shortNumComments": "({{messagesCount}})",
"shortNumComments_plural": "({{messagesCount}})",
"numComments": "{{messagesCount}}个评论",
"numComments_plural": "{{messagesCount}}个评论",
"numPosts": "{{messagesCount}}个帖子",
"numPosts_plural": "{{messagesCount}}个帖子"
}
}
Any suggestions?
install extension for chrome: JSON Viewer Pro
click to open extension:
click JSON input
copy and paste your json in the window opened
click parse json
click the attribute for which you want its path
icon will appear from where can copy path of the attribute
Note: for this your JSON must be a verified and correct one, i see bunch of {, } inside data values. this may cause and invalid json error.
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);
i have a json file containing array of object such that:
[
{
"id": 1,
"title": "first title",
"description":"first descript",
"image":"/assets/Images/myimage-1.jpg"
},
{
"id": 2,
"title": "second title",
"description":"second descript",
"image":"/assets/Images/second.jpg"
},
]
i have the following function in jsx
export default function myfunc({task}) {
return (
<ul>
{tasks.map(task => <div key={task.id} >{task.title}{task.description}</div> )} ;
{tasks.map(task => <img src={task.image} key={task.id}></img> )}
</ul>
)
}
which when executed parses the text content first then the image content, due to the need for img tag
how can i make it so that it is parsing the image source and text in one go using map? while being able to assign classes to them?
i found a similar question from years ago but that one is unanswered as well. React dynamic mapping image paths from json
Here you go
First, I've created a one js file which map all the image files that I want to use, something like
export default {
"1.png": require("./1.png"),
"2.png": require("./2.png")
};
Then, next step,I've imported the mapping file and change json a bit
import images from "./assets"; // <----- imported
const tasks = [
{
id: 1,
title: "first title",
description: "first descript",
image: "1.png" // <------- changed here
},
{
id: 2,
title: "second title",
description: "second descript",
image: "2.png" // <------- changed here
}
];
Final Step :
{tasks.map(task => (
<img alt="" width="250"
src={images[task.image]} // <----- HERE
key={task.id} />
))}
WORKING DEMO :
I am new in angular5 and I am trying to load json file and repeat it but I can't repeat data
( i can get and show data form jason file but can't repeat data )
in src/assets/data.json
{ "status": "S","messeage": "error","Card":[
{
"ID": "01",
"Price": "30,000",
"Color": "Black"
},
{
"ID": "02",
"Price": "32,000",
"Color": "Red"
}]}
in src/app/app.component.ts
data;
constructor(private http:Http) {
this.http.get('../assets/data.json')
.subscribe(res => this.data = res.json());
}
in src/app/app.component.html
{{data?.Card[0].Color}} // => black
{{data?.Card[0].Price}} // => 30,000
But I need to know how to repeat it.
Sorry for my english
Thank you for help
Edit
last 2 answer it work
but it have error in console
how to fix it ?
thank you so much
enter image description here
Now you get your json .
You can repeat it like this
In js code .
for(i=0;i<data.Card.length;i++){
console.log(data.card[i].Color);
}
In angular5 html template
<li *ngFor="let card of data.Card">
{{ card.Color}}
</li>
You can use *ngFor directive into template to repeate it.
example <div *ngFor="let obj of data.Card">
<div>{{obj.Color}}</div>
<div>{{obj.Price}}</div>
</div>
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();