CODEWITHSUNDEEP
reactjsreduxreact-reduxreact-router-redux
AVIRAL KUSHAWAHA
AVIRAL KUSHAWAHA

Reputation: 11

Iterating in depth of json object React.js-redux,

I have a JSON object stored in Redux, I have to display all the titles{ As LINKS} when clicking on the title it displays its section:[....](AS TITLE{LINKS}) and iterating in depth until JSONOBJECT.section.type===menu and display all the section's title. And if section.type==="Vid" then it's an Anchor tag only.

On clicking the back button load the previousState/props as it was on the previous page using Redux.

Snap of JSON object: https://i.sstatic.net/HbYru.png

Explanation:
I have loaded the root level section on a component named DASHBOARD.js and on clicking any title I want to load the subSections on the same DASHBOARD.js and on clicking the BACK button load the previous superSection.

{
    "id":"",
 "section":[
   {
    "id":"",
 "section":[{
    "id":"",
 "section":[{
    "id":"",
 "section":[{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
},{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
},{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
},{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
}],
 "title":"",
 "type":"menu"
}],
 "title":"",
 "type":"menu"
},{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
},{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
},{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
}],
 "title":"",
 "type":"menu"
},{
    "id":"",
 "section":[{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
},{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
},{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
},{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
}],
 "title":"",
 "type":"menu"
},{
    "id":"",
 "section":[{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
},{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
},{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
},{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
}],
 "title":"",
 "type":"menu"
},{
    "id":"",
 "section":[{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
},{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
},{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
},{
    "id":"",
 "section":[],
 "title":"",
 "type":"Vid"
}],
 "title":"",
 "type":"menu"
}
   ],
 "title":"",
 "type":"menu"
}

Sample View of what the project would look like:

  1. https://i.sstatic.net/M3f5f.png
  2. https://i.sstatic.net/vnb00.png
  3. https://i.sstatic.net/705ni.png

Firstly I clicked on any Navigation item. Then it would load its contentTitle[image:1] as in the given image, and all titles would be <Link>.Then on clicking that link, it would Load the childContentTitle<Link>[image:2], and on clicking that childContentTitle it would load grandchildContentTitle, and then grandgrandchild[image:3] and so on. Then, this all will be re-render on the same reactComponent named Dashboard until JSON.type!=="vid.

Upvotes: 1

Views: 133

Answers (0)

Related Questions