How do you display a nested object in React after merging it?

Question

How do you display a nested object in React after merging it?

To display the JSON below as an image, click https://i.stack.imgur.com/tixu4.png

let finalSplit = [
    {
      start: "73",
      end: "76",
      splits: [
        {
          word: "Now",
          start: "73",
          color:"#FF6262",
          name:"extra",
          end: "76",
        },
      ],
    },
    {
      start: "27",
      end: "72",
      splits: [
        {
          word: "GitHub Actions",
          start: "31",
          name:"sub1",
          color:"#DFF652",
          end: "45",
        },
        {
          word: "the GitHub Actions “New Workflow” experience.",
          start: "27",
          name:"main",
          color:"#62FF8E",
          end: "72",
        },
        {
          word: "GitHub",
          start: "31",
          name:"sub2",
          color:"#9483FF",
          end: "37",
        },
      ],
    },
  ];

I attempted to render each array in a loop but encountered duplicates, preventing me from rendering it in an aggregated form.

const Mark = () => {
    
    return (
        <>
        {
            finalSplit.map((i)=>{
                return (
                    <div>
                        i.split.map((j)=>{
                            <div>{j.text}</div>
                        })
                    </div>
                )
            })
        }
        <>
    );
}

I need to generate another structure with text: "announcing improvements to the GitHub Actions “New Workflow” experience. Now, when you want to create" along with their respective offsets.

javascript arrays reactjs concatenation jsx

Answer 1

Answer №1

This particular solution is effective to a certain extent utilizing the concepts of sorting and absolute positioning. When actual pixel position values are provided, it can produce results similar to the image you have shared.

const Mark = () => {
  const sortData = (data) => {
    return data.sort((a, b) => {
      if (a.start === b.start) {
        return b.end - a.end;
      } else {
        return a.start - b.start;
      }
    });
  };

  const sortNestedData = (data) => {
    const unsortedData = data.map((item) => {
      if (item?.splits) {
        return { ...item, splits: sortNestedData(item.splits) };
      }
      return item;
    });
    return sortData(unsortedData);
  };

  const renderNestedData = (data) => {
    const myData = data.map((item) => {
      return (
        <div
          style={{
            backgroundColor: item.color,
            position: "absolute",
            left: `${item.start}px`,
            // width: `${item.end - item.start}px`,
            top: "0px"
          }}
        >
          {item.word}
          {item.splits && renderNestedData(item.splits)}
        </div>
      );
    });
    return myData;
  };

  return (
    <div
      style={{
        backgroundColor: "lightblue",
        display: "flex",
        flexDirection: "row",
        position: "absolute"
      }}
    >
      {renderNestedData(sortNestedData(finalSplit))}
    </div>
  );
};

export default Mark;

Code playground => https://codesandbox.io/s/festive-violet-cc8s7?file=/src/App.js

https://i.stack.imgur.com/IPJG6.png

Answer 2

This particular solution is effective to a certain extent utilizing the concepts of sorting and absolute positioning. When actual pixel position values are provided, it can produce results similar to the image you have shared.

const Mark = () => {
  const sortData = (data) => {
    return data.sort((a, b) => {
      if (a.start === b.start) {
        return b.end - a.end;
      } else {
        return a.start - b.start;
      }
    });
  };

  const sortNestedData = (data) => {
    const unsortedData = data.map((item) => {
      if (item?.splits) {
        return { ...item, splits: sortNestedData(item.splits) };
      }
      return item;
    });
    return sortData(unsortedData);
  };

  const renderNestedData = (data) => {
    const myData = data.map((item) => {
      return (
        <div
          style={{
            backgroundColor: item.color,
            position: "absolute",
            left: `${item.start}px`,
            // width: `${item.end - item.start}px`,
            top: "0px"
          }}
        >
          {item.word}
          {item.splits && renderNestedData(item.splits)}
        </div>
      );
    });
    return myData;
  };

  return (
    <div
      style={{
        backgroundColor: "lightblue",
        display: "flex",
        flexDirection: "row",
        position: "absolute"
      }}
    >
      {renderNestedData(sortNestedData(finalSplit))}
    </div>
  );
};

export default Mark;

Code playground => https://codesandbox.io/s/festive-violet-cc8s7?file=/src/App.js

https://i.stack.imgur.com/IPJG6.png

How do you display a nested object in React after merging it?

Answer №1

Similar questions

What steps should I follow to create a large Angular single page application using ASP.NET MVC?

Is it feasible to evaluate a Typescript method parameter decorator at request time in a nodejs+nestjs environment rather than just at build time?

The content contained within the .each loop within the click event is only executed a single time

I am looking to personalize a Material UI button within a class component using TypeScript in Material UI v4. Can you provide guidance on how to achieve this customization?

Exploring the Depths of Vue Router: Incorporating Dynamic Nested Routes

Is JavaScript the Key to Navigating Through a Website?

Express along with Cheerio and JSDOM

Launch a Next.JS web application utilizing Yarn on Google App Engine

utilize ng-bind to apply numerous values simultaneously

Instructions on converting a SQL expression to Sequelize

Store various dropdown selections in an array

how can I pass a group of values as an argument in math.sum function?

A guide on invoking an onclick function within a Template literal in React.js

Performing a simulated click on a dynamically inserted element using pure JavaScript

Is it possible to use JavaScript to forcefully transition a CSS keyframe animation to its end state?

Using Rails and Haml to Implement Smooth Scrolling with Jquery and CoffeeScript

Numerous navigable tabs all on a single page

The element is absent in Type {}, however, it is mandatory in Type '&' and '&' cannot be designated to String Index Type Errors

Can you explain the distinction between using single and double quotes in my JavaScript and CSS code?

Unattractive destructuring during conditional assignment