将字符串转换为嵌套对象和数组

Question

I am in a project where the previous guy did some strange routing and basically I get slugs from contentful in the form of strings which I put in an array ["/api/", "/docs/getting-started/", "/docs/, "/plugin/", "/plugin/user/", "/plugin/profile/"......]

Now I need to convert it in the form of an array

let cleanedSidebarContents = [{
              title:null,
              pages:[
                     {title:"api",
                      path:"/api/"
                      },
                     {title:"docs",
                      path:"/docs/"
                      },
                      {title:"plugin",
                      path:"/plugin/"
                      },
                     ]
               },
             {
              title:"plugin",
              pages:[
                     {title:"user",
                      path:"/plugin/user/"
                      },
                     {title:"profile",
                      path:"/plugin/profile/"
                      },
                     ]
               },
              {
              title:"docs",
              pages:[
                     {title:"getting-started",
                      path:"/plugin/getting-started/"
                      },
                     ]
               }
]

So currently what I am doing is this -

 //-------Format sidebar data--------------->
    let cleanedSidebarContents = [];
    (function cleanSidebarContents() {

        let sideBarContentsContentful = [];
        cleanContentfulEdges.forEach(edge => {
            let slug = edge.node.slug;
            //split string into titles and remove empty spaces
            let routeMapArray = slug.split("/").filter(x => x != "");
            if (routeMapArray.length > 1) {
                sideBarContentsContentful.push({
                    title: routeMapArray[0],
                    page: {
                        title: routeMapArray[routeMapArray.length - 1],
                        path: edge.node.slug
                    }
                });
            } else {
                sideBarContentsContentful.push({
                    title: null,
                    page: {
                        title: routeMapArray[routeMapArray.length - 1],
                        path: edge.node.slug
                    }
                });
            }
        });

        let titles = [];
        for (let i = 0; i < sideBarContentsContentful.length; i++) {
            titles.push(sideBarContentsContentful[i].title);
        }
        //clean duplicate entries
        titles = titles.filter(function (item, index, inputArray) {
            return inputArray.indexOf(item) === index;
        });
        titles.sort();

        titles.map(item => {
            cleanedSidebarContents.push({
                title: item,
                pages: []
            })
        });

        sideBarContentsContentful.forEach(item => {
            for (let i = 0; i < cleanedSidebarContents.length; i++) {
                if(cleanedSidebarContents[i].title === item.title){
                    cleanedSidebarContents[i].pages.push(item.page)
                }
            }
        });
    }());
    //----------------------------------------->

I am first splitting all strings and putting the titles in a titles array then removing duplicates and mapping data accordingly.

I just feel like this is really bad code and there is a better way I just cannot figure out.

Answer 1

You could create a mapper object which maps the objects in the output with the title in the root of each object. split at the / to get all the chunks of path. .filter(Boolean) removes all the empty string created from beginning and end of the string. If there is only one match, then it belongs to the default null object. Else, use the first key in the matches as a key in the accumulator.

 const input = ["/api/", "/docs/getting-started/", "/docs/", "/plugin/", "/plugin/user/", "/plugin/profile/"]; const mapper = input.reduce((acc, path) => { let matches = path.split(/\\//).filter(Boolean), mapperKey = null; if (matches.length > 1) mapperKey = matches[0]; if (!acc[mapperKey]) acc[mapperKey] = { title: mapperKey, pages: [] }; const title = matches.pop(); acc[mapperKey].pages.push({ title, path }); return acc; }, {}) const output = Object.values(mapper); console.log(output)