I have a rich text content type that I am using to input unordered lists which I want to display on a website. In the API response I am getting, the data I actually want(the text for the list items) is nested about four levels deep. Hence I had to write pretty complex JS that maps through four levels in order to get the text for each LI I want to render on the site.
Is there really no easier way to do this?
Here is an example of the response I get:
{
"node":{
"body":{
"body":"Our professional services focus is a satisfied end user. That starts with actively listening to understand your pain points and then combining industry best practice with the latest technology to solve your service delivery and quality challenges. “OneCall”SDM Service Desk Management (SDM)\nFramework V-Tech’s “OneCall” SDM mitigates service desk performance risks by empowering agents individually and as a team. By leveraging actionable\nintelligence, “OneCall”SDM drives a self-managing contact center environment that compliments your service desk Work Force Management (WFM). The result is improved service deliverables and quality objectives. “OneCall” SDM promotes a culture of continual service improvement, higher agent retention and enhanced service delivery."
},
"icon":{
"file":{
"url":"//images.ctfassets.net/01rkmjdta22y/736XKTqBiwJK6vG5giMQQC/c98e8430da075e7a999bf61083c11c0c/Professional_Services.png"
}
},
"title":"Professional Services",
"list":{
"list":"{\"data\":{},\"content\":[{\"data\":{},\"content\":[{\"data\":{},\"content\":[{\"data\":{},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"Streamlined efficiencies and processes\",\"nodeType\":\"text\"}],\"nodeType\":\"paragraph\"}],\"nodeType\":\"list-item\"},{\"data\":{},\"content\":[{\"data\":{},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"Increased accountability and productivity \",\"nodeType\":\"text\"}],\"nodeType\":\"paragraph\"}],\"nodeType\":\"list-item\"},{\"data\":{},\"content\":[{\"data\":{},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"Common Operating Picture (COP) of performance indicators \",\"nodeType\":\"text\"}],\"nodeType\":\"paragraph\"}],\"nodeType\":\"list-item\"},{\"data\":{},\"content\":[{\"data\":{},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"Higher agent availability, effective scheduling, and service delivery\",\"nodeType\":\"text\"}],\"nodeType\":\"paragraph\"}],\"nodeType\":\"list-item\"},{\"data\":{},\"content\":[{\"data\":{},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"Enhanced reporting and situational awareness \",\"nodeType\":\"text\"}],\"nodeType\":\"paragraph\"}],\"nodeType\":\"list-item\"},{\"data\":{},\"content\":[{\"data\":{},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"Reporting that mitigates risk through utilization of data dashboards and alerts\",\"nodeType\":\"text\"}],\"nodeType\":\"paragraph\"}],\"nodeType\":\"list-item\"}],\"nodeType\":\"unordered-list\"},{\"data\":{},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"\",\"nodeType\":\"text\"}],\"nodeType\":\"paragraph\"},{\"data\":{},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"\",\"nodeType\":\"text\"}],\"nodeType\":\"paragraph\"}],\"nodeType\":\"document\"}"
}
}
}
And here is my code that I have to go through to get the actual value of each list item:
const getListItems = (listData) => {
const results = []
const parsed = JSON.parse(JSON.stringify(listData));
parsed.content.map(levelOne => {
levelOne.content.map(levelTwo => {
if(levelTwo.content) {
levelTwo.content.map(levelThree => {
if(levelThree.content) {
levelThree.content.map(levelFour => {
results.push(levelFour.value);
})
}
})
}
})
})
setParsedItems(results);
}
Just wondering if there is an easier way to do this…