Cокращение вложенности объекта в Javascript
206
27 января 2020, 05:20
Имеется json
{
"page_id": "123",
"fields": {
"desktop_content": {
"logo": {
"left_part": "RM / PM / ",
"right_part": "PHOTOGRAPHY / CREATIVE CONSULTING"
},
"hero_content": {
"left_block": {
"photo": "http://localhost/wordpress/wp-content/uploads/2019/03/markus.ffba5_.png",
"name": "MARCUS RIEDER MSc./BA.",
"subtitle": "PHOTOGRAPHY+CONSULTING",
"phone_text": {
"left_part": "Call ",
"right_part": "0660/400 70 20 or"
},
"mail_text": {
"left_part": "Wrote to ",
"right_part": "marcus@local.net"
}
},
"right_block": {
"photo": "http://localhost/wordpress/wp-content/uploads/2019/03/michael.35dac.png",
"name": "MICHAEL PELKA BSc./BA.",
"subtitle": "PHOTOGRAPHY+CREATIVE DIRECTION",
"phone_text": {
"left_part": "Call ",
"right_part": "0676/660 81 30 or"
},
"mail_text": {
"left_part": "Wrote to ",
"right_part": "michael@local.net"
}
},
"image_over_blocks": "http://localhost/wordpress/wp-content/uploads/2019/04/WeCreatePictures.png"
},
"we_do_block": {
"left_block": {
"title": {
"left_part": "NOW PROUDLY WORKING WITH /",
"right_part": "WATERDROP"
},
"text": "Two entrepreuneurs \r\nworking together for one vision.\r\nCreate real impact for \r\nour clients."
},
"right_block": {
"icon_blocks": {
"icon_block1": {
"icon": "http://localhost/wordpress/wp-content/uploads/2019/04/icon-design.svg",
"title": "DESIGN"
},
"icon_block2": {
"icon": "http://localhost/wordpress/wp-content/uploads/2019/04/icon-photography.svg",
"title": "PHOTOGRAOHY"
},
"icon_block3": {
"icon": "http://localhost/wordpress/wp-content/uploads/2019/04/icon-consulting.svg",
"title": "CONSULTING"
},
"icon_block4": {
"icon": "http://localhost/wordpress/wp-content/uploads/2019/04/icon-strategy.svg",
"title": "STRATEGY"
}
},
"image": "http://localhost/wordpress/wp-content/uploads/2019/03/GoodConsistent.dec8c.png"
}
},
"slider_block": [{
"slide_image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg",
"slide_title": "Warerdrop",
"slide_description": "HR Campaign",
"detailed_description": {
"client": "Waterdrop",
"year": "2017",
"activities": "Photography / Concept Design",
"overview": "Lorem ipsum dolor sit amet. Consequetur noctem tuum.",
"images": [{
"image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg"
},
{
"image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg"
},
{
"image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg"
},
{
"image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg"
}
]
}
},
{
"slide_image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg",
"slide_title": "Warerdrop",
"slide_description": "HR Campaign",
"detailed_description": {
"client": "Waterdrop",
"year": "2018",
"activities": "Photography / Concept Design",
"overview": "Lorem ipsum dolor sit amet. Consequetur noctem tuum.",
"images": [{
"image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg"
},
{
"image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg"
},
{
"image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg"
},
{
"image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg"
}
]
}
},
{
"slide_image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg",
"slide_title": "Warerdrop",
"slide_description": "HR Campaign",
"detailed_description": {
"client": "Waterdrop",
"year": "2019",
"activities": "Photography / Concept Design",
"overview": "Lorem ipsum dolor sit amet. Consequetur noctem tuum.",
"images": [{
"image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg"
},
{
"image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg"
},
{
"image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg"
},
{
"image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg"
}
]
}
}
],
"blocks_with_photos": {
"block_with_photos_left_top": {
"title": {
"left_part": "OUR SATISFIED CLIENTS / ",
"right_part": "CLIENT XY"
},
"photos": [{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Client_Logos_Zeichenfläche-1-Kopie-3.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Client_Logos_Zeichenfläche-1-Kopie.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Client_Logos_Zeichenfläche-1.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Client_Logos_Zeichenfläche-1-Kopie-12.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Client_Logos_Zeichenfläche-1-Kopie-7.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Client_Logos_Zeichenfläche-1-Kopie-8.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Client_Logos_Zeichenfläche-1-Kopie-4.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Client_Logos_Zeichenfläche-1-Kopie-11.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Client_Logos_Zeichenfläche-1-Kopie-9.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Client_Logos_Zeichenfläche-1-Kopie-13.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Client_Logos_Zeichenfläche-1-Kopie-5.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Client_Logos_Zeichenfläche-1-Kopie-14.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Client_Logos_Zeichenfläche-1-Kopie-6.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Client_Logos_Zeichenfläche-1-Kopie-2.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Client_Logos_Zeichenfläche-1-Kopie-10.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Client_Logos-11.png"
}
]
},
"block_with_photos_right_top": {
"title": {
"left_part": "NETWORK PARTNERS /",
"right_part": "CLIENT XY"
},
"photos": [{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_PUBL_Logos-21.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_PUBL_Logos-22.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_PUBL_Logos-23.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_PUBL_Logos-25.png"
}
]
},
"block_with_photos_left_bottom": {
"title": {
"left_part": "COLLABORATIONS /",
"right_part": "CLIENT XY"
},
"photos": [{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Collab_Logos-17.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Collab_Logos-18.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Collab_Logos_Zeichenfläche-1-Kopie-15.png"
},
{
"photo": "http://localhost/wordpress/wp-content/uploads/2019/04/RMPM_Collab_Logos_Zeichenfläche-1-Kopie-16.png"
}
]
},
"image_beside_blocks": "http://localhost/wordpress/wp-content/uploads/2019/03/MakeGreatImpact.72536.png"
},
"get_in_touch_block": {
"image_for_block": "http://localhost/wordpress/wp-content/uploads/2019/04/GetInTouchDesktop.png",
"title_block": "Start the Conversation",
"content_block": "Every beautiful Relationship starts with a simple „hello“. Let‘s make something memorable out of it",
"text_bottom_of_block": "Or just call us now 0660/400 70 20"
},
"our_studio_image": "http://localhost/wordpress/wp-content/uploads/2019/03/studio.7d597.jpg",
"contact_block": {
"left_block": {
"icon": "http://localhost/wordpress/wp-content/uploads/2019/04/studio-icon.svg",
"pre_title": "Come in and Say hi in person.",
"title": "Studio RM/PM",
"first_line_address": "Bräumühlweg 5 ",
"second_sub_block": "Bergheim, Austria"
},
"right_block": {
"icon": "http://localhost/wordpress/wp-content/uploads/2019/04/office-icon.svg",
"pre_title": "Come in and Say hi in person",
"title": "Office RM/PM",
"first_line_address": "Imbergstrasse 1",
"second_sub_block": "Salzburg, Austria"
}
},
"social_link": [{
"icon": "http://localhost/wordpress/wp-content/uploads/2019/03/instagram-logo.bd840.png",
"link": "https://www.instagram.com"
},
{
"icon": "http://localhost/wordpress/wp-content/uploads/2019/03/facebook-logo.5322d.png",
"link": "https://www.facebook.com/"
}
]
},
"mobile_content": {
"hero_block": {
"pre_title": "WE ARE",
"title": "RM / PM",
"sub_title": "PHOTOGRAPHY DESIGN CREATIVE CONSULTING",
"description": "Crafting hollistic Images to help ambitious brands grow.",
"image": "http://localhost/wordpress/wp-content/uploads/2019/04/WeCreateImages.png",
"text_bottom_of_block": {
"left_part": "NOW PROUDLY WORKING WITH",
"right_part": "WATERDROP"
}
},
"slider_block": {
"title_block": "LATEST PROJECTS",
"slider": [{
"slide": {
"title": "Waterdrop",
"subtitle": "HR Campaign",
"link": {
"text": "More",
"url": "http://localhost"
},
"image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg"
}
},
{
"slide": {
"title": "Waterdrop",
"subtitle": "HR Campaign",
"link": {
"text": "More",
"url": "http://localhost"
},
"image": "http://localhost/wordpress/wp-content/uploads/2019/03/cases-slide.c7ddd.jpg"
}
}
]
},
"whatwedo_block": {
"title": "WHAT WE DO",
"subtitle": "Two entrepreuneurs working together for one vision. Create real impact for our clients.",
"slider": [{
"slide": {
"image": false,
"title": "Design",
"description": "Consistent Design Expertise escorts the whole project from start to finish."
}
},
{
"slide": {
"image": false,
"title": "Design",
"description": "Consistent Design Expertise escorts the whole project from start to finish."
}
},
{
"slide": {
"image": false,
"title": "Design",
"description": "Consistent Design Expertise escorts the whole project from start to finish."
}
},
{
"slide": {
"image": false,
"title": "Design",
"description": "Consistent Design Expertise escorts the whole project from start to finish."
}
}
]
},
"brands_block": {
"description": "We are keen on sustaining Long-Term Relationships with our Clients.",
"images": [{
"image": false
},
{
"image": false
},
{
"image": false
},
{
"image": false
},
{
"image": false
}
]
},
"network_partners": {
"description": "Together we are more. Thank‘s to our relient Network Partnes we can offer a broad range of services for our client.",
"images": [{
"image": false
},
{
"image": false
},
{
"image": false
}
]
},
"collaborations": {
"description": "Lorem ipsum dolor sit amet.",
"images": [{
"image": false
},
{
"image": false
},
{
"image": false
}
]
},
"get_in_touch_block": {
"pre-title": "GET IN TOUCH",
"title": "Start the Conversation",
"description": "Every beautiful Relationship starts with a simple „hello“. Let‘s make something memorable out of it",
"text_bottom_of_block": "Or just call us now 0660/400 70 20",
"image": "http://localhost/wordpress/wp-content/uploads/2019/04/GetInTouch.png"
},
"our_studio_block": {
"pre-title": "OUR STUDIO",
"image": "http://localhost/wordpress/wp-content/uploads/2019/03/studio.7d597.jpg",
"first_sub-block": {
"description": "Come and play with us.",
"title": "Studio RM/PM",
},
"second_sub-block": {
"description": "Come and Say hi in person.",
"title": "Office RM/PM",
}
},
"social_link": [{
"icon": "http://localhost/wordpress/wp-content/uploads/2019/03/instagram-logo.bd840.png",
"link": "https://www.instagram.com"
},
{
"icon": "http://localhost/wordpress/wp-content/uploads/2019/03/facebook-logo.5322d.png",
"link": "https://www.facebook.com/"
}
]
}
}
}каким образом можно сократить вложенность? При получении этого json'a конечные свойства нужно записать в state компонента React и получается полотно цепочек.
Например:
fields.desktop_content.logo.left_part
fields.desktop_content.logo.right_part
Answer 1
Можете воспользоваться деструктуризацией и вместо длинных записей:
const left_part = fields.desktop_content.logo.left_part
const right_part = fields.desktop_content.logo.right_part
использовать следующие сокращения:
const { left_part, right_part } = fields.desktop_content.logo;
или если совсем нужно упростить
const {
desktop_content: {
logo: {
left_part,
right_part
}
}
} = fields;
Приведенные выше блоки равносильны по своему значению.
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
-
20:41
-
06:31
-
21:28
-
22:18
-
08:00
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 49997 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31911 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 25958 visits
- Как через css изменить цвет png изображения? 11733 visits
- Blob video url download 11279 visits
- Php curl запрос через прокси с авторизацией 10685 visits
- Работа с captcha vk api 9481 visits
© "hostciti.net" 21.1.2026 | 17:14