首页 > 解决方案 > 通过 JavaScript reactjs 遍历复杂的嵌套 json 对象

问题描述

我发现其他人之前也问过类似的问题。由于我是 ReactJs 和 JavaScript 的新手,我无法让它适用于我的复杂对象。此时我需要遍历所有数据并在 console.log() 中打印所有值。

再次重复我的文字,因为我需要更多解释才能发布问题。否则是不允许的。对不起。

我发现其他人之前也问过类似的问题。由于我是 ReactJs 和 JavaScript 的新手,我无法让它适用于我的复杂对象。此时我需要遍历所有数据并在 console.log() 中打印所有值。

这是 JSON 数据的一部分:-

[
    {
        "_id": "1",
        "name": "Warehouse A",
        "location": {
            "lat": "47.13111",
            "long": "-61.54801"
        },
        "cars": {
            "location": "West wing",
            "vehicles": [
                {
                    "_id": 1,
                    "make": "Volkswagen",
                    "model": "Jetta III",
                    "year_model": 1995,
                    "price": 12947.52,
                    "licensed": true,
                    "date_added": "2018-09-18"
                },
                {
                    "_id": 2,
                    "make": "Chevrolet",
                    "model": "Corvette",
                    "year_model": 2004,
                    "price": 20019.64,
                    "licensed": true,
                    "date_added": "2018-01-27"
                },
                {
                    "_id": 3,
                    "make": "Ford",
                    "model": "Expedition EL",
                    "year_model": 2008,
                    "price": 27323.42,
                    "licensed": false,
                    "date_added": "2018-07-03"
                }
            ]
        }
    },
    {
        "_id": "2",
        "name": "Warehouse B",
        "location": {
            "lat": "15.95386",
            "long": "7.06246"
        },
        "cars": {
            "location": "East wing",
            "vehicles": [
                {
                    "_id": 1,
                    "make": "Ford",
                    "model": "Econoline E250",
                    "year_model": 1994,
                    "price": 26605.54,
                    "licensed": true,
                    "date_added": "2018-05-13"
                },
                {
                    "_id": 2,
                    "make": "Lexus",
                    "model": "GX",
                    "year_model": 2005,
                    "price": 27395.26,
                    "licensed": false,
                    "date_added": "2017-11-12"
                }
            ]
        }
    }
]

更新

这是后端的 Github 链接: https ://github.com/masiboo/CarJson 它的根目录中有 docker-compose.yml。请尝试docker-compose up -d它将运行 mongodb 和后端

前端 Github 链接:- https://github.com/masiboo/json-frontend

请尝试npm install && npm start它将运行前端。只需检查浏览器控制台。在那里你会看到数据。在 ShowJson.js 组件第 35 到 50 行注释。因为它坏了。

标签: javascriptreactjs

解决方案


推荐阅读