Question

我正在尝试与processmaker的API进行交互。我已经制作了一个简单的表单来进行身份验证并获取授权令牌，与其他API进行交互时需要使用该令牌。

登录后，我可以使用令牌输出已创建项目的json响应。响应是一个对象数组。

我需要获取Modal的api请求，以便提取这些内容，但是使用map运气不佳。

如何遍历响应并为数组中的每个对象获取prj_uid和prj_name？

prj_uid

字符串化响应：

import React, { useState, useEffect } from "react";
//import ResponsiveEmbed from "react-responsive-embed";

const Tasks = ({ loggedIn }) => {
  const [hasError, setErrors] = useState(false);
  const [projects, setProjects] = useState([]);
  const url = "http://127.0.0.1:8080/api/1.0/workflow/project";

  useEffect(() => {
    let access_token = sessionStorage.getItem("access_token");

    async function fetchData() {
      const response = await fetch(url, {
        method: "GET",
        withCredentials: true,
        timeout: 1000,
        headers: {
          Authorization: "Bearer " + access_token
        }
      });
      response
        .json()
        .then(response => setProjects(response))
        .catch(err => setErrors(err));
    }
    fetchData();
  }, [loggedIn]);


  console.log(JSON.stringify(loggedIn) + " logged in, displaying projects");
  console.log(projects + " projects");
  if (!loggedIn) {
    return <h1>Error</h1>;
  } else {
    return (
      <>
        <p>Login success!</p>
        <h2>Projects:</h2>
        <span>{JSON.stringify(projects)}</span>
        <div>Has error: {JSON.stringify(hasError)}</div>
      </>
    );
  }
};
export default Tasks;

Answer 1

Array.map()是您的答案-您说对了。它非常简单：

let mappedObject = result.map( el => ({ prj_name, prj_uid }) );

el是数组中的每个元素，我们使用仅包含prj_name和prj_uid的对象构造新数组。因为el alraeady具有带有这些名称的那些属性，所以在构造新对象时我们不需要编写{ prj_name: el.prj_name }，这意味着它会隐含，并且只会使用那里的属性名称来解决问题。

mappedObject现在将保存仅由所要求的属性组成的对象数组。

您可能想了解有关地图的更多信息，以便更好地理解地图-Array.map()

Answer 2

如果loggedIn是json对象，则可以执行以下操作：

const uidNameArr = loggedIn.map((item) => { // returns an array of arrays with the values you want.
  return [item.prj_uid, item.prj_name]
})

uidNameArr.forEach(([uid,name]) => {
 console.log(`${name} has a uid of ${uid}`)
})

从对象数组[{“ key”：“ value”}，{“ key”：“ value”}]中获取特定值

2 个答案: