如何将json结构更改为另一个json结构

时间:2016-07-25 11:59:37

标签: javascript html json html5 angular

我想改变我的json结构,我该怎么做?

我得到一个看起来像这样的json:

 body: {
     "111111": {
         "name": "exp1",
         "status": 10000
     },
     "222222": {
         "name": "exp2",
         "status": 20000
     },
     "333333": {
         "name": "exp3",
         "status": 30000
     }
 }

但我在这个结构中需要它:

 body: {
     bulks: [{
         "id": "111111",
         "name": "exp1",
         "status": 100000
     }, {
         "id": "222222",
         "name": "exp2",
         "status": 200000
     }, {
         "id": "333333",
         "name": "exp3",
         "status": 300000
     }]
 }

因为我的html我想这样读:

<div *ngIf="showingList">
  <div class="list-bg"  *ngFor="#bulk of listBulks | async">
    ID: {{bulk.id}} name of item: {{bulk.name}}
  </div>
</div>

3 个答案:

答案 0 :(得分:4)

使用Object#entries和Array#map with spread operator。

const data={body:{111111:{name:"exp1",status:1e4},222222:{name:"exp2",status:2e4},333333:{name:"exp3",status:3e4}}};


const res = {body:{bulk:Object
.entries(data.body)
.map(a=>({id: a[0], ...a[1]}))}};

console.log(res);

答案 1 :(得分:1)

您可以使用reduce:

来完成
var body = {
    "111111": {
        "name": "exp1",
        "status": 10000
    },
    "222222": {
        "name": "exp2",
        "status": 20000
    },
    "333333": {
        "name": "exp3",
        "status": 30000
    }
}

var bodyArray = Object.keys(body).reduce(function(result, key) {
    var item = body[key];
    item.id = key;
    result.push(item)
    return result;
}, []);

答案 2 :(得分:0)

作为map()的最简单替代方法,可以使用const body = { "111111": { "name": "exp1", "status": 10000 }, "222222": { "name": "exp2", "status": 20000 }, "333333": { "name": "exp3", "status": 30000 } } const newArray = Object.keys(body).map(function(key) { const newObject = { id: key, ...body[key] }; return newObject; }); console.log(newArray);函数。

// webpack.config.js

module.exports = {
...
  module: {
    rules: [
      ...
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
        ]
      }
      ...
   ]
...
};