Javascript - How to display data from an array with nested objects?

reactchel
August 16, 2023
152 views
3 votes
3 Answers

How to display data from an array with nested objects?

There are a bunch of objects in the array that have nesting, I tried to loop the render, but it didn’t help

const DATA = [
  {
    title: "Apple",
    fields: {
      title: "iPhone",
      fields: {
        title: "14 pro",
        fields: {},
      },
    },
  },
  {
    title: "Xiaomi",
    fields: {
      title: "phone",
      fields: {
        title: "MI 5",
        fields: {},
      },
    },
  },
];

  const itemsRender = (item, idx) => {
    const key = Object.keys(item).at(-1);
    return (
      <div key={idx}>
        <p>{item[key].title}</p>
        {!isEmpty(item[key]?.fields) &&
          Object.values(item[key]?.fields).map(itemsRender)}
      </div>
    );
  };

  return <>{DATA.map(itemsRender)}</>;

Tags: javascript reactjs

Answers

Maybe something like this:

Added the subIdx parameter to the recursive call of itemsRender to provide a unique key for each nested item.

const DATA = [
  {
    title: "Apple",
    fields: {
      title: "iPhone",
      fields: {
        title: "14 pro",
        fields: {},
      },
    },
  },
  {
    title: "Xiaomi",
    fields: {
      title: "phone",
      fields: {
        title: "MI 5",
        fields: {},
      },
    },
  },
];

const isEmpty = (obj) => {
  return Object.keys(obj).length === 0;
};

const itemsRender = (item, idx) => {
  const key = Object.keys(item)[0]; // Use [0] instead of at(-1)
  return (
    <div key={idx}>
      <p>{item[key].title}</p>
      {!isEmpty(item[key]?.fields) &&
        Object.values(item[key]?.fields).map((subItem, subIdx) =>
          itemsRender(subItem, subIdx) // Recursively render nested items
        )}
    </div>
  );
};

const App = () => {
  return <div>{DATA.map(itemsRender)}</div>;
};

export default App;

I have created an array of objects called DATA. Each object has two properties: title and fields. The fields property is an object that contains nested properties. It then defined a function called itemsRender that takes an object and an index as its arguments. Finally, using the map() method to iterate over the DATA array and call the itemsRender function for each object.

const DATA = [
  {
    title: "Apple",
    fields: {
      title: "iPhone",
      fields: {
        title: "14 pro",
        fields: {},
      },
    },
  },
  {
    title: "Xiaomi",
    fields: {
      title: "phone",
      fields: {
        title: "MI 5",
        fields: {},
      },
    },
  },
];

const itemsRender = (item, idx) => {
  console.log("item:", item);
  const key = Object.keys(item).at(-1);
  return (
    <div key={idx}>
      <p>{item[key].title}</p>
      {!isEmpty(item[key]?.fields) &&
        Object.values(item[key]?.fields).map(itemsRender)}
    </div>
  );
};

const rootElement = document.getElementById("root");
const renderedData = DATA.map(itemsRender);
rootElement.appendChild(renderedData);

We can pull specific data with "dot" notation. Then using .map method to iterate through an array of objects.

Note: just in case I modified the keys to make it more legible.

const DATA = [
  {
    id: 1, 
    brand: "Apple",
    description: {
      phone: "iPhone",
      spec: {
        model: "14 pro",
        fields: {},
      },
    },
  },
  {
    id: 2, 
    brand: "Xiaomi",
    description: {
      phone: "phone",
      spec: {
        model: "MI 5",
        fields: {},
      },
    },
  },
];

export default function Items() {
  return (
    <div>
      {DATA.map((item) => (
        <div key={item.id}>
          <p>Brand: {item.brand}</p>
          <p>Phone: {item.description.phone}</p>
          <p>Model: {item.description.spec.model}</p>
        </div>
      ))}
    </div>
  )
}

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – How to display data from an array with nested objects?

Answers