如何过滤和映射复杂的json数据？答案

【问题标题】：How to filter and map a complex json data?如何过滤和映射复杂的json数据？
【发布时间】：2020-05-03 09:06:03
【问题描述】：

我从 api 获取了 json 数据，我想先过滤这些数据并只检索一些 json 属性。这是我从我的 api 获取请求的 json：

[
    {
        "id": 3138,
        "date": "2020-04-25T19:59:42",
        "slug": "portrait-numero-2",
        "status": "publish",
        "type": "portrait",
        "link": "http://www.mywebsite.org/portrait/portrait-numero-2/",
        "title": {
            "rendered": "Portrait numéro 2"
        },
        "content": {
            "rendered": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non condimentum mauris. Nullam at quam maximus, blandit tellus quis, consectetur felis. In at dapibus mauris. Nunc eleifend libero sit amet feugiat rutrum. Maecenas a magna hendrerit, elementum sem sit amet, pulvinar mi. Aliquam tincidunt accumsan vestibulum. Praesent sed volutpat neque. Fusce enim ex, suscipit a efficitur eu, tincidunt et felis. Cras id commodo neque. Cras fringilla tempus ultrices. Donec consequat tellus id erat feugiat, sit amet pellentesque velit blandit. Sed vehicula lobortis.</p>\n"
        },
        "excerpt": {
            "rendered": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non condimentum mauris. Nullam at quam maximus, blandit tellus quis, consectetur felis. In at dapibus mauris. Nunc eleifend libero sit amet feugiat rutrum. Maecenas a magna hendrerit, elementum sem sit amet, pulvinar mi. </p>\n"
        },

        "tags": [
            78,
            65,
            69
        ],
        "acf": {
            "site_internet_": "http://www.mywebsite.org",
            "pays": "Finlande",
            "image_entreprise": {
                "ID": 527,
                "id": 527,
                "url": "http://www.mywebsite.org/wp-content/uploads/2019/01/photo-4.jpg",

            }
        },
    },
    {
        "id": 3137,
        "date": "2020-04-25T19:22:16",
        "slug": "portrait-numero-1",
        "status": "publish",
        "type": "portrait",
        "link": "http://www.mywsebsite.org/portrait/portrait-numero-1/",
        "title": {
            "rendered": "Portrait numéro 1"
        },
        "content": {
            "rendered": Athènes ou Rome ?</figcaption></figure>Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait</p>\n",
            "protected": false
        },
        "excerpt": {
            "rendered": "<p>Ceci est un extrait de l&rsquo;article Ceci est un extrait de l&rsquo;article Ceci est un extrait de l&rsquo;article Ceci est un extrait de l&rsquo;article Ceci est un extrait de  </p>\n",
            "protected": false
        },
        "tags": [
            63,
            78,
            66
        ],
        "acf": {
            "site_internet_": "http://www.mywebsite.org",
            "telephone": "0909090999393",
            "pays": "Argentine",
            "image_entreprise": {
                "ID": 528,
                "id": 528,
                "url": "http://www.mywebsite.org/wp-content/uploads/2019/01/photo-5.jpg"

            },
        },
    }
]

我想检索这些数据：

id（肖像的id），slug，标题，摘录，日期（肖像的发布日期），标签，内容， features_image_url（我要检索的图像上的 url）。

这是我的代码：

 portraits = portraits
                .filter(el => el.status === "publish")
                .map(({id, slug, title, excerpt, date, tags, content, acf->image_entreprise->url}) => ({
                    id,
                    slug,
                    title,
                    excerpt,
                    date,
                    tags,
                    content,
                    featured_image_url
                }));

我收到以下错误：

Syntax Error: Unexpected token, expected "," (69:73)                           friendly-errors 11:02:24

  67 |             portraits = portraits
  68 |                 .filter(el => el.status === "publish")
> 69 |                 .map(({id, slug, title, excerpt, date, tags, content, acf->image_entreprise->url}) => ({
     |                                                                          ^
  70 |                 id,
  71 |                 slug,
  72 |                 title,

                                                                               friendly-errors 11:02:24
 @ ./.nuxt/store.js 10:24-52 21:4-26:6 21:45-26:5
 @ ./.nuxt/index.js

出了什么问题？我不明白这个问题谢谢你的帮助

【问题讨论】：

此处错误, , "tags": 连续两个逗号
你想在这里做什么acf->image_entreprise->url
我想访问位于 image_entreprise 和 acf 中的 url。

标签： javascript arrays json filter

【解决方案1】：

在 JS 中，我们不使用 ->，替代方法是进行嵌套解构。你做这样的事情 - ：

portraits = portraits
                .filter(el => el.status === "publish")
                .map(({id, slug, title, excerpt, date, tags, content, acf: {image_entreprise: {url}}}) => ({
                    id,
                    slug,
                    title,
                    excerpt,
                    date,
                    tags,
                    content,
                    featured_image_url: url
                }));

【讨论】：

【解决方案2】：

要访问 javascript 中的对象，我们使用“。”在 JSON 中不是“->”并且缺少“,”

const api = [
    {
        "id": 3138,
        "date": "2020-04-25T19:59:42",
        "slug": "portrait-numero-2",
        "status": "publish",
        "type": "portrait",
        "link": "http://www.mywebsite.org/portrait/portrait-numero-2/",
        "title": {
            "rendered": "Portrait numéro 2"
        },
        "content": {
            "rendered": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non condimentum mauris. Nullam at quam maximus, blandit tellus quis, consectetur felis. In at dapibus mauris. Nunc eleifend libero sit amet feugiat rutrum. Maecenas a magna hendrerit, elementum sem sit amet, pulvinar mi. Aliquam tincidunt accumsan vestibulum. Praesent sed volutpat neque. Fusce enim ex, suscipit a efficitur eu, tincidunt et felis. Cras id commodo neque. Cras fringilla tempus ultrices. Donec consequat tellus id erat feugiat, sit amet pellentesque velit blandit. Sed vehicula lobortis.</p>\n"
        },
        "excerpt": {
            "rendered": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non condimentum mauris. Nullam at quam maximus, blandit tellus quis, consectetur felis. In at dapibus mauris. Nunc eleifend libero sit amet feugiat rutrum. Maecenas a magna hendrerit, elementum sem sit amet, pulvinar mi. </p>\n"
        },
        "tags": [
            78,
            65,
            69
        ],
        "acf": {
            "site_internet_": "http://www.mywebsite.org",
            "pays": "Finlande",
            "image_entreprise": {
                "ID": 527,
                "id": 527,
                "url": "http://www.mywebsite.org/wp-content/uploads/2019/01/photo-4.jpg",

            }
        },
    },
    {
        "id": 3137,
        "date": "2020-04-25T19:22:16",
        "slug": "portrait-numero-1",
        "status": "publish",
        "type": "portrait",
        "link": "http://www.mywsebsite.org/portrait/portrait-numero-1/",
        "title": {
            "rendered": "Portrait numéro 1"
        },
        "content": {
            "rendered": "Athènes ou Rome ?<figcaption><figure></figcaption></figure>Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait numéro 1Portrait</p>\n",
            "protected": false
        },
        "excerpt": {
            "rendered": "<p>Ceci est un extrait de l&rsquo;article Ceci est un extrait de l&rsquo;article Ceci est un extrait de l&rsquo;article Ceci est un extrait de l&rsquo;article Ceci est un extrait de  </p>\n",
            "protected": false
        },
        "tags": [
            63,
            78,
            66
        ],
        "acf": {
            "site_internet_": "http://www.mywebsite.org",
            "telephone": "0909090999393",
            "pays": "Argentine",
            "image_entreprise": {
                "ID": 528,
                "id": 528,
                "url": "http://www.mywebsite.org/wp-content/uploads/2019/01/photo-5.jpg"

            }
        }
    }
]



   let  portraits = api
                    .filter(el => el.status === "publish")
                    .map(({id, slug, title, excerpt, date, tags, content}) => ({
                        id,
                        slug,
                        title,
                        excerpt,
                        date,
                        tags,
                        content
                    }));
                    
                    console.log(portraits)

【讨论】：