javascript - 嵌套数组内的数据操作

Question

在下面的数据结构中，

data = {
  data: [{
    areas: [{
      sections: [{
          rjf: [{
            type: 'heading-1'
            text: 'Sample Heading',
          }]
        },
        {
          rjf: [{
              type: 'paragraph',
              depth: 0,
              text: 'This website is offered to you by:',
              inlineStyleRanges: [],
              inlineEntityRanges: []
            },
            {
              "type": "ordered-list-item",
              "text": "Ordered Item A",
            },
            {
              "type": "unordered-list-item",
              "text": "Ordered Item B",
            },
            {
              type: 'paragraph',
              depth: 0,
              text: 'This website is offered to you by:',
              inlineStyleRanges: [],
              inlineEntityRanges: []
            },
            {
              "type": "ordered-list-item",
              "text": "Ordered Item A",
            },
            {
              "type": "unordered-list-item",
              "text": "Ordered Item B",
            }
          ]
        }
      ]
    }]
  }]
};

我试图将 ordered-list-item 和 unordered-list-item 的所有类型分组到新对象中。像下面这样，

{
    "type": 'list',
    "items": [
      {
        "type": "ordered-list-item",
        "text": "Ordered Item A",
      },
      {
        "type": "unordered-list-item",
        "text": "Ordered Item B",
      }
    ]
  }

经过这么多高音之后，我提出了以下解决方案。这很好用。但有一个问题，在 rjf 中，如果 ordered-list-item 和 unordered-list-item 未找到，则不幸的是，应该不会发生任何事情并且为空 list 已添加到 rjf。

下面是代码片段，请帮我解决这个问题。

const data = {
  data: [{
    areas: [{
      sections: [{
          rjf: [{
            text: 'Sample Heading',
          }]
        },
        {
          rjf: [{
              type: 'paragraph',
              depth: 0,
              text: 'This website is offered to you by:',
              inlineStyleRanges: [],
              inlineEntityRanges: []
            },
            {
              "type": "ordered-list-item",
              "text": "Ordered Item A",
            },
            {
              "type": "unordered-list-item",
              "text": "Ordered Item B",
            },
            {
              type: 'paragraph',
              depth: 0,
              text: 'This website is offered to you by:',
              inlineStyleRanges: [],
              inlineEntityRanges: []
            },
            {
              "type": "ordered-list-item",
              "text": "Ordered Item A",
            },
            {
              "type": "unordered-list-item",
              "text": "Ordered Item B",
            }
          ]
        }
      ]
    }]
  }]
};
const moveToNewObject = (data) => {
  const sections = data[0].areas[0].sections;
  sections.forEach(data => {
    let list = data.rjf;
    let a = list.map((entry, index) => {
      return { ...entry,
        index,
        use: entry.type !== 'unordered-list-item' && entry.type !== 'ordered-list-item'
      }
    }).filter(entry => entry.use).map((entry, index, entries) => {
      const end = index < entries.length - 1 ? entries[index + 1].index : list.length - entry.index;
      return [{
        type: entry.type,
        text: entry.text
      }, {
        type: 'list',
        items: list.slice(entry.index + 1, entry.index + end)
      }]
    });
    console.log(a);
  });
}
console.log(moveToNewObject(data.data));

Answer 1

您的数据具有非常奇怪的结构，这使得诚实变得更加困难。下面的代码片段使用了一个在所有部分上使用 map 的函数，并且如果 rjf 类型为 'unordered-list-item' 或 'ordered-list-item'，它将其移动到 list 类型的新 rjf 作为 items。希望这是您想要的。

如果您想要更清晰的代码格式，这里有一个 fiddle : https://jsfiddle.net/qce2vLr3/

const data = {
  data: [
    {
      areas: [
        {
          sections: [
            {
              rjf: [
                {
                  text: 'Sample Heading',
                }
              ]
            },
            {
              rjf: [
                {
                  type: 'paragraph',
                  depth: 0,
                  text: 'This website is offered to you by:',
                  inlineStyleRanges: [],
                  inlineEntityRanges: []
                },
                {
                  "type": "ordered-list-item",
                  "text": "Ordered Item A",
                },
                {
                  "type": "unordered-list-item",
                  "text": "Ordered Item B",
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};

const moveToNewObject = (data) => {
	const sections = data[0].areas[0].sections; // why is data an array?
  return sections.map((section) => {
  	if (section.rjf) {
    	const looseItems = section.rjf.filter((rjf) => rjf.type && ['ordered-list-item', 'unordered-list-item'].includes(rjf.type));
      if (looseItems.length) {
      	return { 
        	rjf: [
          	...section.rjf,
          	{ 
          		type: 'list',
            	items: looseItems 
          	}
          ].filter((rjf) => rjf.type && !['ordered-list-item', 'unordered-list-item'].includes(rjf.type))
        }
      }
      return section;
    }
    return section;
  })
}

data.data[0].areas[0].sections = moveToNewObject(data.data);
console.log(data.data);

更新

这是一个按多个标题对列表进行“分组”的解决方案:https://jsfiddle.net/pkLyd0gh/

const data = {
  data: [
    {
      areas: [
        {
          sections: [
            {
              rjf: [
                {
                  text: 'Sample Heading',
                }
              ]
            },
            {
              rjf: [
                {
                  "type": "heading-1",
                  "text": "A title",
                },
                {
                  "type": "ordered-list-item",
                  "text": "Ordered Item A",
                },
                {
                  "type": "unordered-list-item",
                  "text": "Ordered Item B",
                },
                {
                  "type": "heading-2",
                  "text": "A title",
                },
                {
                  "type": "ordered-list-item",
                  "text": "Ordered Item C",
                },
                {
                  "type": "unordered-list-item",
                  "text": "Ordered Item D",
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};

const reformattedSections = (data) => {
	const sections = data[0].areas[0].sections;
  const listItemTypes = ['unordered-list-item', 'ordered-list-item'];
  return sections.map((section) => {
  	let lastHeadingIndex = -1;
  	return section.rjf.reduce((acc, current, index) => {
    	if (!current.type || !listItemTypes.includes(current.type)) {
      	lastHeadingIndex = acc.length;
        return [...acc, current]
      }
      else {
      	let listObject = acc.find((el, i) => i > lastHeadingIndex && i < index && el.type === 'list');
        if (!listObject) {
        	listObject = {
          	type: 'list',
            items: [current]
          }
          return [...acc, listObject];
        }
        listObject.items = [...listObject.items, current];
      	return acc;
      }
    }, [])
  })
}

data.data[0].areas[0].sections = reformattedSections(data.data);
console.log('sections', data.data);