反应本地筑巢地图而不知道钥匙

发布于 2025-02-13 02:08:41 字数 797 浏览 2 评论 0原文

我正在做一个反应的应用程序，并且正在通过API收集数据。我正在尝试添加一项新功能，其中按日期组织信息。因此，API发送了看起来像这样的数据：

{
  "channel_count": "1",
  "channels": [
    {
      "logo": "default.png",
      "name": "Default Channel",
      "token": "default"
    }
  ],
  "messages": [
    {
      "2022-07-04": [
        {
          "body": "Body",
          "title": "Title"
        },
      ]
    },
    {
      "2022-07-01": [
        {
          "body": "Body",
          "title": "Title"
        }
      ]
    }
  ]
}

我可以“进入” JSON中的消息，但是由于我不知道哪个日期，所以我不能更深入地走另一层。

我想在按日期组织消息时显示此数据。问题是，当我不容易地知道将显示什么日期时，我如何映射消息？如JSON所示，这显示了7天半径的消息，但并非每天发送消息。

在基本层面上，我希望我的应用看起来像这样：

日期：2022-07-04

标题：标题

正文：正文

日期：2022-07-01

标题：标题

：正文：

当应用程序更加完整时，数据，消息仍将按日期组织）

原文

I am making an app in react-native and I am gathering my data via API. I am trying to add a new feature where information is organized by date. So the API sends data that looks like this:

{
  "channel_count": "1",
  "channels": [
    {
      "logo": "default.png",
      "name": "Default Channel",
      "token": "default"
    }
  ],
  "messages": [
    {
      "2022-07-04": [
        {
          "body": "Body",
          "title": "Title"
        },
      ]
    },
    {
      "2022-07-01": [
        {
          "body": "Body",
          "title": "Title"
        }
      ]
    }
  ]
}

I am able to 'get into' the messages in the JSON, but since I do not know which date, I can not go another layer deeper.

I want to display this data while organizing the messages by date. The issue is, how am I able to map the messages when I do not readily know what dates will be shown? This displays messages from a 7 day radius, but messages are not sent everyday, as shown in the JSON.

On a basic level, I want my app to look like this:

Date: 2022-07-04

Title: Title

Body: Body

Date: 2022-07-01

Title: Title

Body: Body

(and when the app is more complete with more data, the messages will still be organized by date)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

微暖i 2025-02-20 02:08:41

根据您的需要，您可以尝试以下代码，它应该适合您。

 const data = {
  "channel_count": "1",
  "channels": [
    {
      "logo": "default.png",
      "name": "Default Channel",
      "token": "default"
    }
  ],
  "messages": [
    {
      "2022-07-04": [
        {
          "body": "Body",
          "title": "Title"
        },
      ]
    },
    {
      "2022-07-01": [
        {
          "body": "Body",
          "title": "Title"
        }
      ]
    }
  ]
}

const { messages } = data || {};

const mappedData = (messages || []).map(item => {
  const [key] = Object.keys(item);
  const [value] = item[key];
  return { date: key, body: value.body, title: value.title};
});

console.log("updatedData", mappedData)

现在，您可以在for中的对象数组中使用数据，

[{ date: "2022-07-04", body: "Body", title: "Title" }, ....]

可以在UI上使用地图并渲染数据。

As per your need, you can try below code it should work for you.

 const data = {
  "channel_count": "1",
  "channels": [
    {
      "logo": "default.png",
      "name": "Default Channel",
      "token": "default"
    }
  ],
  "messages": [
    {
      "2022-07-04": [
        {
          "body": "Body",
          "title": "Title"
        },
      ]
    },
    {
      "2022-07-01": [
        {
          "body": "Body",
          "title": "Title"
        }
      ]
    }
  ]
}

const { messages } = data || {};

const mappedData = (messages || []).map(item => {
  const [key] = Object.keys(item);
  const [value] = item[key];
  return { date: key, body: value.body, title: value.title};
});

console.log("updatedData", mappedData)

Now you have your data in array of object in the for of

[{ date: "2022-07-04", body: "Body", title: "Title" }, ....]

you can use map and render data on your UI.

回复收藏 0 原文

空城缀染半城烟沙 2025-02-20 02:08:41

您是否听说过object.entries，object.values，object.keys.keys和in and 对于循环？

const data = {
  "channel_count": "1",
  "channels": [
    {
      "logo": "default.png",
      "name": "Default Channel",
      "token": "default"
    }
  ],
  "messages": [
    {
      "2022-07-04": [
        {
          "body": "Body",
          "title": "Title"
        },
      ]
    },
    {
      "2022-07-01": [
        {
          "body": "Body",
          "title": "Title"
        }
      ]
    }
  ]
}

console.log(data.messages.flatMap(e => Object.entries(e)))

Did you heard about Object.entries, Object.values, Object.keys and for in and for of loops?

const data = {
  "channel_count": "1",
  "channels": [
    {
      "logo": "default.png",
      "name": "Default Channel",
      "token": "default"
    }
  ],
  "messages": [
    {
      "2022-07-04": [
        {
          "body": "Body",
          "title": "Title"
        },
      ]
    },
    {
      "2022-07-01": [
        {
          "body": "Body",
          "title": "Title"
        }
      ]
    }
  ]
}

console.log(data.messages.flatMap(e => Object.entries(e)))

回复收藏 0 原文

~没有更多了~