How to flatten React state of comment section? - javascript

This is my data:
{
"currentUser": {
"image": {
"png": "/src/assets/images/avatars/image-juliusomo.png",
"webp": "/src/assets/images/avatars/image-juliusomo.webp"
},
"username": "juliusomo"
},
"comments": [
{
"id": 1,
"content": "Impressive! Though it seems the drag feature could be improved. But overall it looks incredible. You've nailed the design and the responsiveness at various breakpoints works really well.",
"createdAt": "1 month ago",
"score": 12,
"user": {
"image": {
"png": "/src/assets/images/avatars/image-amyrobson.png",
"webp": "/src/assets/images/avatars/image-amyrobson.webp"
},
"username": "amyrobson"
},
"replies": []
},
{
"id": 2,
"content": "Woah, your project looks awesome! How long have you been coding for? I'm still new, but think I want to dive into React as well soon. Perhaps you can give me an insight on where I can learn React? Thanks!",
"createdAt": "2 weeks ago",
"score": 5,
"user": {
"image": {
"png": "/src/assets/images/avatars/image-maxblagun.png",
"webp": "/src/assets/images/avatars/image-maxblagun.webp"
},
"username": "maxblagun"
},
"replies": [
{
"id": 3,
"content": "If you're still new, I'd recommend focusing on the fundamentals of HTML, CSS, and JS before considering React. It's very tempting to jump ahead but lay a solid foundation first.",
"createdAt": "1 week ago",
"score": 4,
"replyingTo": "maxblagun",
"user": {
"image": {
"png": "/src/assets/images/avatars/image-ramsesmiron.png",
"webp": "/src/assets/images/avatars/image-ramsesmiron.webp"
},
"username": "ramsesmiron"
}
},
{
"id": 4,
"content": "I couldn't agree more with this. Everything moves so fast and it always seems like everyone knows the newest library/framework. But the fundamentals are what stay constant.",
"createdAt": "2 days ago",
"score": 2,
"replyingTo": "ramsesmiron",
"user": {
"image": {
"png": "/src/assets/images/avatars/image-juliusomo.png",
"webp": "/src/assets/images/avatars/image-juliusomo.webp"
},
"username": "juliusomo"
}
}
]
}
]
}
and this is how i'd want it to look like, each comment to store the replies id's
{
"currentUser": {
"image": {
"png": "/src/assets/images/avatars/image-juliusomo.png",
"webp": "/src/assets/images/avatars/image-juliusomo.webp"
},
"username": "juliusomo"
},
"comments": [
{
"id": 1,
"content": "Impressive! Though it seems the drag feature could be improved. But overall it looks incredible. You've nailed the design and the responsiveness at various breakpoints works really well.",
"createdAt": "1 month ago",
"score": 12,
"user": {
"image": {
"png": "/src/assets/images/avatars/image-amyrobson.png",
"webp": "/src/assets/images/avatars/image-amyrobson.webp"
},
"username": "amyrobson"
},
"replies": []
},
{
"id": 2,
"content": "Woah, your project looks awesome! How long have you been coding for? I'm still new, but think I want to dive into React as well soon. Perhaps you can give me an insight on where I can learn React? Thanks!",
"createdAt": "2 weeks ago",
"score": 5,
"user": {
"image": {
"png": "/src/assets/images/avatars/image-maxblagun.png",
"webp": "/src/assets/images/avatars/image-maxblagun.webp"
},
"username": "maxblagun"
},
"replies": [ 3, 4 ]
},
{
"id": 3,
"content": "If you're still new, I'd recommend focusing on the fundamentals of HTML, CSS, and JS before considering React. It's very tempting to jump ahead but lay a solid foundation first.",
"createdAt": "1 week ago",
"score": 4,
"replyingTo": "maxblagun",
"user": {
"image": {
"png": "/src/assets/images/avatars/image-ramsesmiron.png",
"webp": "/src/assets/images/avatars/image-ramsesmiron.webp"
},
"username": "ramsesmiron"
}
},
{
"id": 4,
"content": "I couldn't agree more with this. Everything moves so fast and it always seems like everyone knows the newest library/framework. But the fundamentals are what stay constant.",
"createdAt": "2 days ago",
"score": 2,
"replyingTo": "ramsesmiron",
"user": {
"image": {
"png": "/src/assets/images/avatars/image-juliusomo.png",
"webp": "/src/assets/images/avatars/image-juliusomo.webp"
},
"username": "juliusomo"
}
}
]
}
So far I've used the data as it was, and I had a hard time setting the state later, and after reading the react docs (https://beta.reactjs.org/learn/choosing-the-state-structure#avoid-deeply-nested-state) I understood why it was so hard to manage. But the docs don't have any methods on how to flatten it

While for huge lists this is really not advisable, you can still do something like this
const replies = [];
// commentData is your incoming data
const data = {...commentData,
comments: commentData.comments.map(comment => {
if(comment.replies.length) {
comment.replies = comment.replies.map(reply => {
replies.push(reply);
return reply.id;
})
}
return comment;
})
};
data.comments = data.comments.concat(replies);
Remember that this is not very flexible in cases where replies might again have comments/replies ( nested objects )
JS Fiddle - https://jsfiddle.net/7d61jsm3/

Related

TypeORM Select Column from relation without using QueryBuilder

If anyway to select columns from relation without using querybuilder ???
This is my current query:
const areas = await this.areaRepository.find({
where: { ...isActive },
relations: ["division"],
});
Output :
{
"id": 1,
"version": 9,
"isActive": 1,
"createdBy": null,
"updatedBy": 1,
"createAt": "2022-04-18T15:42:12.000Z",
"updatedAt": "2022-09-23T11:04:53.000Z",
"name": "Dhaka",
"division": {
"id": 3,
"version": 1,
"isActive": 1,
"createdBy": null,
"updatedBy": null,
"createAt": "2022-04-18T15:42:00.000Z",
"updatedAt": "2022-04-18T15:42:00.000Z",
"name": "Dhaka"
}
},
But is there anything like:
const areas = await this.areaRepository.find({
select: ['id','division.id division_id']
where: { ...isActive },
relations: ["division"],
});
And the output will be:
{
"id": 1,
"division_id": 3
}
This is a duplicated question of: How to select fields from joined table using TypeORM repository?
You can check the answer here. Also this depends on which TypeOrm version you are currently using, as far as I know on version under 0.3 this doesn't work.

Accessing nested JSON object with JavaScript [duplicate]

This question already has answers here:
How can I access and process nested objects, arrays, or JSON?
(31 answers)
Closed 4 months ago.
I am trying to access a nested JSON object and display it within the console.
Here is my JSON
{
"currentUser": {
"image": {
"png": "./images/avatars/image-juliusomo.png",
"webp": "./images/avatars/image-juliusomo.webp"
},
"username": "juliusomo"
},
"comments": [
{
"id": 1,
"content": "Impressive! Though it seems the drag feature could be improved. But overall it looks incredible. You've nailed the design and the responsiveness at various breakpoints works really well.",
"createdAt": "1 month ago",
"score": 12,
"user": {
"image": {
"png": "./images/avatars/image-amyrobson.png",
"webp": "./images/avatars/image-amyrobson.webp"
},
"username": "amyrobson"
},
"replies": []
},
{
"id": 2,
"content": "Woah, your project looks awesome! How long have you been coding for? I'm still new, but think I want to dive into React as well soon. Perhaps you can give me an insight on where I can learn React? Thanks!",
"createdAt": "2 weeks ago",
"score": 5,
"user": {
"image": {
"png": "./images/avatars/image-maxblagun.png",
"webp": "./images/avatars/image-maxblagun.webp"
},
"username": "maxblagun"
},
"replies": [
{
"id": 3,
"content": "If you're still new, I'd recommend focusing on the fundamentals of HTML, CSS, and JS before considering React. It's very tempting to jump ahead but lay a solid foundation first.",
"createdAt": "1 week ago",
"score": 4,
"replyingTo": "maxblagun",
"user": {
"image": {
"png": "./images/avatars/image-ramsesmiron.png",
"webp": "./images/avatars/image-ramsesmiron.webp"
},
"username": "ramsesmiron"
}
},
]
}
}
I am trying to access the reply by doing console.log(data.comments.replies); When i do this I get the following error in the console.
TypeError: comments.replies is undefined
Here is my code
fetch('./data.json', {
method: 'GET',
headers: {
'Accept': 'application/json',
},
})
.then((response) => response.json())
.then((data) => {
console.log(data.comments.replies);
})
.catch((error) => {
console.log(error);
});
I would like to loop over the array in order to display the information in html. I am un clear how to do this
Use index
data.comments[index].replies
Example:
data.comments[1].replies
const data = {
"currentUser": {
"image": {
"png": "./images/avatars/image-juliusomo.png",
"webp": "./images/avatars/image-juliusomo.webp"
},
"username": "juliusomo"
},
"comments": [{
"id": 1,
"content": "Impressive! Though it seems the drag feature could be improved. But overall it looks incredible. You've nailed the design and the responsiveness at various breakpoints works really well.",
"createdAt": "1 month ago",
"score": 12,
"user": {
"image": {
"png": "./images/avatars/image-amyrobson.png",
"webp": "./images/avatars/image-amyrobson.webp"
},
"username": "amyrobson"
},
"replies": []
},
{
"id": 2,
"content": "Woah, your project looks awesome! How long have you been coding for? I'm still new, but think I want to dive into React as well soon. Perhaps you can give me an insight on where I can learn React? Thanks!",
"createdAt": "2 weeks ago",
"score": 5,
"user": {
"image": {
"png": "./images/avatars/image-maxblagun.png",
"webp": "./images/avatars/image-maxblagun.webp"
},
"username": "maxblagun"
},
"replies": [{
"id": 3,
"content": "If you're still new, I'd recommend focusing on the fundamentals of HTML, CSS, and JS before considering React. It's very tempting to jump ahead but lay a solid foundation first.",
"createdAt": "1 week ago",
"score": 4,
"replyingTo": "maxblagun",
"user": {
"image": {
"png": "./images/avatars/image-ramsesmiron.png",
"webp": "./images/avatars/image-ramsesmiron.webp"
},
"username": "ramsesmiron"
}
}]
}
]
}
console.log(data.comments[1].replies)

Display image with react from strapi

i have a problem with fetching images from strapi .
i tried a lot but it wont show any images , also when i post rich text ad try image it wont work, can somebody help me out !
const ApiUrl = ('http://localhost:1337')
const { id } = useParams()
const {loading , error , data } = useFetch('http://localhost:1337/reviews/ ' + id)
if(loading) return <p>Loading..</p>
if(error) return <p>Error</p>
return (
<div className={classes.root}>
<div className={classes.container}>
<img src={ApiUrl + data.image} alt={data.naam} />
<h2 className={classes.headertxt}>{data.naam}</h2>
also tried {review.image} {data.image.url} review.image.url
regardss
I think you need to check the documentation for your API (if you use rest API) or schema of GraphQl playground (if you use GrapQl).
Install Swagger UI documentation plugin to check schema.
This may fix your problem.
Maybe this can give you some directions.
LINK TO STRAPI CONTENT API GET
and this is what this should return for you:
{
"id": 1,
"title": "Restaurant 1",
"cover": {
"id": 1,
"name": "image.png",
"hash": "123456712DHZAUD81UDZQDAZ",
"sha256": "v",
"ext": ".png",
"mime": "image/png",
"size": 122.95,
"url": "http://localhost:1337/uploads/123456712DHZAUD81UDZQDAZ.png",
"provider": "local",
"provider_metadata": null,
"created_at": "2019-12-09T00:00:00.000Z",
"updated_at": "2019-12-09T00:00:00.000Z"
},
"content": [
{
"__component": "content.title-with-subtitle",
"id": 1,
"title": "Restaurant 1 title",
"subTitle": "Cozy restaurant in the valley"
},
{
"__component": "content.image-with-description",
"id": 1,
"image": {
"id": 1,
"name": "image.png",
"hash": "123456712DHZAUD81UDZQDAZ",
"sha256": "v",
"ext": ".png",
"mime": "image/png",
"size": 122.95,
"url": "http://localhost:1337/uploads/123456712DHZAUD81UDZQDAZ.png",
"provider": "local",
"provider_metadata": null,
"created_at": "2019-12-09T00:00:00.000Z",
"updated_at": "2019-12-09T00:00:00.000Z"
},
"title": "Amazing photography",
"description": "This is an amazing photography taken..."
}
],
"opening_hours": [
{
"id": 1,
"day_interval": "Tue - Sat",
"opening_hour": "7:30 PM",
"closing_hour": "10:00 PM"
}
]
}

How can I get the created by and updated by fields in StrapiJS?

I've just started using StrapiJS, and it's really great so far, but now I've come across a problem.
When creating adding some data to the database, Strapi automatically creates some fields - like created_by and updated_by fields, but I'm not getting them in the API response.
This is the data stored in MongoDB:
{
"_id": {
"$oid": "606fd90b0057c05954d29f50"
},
"likes": 0,
"dislikes": 0,
"Title": "Why is this not working?",
"Subtitle": "I really don't know",
"slug": "why-is-this-not-working",
"content": "**I DO NOT KNOW**",
"published_at": {
"$date": "2021-04-09T04:33:17.304Z"
},
"createdAt": {
"$date": "2021-04-09T04:33:15.232Z"
},
"updatedAt": {
"$date": "2021-04-09T04:33:17.316Z"
},
"__v": 0,
"created_by": {
"$oid": "606f1a45af15265f780983ce"
},
"updated_by": {
"$oid": "606f1a45af15265f780983ce"
}
}
And this is the API response:
{
"likes": 0,
"dislikes": 0,
"_id": "606fd90b0057c05954d29f50",
"Title": "Why is this not working?",
"Subtitle": "I really don't know",
"slug": "why-is-this-not-working",
"content": "**I DO NOT KNOW**",
"published_at": "2021-04-09T04:33:17.304Z",
"createdAt": "2021-04-09T04:33:15.232Z",
"updatedAt": "2021-04-09T04:33:17.316Z",
"__v": 0,
"id": "606fd90b0057c05954d29f50"
}
Is there a way to get the created of the data in the API response?
You will have to override the findOne method in your controller like below without the sanitize:
async findOne(ctx) {
const { id } = ctx.params;
const entity = await strapi.services.blogPost.findOne({ id });
// return sanitizeEntity(entity, { model: strapi.models.blogPost});
return entity;
}
refer:Backend customization
set populateCreatorFields=true in model.settings.json
This seem to work for me
Add
"populateCreatorFields": true
Add Optional
"publicAttributes": ["created_at", "updated_by"]
to
api/blog-post/models/blog-post.settings.json
...
"options": {
"increments": true,
"timestamps": true,
"draftAndPublish": true,
"populateCreatorFields": true
}
...

JSON.parse returning "scanEscape a"

I have QML LocalStorage using javaScript. In it I put object via JSON.stringify(). When I try to read the object from DB using JSON.parse() is returning : scanEscape a and I did't found a reference to this scan error JSON file:
{
"header": {
"version": "2.5",
"createdIn": "PickWorks - Linux",
"modifiedIn": "PickWorks.appName",
"modified": "2013/12/07"
},
"properties": {
"title": "We found a love",
"authors": [
{
"name": "Rihana"
}
],
"transposition": -2,
"tempo": {
"type": "bpm",
"value": "130"
},
"key": "C",
"version": "2.5.4",
"publisher": "GuitarTab",
"keywords": [
"find",
"love",
"deny"
],
"verseOrder": "v1 b c v2 b c",
"themes": [
"love",
"hopeless"
]
},
"lyrics": [
{
"title": "v1",
"text": "[a]Yellow diamonds [F]in the light\n[C]And we're standing [G]side by side\n[a]As your shadow [F]crosses mine\n[C]What it takes to [G]come [a]alive.[F]\n",
"items": {}
},
{
"title": "v2",
"text": "[a]Shine a light through [F]an open door\n[C]Love and life [G]I will divide\n[a]Turn away cause [F]I need you more\n[C]Feel the heart-[G]beat in my [a]mind.[F]\n"
},
{
"title": "c",
"text": "[a]We found love in a [F]hopeless place\n[C]We found love in a [G]hopeless place\n[a]We found love in a [F]hopeless place\n[C]We found love in a [G]hopeless place\n"
},
{
"title": "b",
"text": "[C]It's the way I'm feeling [G]I just can't [a]deny.[F]\n[C]But I've gotta [G]let it go\n"
}
]
}
Q1: What is this error ?
Q2: How to solve it?
P.S.: (Tested on Qt 5.2b & 5.1.1)
Bug was actually some missed debugging log in Qt. Upon creating Bugtrack issue problem was adressed and will be solved in next stable release (Qt 5.2.0).

Categories