Question

我从api调用中获取数据并接收键值对的对象。我需要将此对象拆分，以便每个键值对成为无序列表中的自己的列表项。

{
    "base": "USD",
    "date": "2018-05-30",
    "rates": {
        "AUD": 1.3247077029,
        "BGN": 1.6813961486,
        "BRL": 3.7063273728,
        "CAD": 1.2975412655,
        "CHF": 0.9897696011,
        "CNY": 6.4196182944,
        "CZK": 22.2102819807,
        "DKK": 6.3988995873,
        "GBP": 0.7522352132,
        "HKD": 7.8462861073,
        "HRK": 6.3525618982,
        "HUF": 274.7334938102,
        "IDR": 13947.6530261348,
        "ILS": 3.5790061898,
        "INR": 67.3899587345,
        "ISK": 105.6568088033,
        "JPY": 108.9752407153,
        "KRW": 1079.272696011,
        "MXN": 19.6711657497,
        "MYR": 3.9854711142,
        "NOK": 8.2069291609,
        "NZD": 1.4344910591,
        "PHP": 52.6203576341,
        "PLN": 3.7083046768,
        "RON": 3.9926925722,
        "RUB": 62.2279917469,
        "SEK": 8.8362276479,
        "SGD": 1.3400962861,
        "THB": 32.0598349381,
        "TRY": 4.4547799175,
        "USD": 1,
        "ZAR": 12.5649931224,
        "EUR": 0.8596973865
    }
}

^^^这是我从api收到的数据，并希望费率中的每一行显示为自己的列表项。我应该使用for ... in循环还是有办法使用Object.keys / Object.values来分割每个键值对？

Answer 1

从rates对象中获取所有键，然后使用键（国家/地区代码）作为键及其原始rates对象的值创建新数组。

＆＃13;

const data={"base":"USD","date":"2018-05-30","rates":{"AUD":1.3247077029,"BGN":1.6813961486,"BRL":3.7063273728,"CAD":1.2975412655,"CHF":.9897696011,"CNY":6.4196182944,"CZK":22.2102819807,"DKK":6.3988995873,"GBP":.7522352132,"HKD":7.8462861073,"HRK":6.3525618982,"HUF":274.7334938102,"IDR":13947.6530261348,"ILS":3.5790061898,"INR":67.3899587345,"ISK":105.6568088033,"JPY":108.9752407153,"KRW":1079.272696011,"MXN":19.6711657497,"MYR":3.9854711142,"NOK":8.2069291609,"NZD":1.4344910591,"PHP":52.6203576341,"PLN":3.7083046768,"RON":3.9926925722,"RUB":62.2279917469,"SEK":8.8362276479,"SGD":1.3400962861,"THB":32.0598349381,"TRY":4.4547799175,"USD":1,"ZAR":12.5649931224,"EUR":.8596973865}};

const keys = Object.keys(data.rates);
const rates = keys.map(key => ({ [key]: data.rates[key]}));

console.log(rates);

＆＃13;

Answer 2

您还可以使用Object.entries()，reduce()和concat()方法获取所需结果。

<强>样本

＆＃13;

const obj = {"base":"USD","date":"2018-05-30","rates":{"AUD":1.3247077029,"BGN":1.6813961486,"BRL":3.7063273728,"CAD":1.2975412655,"CHF":.9897696011,"CNY":6.4196182944,"CZK":22.2102819807,"DKK":6.3988995873,"GBP":.7522352132,"HKD":7.8462861073,"HRK":6.3525618982,"HUF":274.7334938102,"IDR":13947.6530261348,"ILS":3.5790061898,"INR":67.3899587345,"ISK":105.6568088033,"JPY":108.9752407153,"KRW":1079.272696011,"MXN":19.6711657497,"MYR":3.9854711142,"NOK":8.2069291609,"NZD":1.4344910591,"PHP":52.6203576341,"PLN":3.7083046768,"RON":3.9926925722,"RUB":62.2279917469,"SEK":8.8362276479,"SGD":1.3400962861,"THB":32.0598349381,"TRY":4.4547799175,"USD":1,"ZAR":12.5649931224,"EUR":.8596973865}};

let result = Object.entries(obj.rates).reduce((r,v)=>r.concat({[v[0]]:v[1]}),[]);

console.log(result);

＆＃13;

.as-console-wrapper {max-height: 100% !important;top: 0;}

＆＃13;

Answer 3

您可以使用键/值对直接映射具有新对象的条目。

var data = { base: "USD", date: "2018-05-30", rates: { AUD: 1.3247077029, BGN: 1.6813961486, BRL: 3.7063273728, CAD: 1.2975412655, CHF: 0.9897696011, CNY: 6.4196182944, CZK: 22.2102819807, DKK: 6.3988995873, GBP: 0.7522352132, HKD: 7.8462861073, HRK: 6.3525618982, HUF: 274.7334938102, IDR: 13947.6530261348, ILS: 3.5790061898, INR: 67.3899587345, ISK: 105.6568088033, JPY: 108.9752407153, KRW: 1079.272696011, MXN: 19.6711657497, MYR: 3.9854711142, NOK: 8.2069291609, NZD: 1.4344910591, PHP: 52.6203576341, PLN: 3.7083046768, RON: 3.9926925722, RUB: 62.2279917469, SEK: 8.8362276479, SGD: 1.3400962861, THB: 32.0598349381, TRY: 4.4547799175, USD: 1, ZAR: 12.5649931224, EUR: 0.8596973865 } },
    rates = Object.entries(data.rates).map(([k, v]) => ({ [k]: v }));

console.log(rates);

.as-console-wrapper { max-height: 100% !important; top: 0; }

我需要将键值对的对象转换为单独的列表项

3 个答案: