从JSON反应地图对象和嵌入式对象,并转换为单个数组以获取状态

时间:2018-11-02 15:19:44

标签: json reactjs

我有一个React组件,它正在componentDidMount上的JSON文件上执行axios.get调用。 JSON的对象带有嵌入式对象,如下所示:

这是初始格式:

  "objects": {
      "5bd4a1a4-f806-4355-bf34-1b4054c2881e": {
         "type": "tosca.resourceTypes.TPE",
         "label": "BVI 610",
         "value": "801070217_BVI610"
        },

这是我最初的axios.get调用后的console.log。

5bd4a1a0-fd74-4a9f-b7e2-c5ab15360839: {type: "tosca.resourceTypes.TPE", label: 
"Bundle-Ether 33", value: "801070217_Bundle-Ether33"}

因此,我可以使用以下命令成功获取第一项的列表:

const finalTree = Object.keys(fullTree).map(({item}) => ({id: fullTree[item]}));

但是我要做的是将finalTree转换成一个数组,该数组还包含每个项目的类型,标签和值,然后将其置于状态。我一直在弄乱jsonQuery,但它对我不起作用,并且在处理JSON数据时我是一个相对的菜鸟。预先感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

您可以使用Object.keys获取所有键的数组,并使用map为每个键创建一个新对象,该键包含其对象和键中的所有字段。

示例

const obj = {
  "5bd4a1a4-f806-4355-bf34-1b4054c2881e": {
    "type": "tosca.resourceTypes.TPE",
    "label": "BVI 610",
    "value": "801070217_BVI610"
  }
};

const result = Object.keys(obj).map(key => ({
  ...obj[key],
  id: key
}));

console.log(result);

答案 1 :(得分:0)

variable_name_string = "VARIABLE"

hist = qplot(VARIABLE, data = full_data_noNO, geom="histogram", 
fill=I("lightblue"))+
theme_light()

avg_price = full_data_noNO %>% 
group_by(Month, Country) %>%
dplyr::summarize(avg = mean(VARIABLE, na.rm = 
TRUE))

#line graph for different countries over time
line = ggplot(data=avg_price, aes(x=anydate(Month), y=VARIABLE, 
group=Country)) +
xlab("Date")+
ylab(variable_name_string)+
geom_line(aes(color=Country), size = 1)+
theme_light()

#boxplot over different years
avg_price2 = avg_price
avg_price2$Month = format(as.Date(anydate(avg_price$Month), "%Y-%m-%d"), 
"%Y")

box = ggplot(avg_price2, aes(x = Month, y=VARIABLE, fill = Month)) + 
geom_boxplot()+
xlab("Date")+
ylab(variable_name_string)+
guides(fill=FALSE)+
theme_light()

var_name = grid.text(variable_name_string, gp=gpar(fontsize=20))

#merge plot into one window
grid.arrange(var_name, hist, line, box, ncol=2)