javascript - 对象中数组内的 Lodash Map 数组

Question

"info": {
    "core": [{
        "name": "User",
        "fields": [{
            "field": "name",
        }, {
            "field": "age",
        }]
    }, {
        "name": "Post",
        "fields": [{
            "field": "title",

        }, {
            "field": "body",
        }, {
            "field": "author",
        }]
    }]
}

我如何映射这些结构数据。我想在 WebView 上实现这样的目标:

1.

• 名称值
• 字段
  • 字段值
  • 字段值

2.

• 名称值
• 字段
  • 字段值
  • 字段值

等等...

我尝试使用 lodash map ，如下所示，这是一个好方法吗？

const info = _.map(info.core, function (value: any) {
  const fields = _.map(value.fields, function (fields: any) {
    return field;
  });

  const demo = {
    name: name,
    fields: fields.join('')
  };

  return demo;
});

console.log(demo);

Answer 1

不知道为什么你甚至需要映射。也许我误解了这个问题。

如果你想渲染这些数据，只需按原样解析它，你不应该需要任何更多的转换。

下面我使用 document.write 只是为了简单起见，但更好的方法是直接使用 createElement 等操作 DOM。

var info = {
    "core": [{
        "name": "User",
        "fields": [{
            "field": "name",
        }, {
            "field": "age",
        }]
    }, {
        "name": "Post",
        "fields": [{
            "field": "title",

        }, {
            "field": "body",
        }, {
            "field": "author",
        }]
    }]
}

var w = document.write.bind(document);

info.core.forEach((c,i) => { 
  w(`<p>${i+1}.</p>`);
  w('<ul>');
  w(`<li>${c.name}</li>`);
  w('<li>fields');
  w('<ul>');
  c.fields.forEach((f) => {
    w(`<li>${f.field}</li>`);
  });
  w('</ul>');
  w('</li>');
  w('</ul>');
});