遍历对象并从Javascript中的数组返回键值对

Question

我正在尝试遍历 JSON 对象并将值返回给另一个函数。

我想将其各自对象的quadrant1_x、quadrant1_y...quadrant4_y 的每个值传递给calculatePlot() 函数。但是我收到一个错误Uncaught TypeError: user is undefined

Javascript 看起来像这样：

function generateRandomUser() {
  const user = consumeAPI()
  return calculatePlot(user)
}

function consumeAPI() {
  const graphs = @json($graphs); //received from the backend (Laravel)

  for (let i = 0; i < graphs.length; i++) {
    graphs.forEach((value, key) => {
      console.log([key, value]);
      return {
        x1: (value.quadrant1_x * range),
        y1: (value.quadrant1_y * range),
        x2: (value.quadrant2_x * range),
        y2: (value.quadrant2_y * range),
        x3: (value.quadrant3_x * range),
        y3: (value.quadrant3_y * range),
        x4: (value.quadrant4_x * range),
        y4: (value.quadrant4_y * range),
      }
    })
  }

  function calculatePlot(user) {
    return [{
      x: center + user.x1,
      y: center - user.y1
    }, {
      x: center + user.x2,
      y: center - user.y2
    }, {
      x: center + user.x3,
      y: center - user.y3
    }, {
      x: center + user.x4,
      y: center - user.y4
    }]
  }

  for (let i = 0; i < maxUsers; i++) {
    let plot = generateRandomUser();
    let label = `Mid-point`;
    addUser(plot, label);
    calculateMidPoint(plot);
  }

此代码生成笛卡尔图作为 SVG。因此，需要 x 和 y 的每个象限值来渲染图形。

示例：JSFiddle

Answer 1

看起来你是 consumeAPI 方法没有返回任何东西。所以当你调用它时，它的值是未定义的。

此外，将forEach 循环放在for 循环内以迭代相同的可迭代对象是没有意义的......

不确定为什么要在消耗 api 中进行迭代。事实上，根本不清楚你为什么要迭代。

尝试返回您的值：

async function consumeAPI() { // This will probably require async/await.
  const graphs = await @json($graphs); 
  return graphs;
}

在 generateRandomUser 中使用循环是不合逻辑的，因为您的目标似乎是获得一个随机用户。如果您想获得一个随机用户（数组中的项目），您可以尝试这样的操作：

function generateRandomUser() {
   
   const users = consumeAPI()
   var randomItem = users[Math.floor(Math.random()*users.length)]

   return users[randomItem];
}

我认为所有额外的循环都是不必要的。

Answer 2

将 return 放在 forEach 中只会跳出循环而不返回任何内容。这就是consumeAPI 返回undefined 的原因。 正如@silencedogood 所提到的，for loop 内部不需要forEach。

您可以使用Array.map 作为替代方案，并转换数组内的每个对象，以防有更多对象需要处理。

如果graphs 是您希望转换的对象数组，您只需执行以下操作：graphs.map(graph => {x1: graph.quadrant1_x * range ....}); 并返回转换后的数组。

Answer 3

好的，所以在花了一些时间了解基础知识之后，我意识到这很简单。

学习：

1. 将传入的后端响应从 consumeAPI() 中移出
2. 从中弹出每个对象的值。
3. 将对象返回给 calculatePlot() 函数。

所以现在 consumeAPI() 看起来像这样。

     function consumeAPI() {
            const value = sample_graphs.pop();

            const x_1 = value.quadrant1_x;
            const y_1 = value.quadrant1_y;
            const x_2 = value.quadrant2_x;
            const y_2 = value.quadrant2_y;
            const x_3 = value.quadrant3_x;
            const y_3 = value.quadrant3_y;
            const x_4 = value.quadrant4_x;
            const y_4 = value.quadrant4_y;

            let retObj = {
                x1: x_1 * range,
                y1: y_1 * range,
                x2: x_2 * range,
                y2: y_2 * range,
                x3: x_3 * range,
                y3: y_3 * range,
                x4: x_4 * range,
                y4: y_4 * range,
            };

            return retObj;
           
        }

其余的保持不变。

 function generateRandomUser() {
            const user = consumeAPI();
            return calculatePlot(user);
        }
let sample_graph = [
 {
                quadrant1_x: "0.17",
                quadrant2_x: "0.53",
                quadrant3_x: "-0.48",
                quadrant4_x: "-0.86",
                quadrant1_y: "0.31",
                quadrant2_y: "-0.21",
                quadrant3_y: "-0.60",
                quadrant4_y: "0.50",
            },
    ...

];

// consumeAPI() goes here

for (let i = 0; i < maxUsers; i++) {
            let plot = generateRandomUser();
            addUser(plot);
            calculateMidPoint(plot);
        }

示例：JSFiddle