时间戳

首页 > 解决方案 > 按字段过滤本地存储数据并输出到页面

javascript - 按字段过滤本地存储数据并输出到页面

问题描述

我正在努力弄清楚如何实现某些目标。我有一种地图，您可以在其中单击一个国家并输入一些数据。当数据提交时，我将其存储在本地存储中

$('#question-form').on('submit', function(e){
    e.preventDefault();

    let country = $('#hidden-input').val();
    let questionOne = $('#questionOne').val();
    let questionTwo = $('#questionTwo').val();
    
    let clientObj = {
        country : country,
        questionOne : questionOne,
        questionTwo: questionTwo
    };
    
    let clientsArr = [];

    if(!localStorage.getItem('Countries')) {
        clientsArr.push(clientObj);
        localStorage.setItem('Countries', JSON.stringify(clientsArr));
    } else {
        clientsArr = JSON.parse(localStorage.getItem('Countries'));
        clientsArr.push(clientObj);
        localStorage.setItem('Countries', JSON.stringify(clientsArr));
    }

    $('#myModal').modal('hide');
});

一段时间后，我的本地存储充满了以下形式的数据

[{country: "United Kingdom", questionOne: "test", questionTwo: "test"},…]
    0: {country: "United Kingdom", questionOne: "test", questionTwo: "test"}
    1: {country: "Ireland", questionOne: "test 2", questionTwo: "test 2"}
    2: {country: "Iran", questionOne: "Test 3", questionTwo: "Test 3"}
    3: {country: "United Kingdom", questionOne: "Test 4", questionTwo: "Test 4"}

我想要做的是显示这些结果。所以在我的页面上我有一些占位符

<div id="display">
    <div id="country-name"></div>
    <div class="question-one-data"></div>
    <div class="question-two-data"></div>
</div>

然后我到了这一点

if (!localStorage.getItem('Countries')) {
    $('#display').html('<p>No results to display</p>');
} else {
    console.log(JSON.stringify(localStorage.getItem('Countries')))
}

因此，如果没有数据，它将让用户知道。在 else 我有点卡住了。现在显示数据不是问题。我正在努力的是过滤。因此，我希望将国家/地区设置为国家/地区名称占位符，但是，它应该只显示一次国家/地区。所以我基本上需要按国家过滤我的结果。在我的示例中，您可以看到英国有两个条目，所以我之后的输出是

<div id="display">
    <div id="country-name">United Kingdom</div>
    <div class="question-one-data">test</div>
    <div class="question-two-data">test</div>
    <hr>
    <div class="question-one-data">Test 4</div>
    <div class="question-two-data">Test 4</div>
    <hr>
    <div id="country-name">Ireland</div>
    <div class="question-one-data">test 2</div>
    <div class="question-two-data">test 2</div>
    ...
</div>

我将如何按国家名称过滤我的数据，然后实现如上所示的结构？

谢谢

标签： javascriptjquerylocal-storage

解决方案

假设您将数据保存在一个名为answers. 您可以使用以下命令创建所有唯一国家/地区名称的列表：

const countries = Array.from(new Set(answers.map(a => a.country)))

然后，您可以重塑您的数据并将给定国家/地区的所有答案存储在一个新数组中：

const countriesWithAnswers = countries.map(countryName => ({
  name: countryName,
  answers: answers
    .filter(answer => answer.country === countryName)
    .map(({ questionOne, questionTwo }) => ({ questionOne, questionTwo }))
}))

answers要显示数据，您可以在数组中迭代countriesWithAnswers.

推荐阅读