键值对Json转换并转换为Javascript/Jquery中的类 [英] Key-Value Pair Json transformation and conversion into a class in Javascript / Jquery

问题描述

下面是我的Javascript JSON结构

Below is the structure of my JSON in Javascript

[
    [{"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中进行转换

I want to transform this in Javascript / Jquery by removing "key" and "value" and make it

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

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

And in addition am also looking to see if I can convert this json into javascript array of objects where I can access the properties like below would be great.

var people =[];

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

推荐答案

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

You can use .map() and .reduce() to achieve this functionality:

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框架问题.这是一个示例，您可以通过简单的反应来实现这种污垢:

Now, onto your question about handlebars/react/html framework. Here is an example of how you can do this dirt simple in react:

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，使用

Note: This code is rather ugly, as I have to resort to using React.createElement, something of which is not required when using JSX.

这篇关于键值对Json转换并转换为Javascript/Jquery中的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！