javascript—json数组中的嵌套对象仅返回第一项的值

igetnqfo 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(377)

我有很多员工。当我通过这个数组进行Map并使用点表示法检索对象的值时，顶级对象的一切都很好，但子对象返回值 employee.jobtitle.jobdesc 只有第一个物体。
记录的所有剩余对象 employee.jobtitle.jobdesc 这些都是空的。下面是数组。我使用map.employees方法遍历数组，并使用（{employee.id}{employee.firstname}{employee.lastname}和{employee.jobtitle.jobdesc}呈现输出。为什么嵌套对象只返回第一个对象（例如edward）的输出，而其他对象不返回任何输出。

[
    {
        "id": 1,
        "firstname": "John",
        "lastname": "Bob",
        "gender": "Male",
        "nationalId": 1212121212,
        "jobtitle": {
            "id": 1,
            "jobdesc": "General Manager"
        }
    },
        {
        "id": 2,
        "firstname": "Edward",
        "lastname": "Rick",
        "gender": "Male",
        "nationalId": 1212121212,
        "jobtitle": {
            "id": 2,
            "jobdesc": "Salesman"
        }
    },
        {
        "id": 3,
        "firstname": "Mike",
        "lastname": "Arther",
        "gender": "Male",
        "nationalId": 1212121212,
        "jobtitle": {
            "id": 3,
            "jobdesc": "Sales"
        }
    },
        {
        "id": 4,
        "firstname": "Nick",
        "lastname": "Johns",
        "gender": "Male",
        "nationalId": 1212121212,
        "jobtitle": {
            "id": 4,
            "jobdesc": "Salesman"
        }
    }
]

Arrays JavaScript nested-object

来源：https://stackoverflow.com/questions/68302964/nested-objects-in-json-array-return-values-for-onlye-first-item

2条答案

按热度按时间

mkh04yzy1#

下面是一个使用数组Map（）的解决方案。你可以在下面的链接中了解更多。
https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/array/map

const employees = [
    {
        "id": 1,
        "firstname": "John",
        "lastname": "Bob",
        "gender": "Male",
        "nationalId": 1212121212,
        "jobtitle": {
            "id": 1,
            "jobdesc": "General Manager"
        }
    },
        {
        "id": 2,
        "firstname": "Edward",
        "lastname": "Rick",
        "gender": "Male",
        "nationalId": 1212121212,
        "jobtitle": {
            "id": 2,
            "jobdesc": "Salesman"
        }
    },
        {
        "id": 3,
        "firstname": "Mike",
        "lastname": "Arther",
        "gender": "Male",
        "nationalId": 1212121212,
        "jobtitle": {
            "id": 3,
            "jobdesc": "Sales"
        }
    },
        {
        "id": 4,
        "firstname": "Nick",
        "lastname": "Johns",
        "gender": "Male",
        "nationalId": 1212121212,
        "jobtitle": {
            "id": 4,
            "jobdesc": "Salesman"
        }
    }
];

const allJobs = employees
.map(employee => employee.jobtitle.jobdesc);

console.log(allJobs);

赞(0）回复(0）举报 2021-09-13

mwngjboj2#

React示例

const employees = [{
    "id": 1,
    "firstname": "John",
    "lastname": "Bob",
    "gender": "Male",
    "nationalId": 1212121212,
    "jobtitle": {
      "id": 1,
      "jobdesc": "General Manager"
    }
  },
  {
    "id": 2,
    "firstname": "Edward",
    "lastname": "Rick",
    "gender": "Male",
    "nationalId": 1212121212,
    "jobtitle": {
      "id": 2,
      "jobdesc": "Salesman"
    }
  },
  {
    "id": 3,
    "firstname": "Mike",
    "lastname": "Arther",
    "gender": "Male",
    "nationalId": 1212121212,
    "jobtitle": {
      "id": 3,
      "jobdesc": "Sales"
    }
  },
  {
    "id": 4,
    "firstname": "Nick",
    "lastname": "Johns",
    "gender": "Male",
    "nationalId": 1212121212,
    "jobtitle": {
      "id": 4,
      "jobdesc": "Salesman"
    }
  }
];

const PersonList = () => {
    return employees.map(employee => (
    <div key={employee.id}>
      <h2>{employee.firstname} {employee.lastname}</h2>
      <h3>{employee.jobtitle.jobdesc}</h3>
      <hr />
    </div>
  ))
}

ReactDOM.render(<PersonList />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app">

</div>

普通javascript示例

const employees = [{
    "id": 1,
    "firstname": "John",
    "lastname": "Bob",
    "gender": "Male",
    "nationalId": 1212121212,
    "jobtitle": {
      "id": 1,
      "jobdesc": "General Manager"
    }
  },
  {
    "id": 2,
    "firstname": "Edward",
    "lastname": "Rick",
    "gender": "Male",
    "nationalId": 1212121212,
    "jobtitle": {
      "id": 2,
      "jobdesc": "Salesman"
    }
  },
  {
    "id": 3,
    "firstname": "Mike",
    "lastname": "Arther",
    "gender": "Male",
    "nationalId": 1212121212,
    "jobtitle": {
      "id": 3,
      "jobdesc": "Sales"
    }
  },
  {
    "id": 4,
    "firstname": "Nick",
    "lastname": "Johns",
    "gender": "Male",
    "nationalId": 1212121212,
    "jobtitle": {
      "id": 4,
      "jobdesc": "Salesman"
    }
  }
];

const appDiv = document.getElementById('app');

employees.forEach(employee => {
  const empDiv = document.createElement('div');
  empDiv.setAttribute('id', employee.id);

  const empH2 = document.createElement('h2');
  empH2.innerText = `${employee.firstname} ${employee.lastname}`;
  empDiv.append(empH2);

  const empH3 = document.createElement('h3');
  empH3.innerText = employee.jobtitle.jobdesc;
  empDiv.append(empH3);

  const divider = document.createElement('hr');
  empDiv.append(divider);

  appDiv.append(empDiv);
});

<div id="app">

</div>

赞(0）回复(0）举报 2021-09-13

我来回答

javascript—json数组中的嵌套对象仅返回第一项的值

2条答案

React示例

普通javascript示例

相关问题

热门标签

最新问答