Question

下面是我的JavaScript JSON结构

[
    [{"key": "firstname", "Value": "David"}, {"key": "lastname", "Value": "Smith"} ],
    [{"key": "firstname", "Value": "Allen"}, {"key": "lastname", "Value": "Grover"} ],
    [{"key": "firstname", "Value": "Randy"}, {"key": "lastname", "Value": "Paul"} ]
]

我想通过删除“键”和“值”并将其制成来在Javascript / Jquery中进行转换

[
    {"firstname" : "David", "lastname" : "Smith"},
    {"firstname" : "Allen", "lastname" : "Grover"},
    {"firstname" : "Randy", "lastname" : "Paul"}
]

此外，我还希望查看是否可以将此json转换为对象的javascript数组，以便可以访问如下所示的属性。

var people =[];

people[0].firstname = "David";
people[1].lastname = "Smith";

Answer 1

您可以使用.map()和.reduce()来实现此功能：

var arr = [
    [{"key": "firstname", "Value": "David"}, {"key": "lastname", "Value": "Smith"} ],
    [{"key": "firstname", "Value": "Allen"}, {"key": "lastname", "Value": "Grover"} ],
    [{"key": "firstname", "Value": "Randy"}, {"key": "lastname", "Value": "Paul"} ]
];

var final = arr.map(keys => {
  // Build the object, by attaching each key to the value
  return keys.reduce((obj, key) => {
    obj[key.key] = key.Value;
    return obj;
  }, {});
});
console.log(final);

现在，关于您的关于handlebars / react / html框架的问题。这是一个示例，您可以通过简单的操作来实现这种污垢：

var arr = [
    [{"key": "firstname", "Value": "David"}, {"key": "lastname", "Value": "Smith"} ],
    [{"key": "firstname", "Value": "Allen"}, {"key": "lastname", "Value": "Grover"} ],
    [{"key": "firstname", "Value": "Randy"}, {"key": "lastname", "Value": "Paul"} ]
];

var final = arr.map(keys => {
  // Build the object, by attaching each key to the value
  return keys.reduce((obj, key) => {
    obj[key.key] = key.Value;
    return obj;
  }, {});
});

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      data: props.data
    };
  }
  
  render() {
    return React.createElement('div', null,
      this.state.data.map(name =>
        React.createElement('div', null,
          `Name: ${name.firstname} ${name.lastname}`
        )
      )
    );
  }
}

ReactDOM.render(React.createElement(App, {data: final}), document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

注意：该代码相当丑陋，因为我不得不使用React.createElement，而在使用JSX时则不需要。

Answer 2

仅map您的初始数据数组：

const data = [
  [{"key": "firstname", "Value": "David"}, {"key": "lastname", "Value": "Smith"} ],
  [{"key": "firstname", "Value": "Allen"}, {"key": "lastname", "Value": "Grover"} ],
  [{"key": "firstname", "Value": "Randy"}, {"key": "lastname", "Value": "Paul"} ]
];

const result = data.map(item => ({
  [item[0]['key']]: item[0]['Value'],
  [item[1]['key']]: item[1]['Value']
}));

console.log(result);

如果每个数据项的人员对象数量可能大于2，则您需要更新过程，在这种情况下，@ FrankerZ答案很好。但是，如果没有，我会使用显式方法（无需额外减少）来提高性能。

Answer 3

它是一个非常不错的功能一线：

let arr = [[{"key": "firstname", "Value": "David"}, {"key": "lastname", "Value": "Smith"} ],[{"key": "firstname", "Value": "Allen"}, {"key": "lastname", "Value": "Grover"} ],[{"key": "firstname", "Value": "Randy"}, {"key": "lastname", "Value": "Paul"} ]]

let o = arr.map(item => item
        .reduce((a, {key, Value}) => ({[key]: Value, ...a} ), {}))

console.log(o)

Answer 4

我将这样做：

const ary = [
  [
    {
      key: "firstname",
      Value: "David"
    },
    {
      key: "lastname",
      Value: "Smith"
    }
  ],
  [
    {
      key: "firstname",
      Value: "Allen"
    },
    {
      key: "lastname",
      Value: "Grover"
    }
  ],
  [
    {
      key: "firstname",
      Value: "Randy"
    },
    {
      key: "lastname",
      Value: "Paul"
    }
  ]
];

let finalResult = ary.map(entry => {
  const result = {};
  entry.forEach(obj => {
    result[obj.key] = obj.Value;
  });
  return result;
});

console.log(JSON.stringify(finalResult, null, 2));
// [
//   {
//     "firstname": "David",
//     "lastname": "Smith"
//   },
//   {
//     "firstname": "Allen",
//     "lastname": "Grover"
//   },
//   {
//     "firstname": "Randy",
//     "lastname": "Paul"
//   }
// ]

Answer 5

您可以通过map

var arrList = [
    [{"key": "firstname", "Value": "David"}, {"key": "lastname", "Value": "Smith"} ],
    [{"key": "firstname", "Value": "Allen"}, {"key": "lastname", "Value": "Grover"} ],
    [{"key": "firstname", "Value": "Randy"}, {"key": "lastname", "Value": "Paul"} ]
];

var readyResult = arrList.map(start => {
  resultSet = {};
  start.forEach(obj => {
    resultSet[obj.key] = obj.Value;
  });
  return resultSet;
});

console.log(readyResult);

Answer 6

var data = [
    [{
        "key": "firstname",
        "Value": "David"
    }, {
        "key": "lastname",
        "Value": "Smith"
    }],

    [{
        "key": "firstname",
        "Value": "Allen"
    }, {
        "key": "lastname",
        "Value": "Grover"
    }],

    [{
        "key": "firstname",
        "Value": "Randy"
    }, {
        "key": "lastname",
        "Value": "Paul"
    }]
];

var result = data.map(v1 => {
    var vtemp = v1.map(v2 => ({
        [Object.values(v2)[0]]: Object.values(v2)[1]
    }))
    return { ...vtemp[0],
        ...vtemp[1]
    }
})

console.log(result);

console.log(result[0].firstname);

键值对Json转换并转换为Javascript / Jquery中的类

6 个答案: