【问题标题】:how to search json array for value and then erase the index if value is found如何在 json 数组中搜索值,然后在找到值时擦除索引
【发布时间】:2021-10-26 02:39:41
【问题描述】:

我得到了这个 json 字符串,我需要从中解析和删除数据,但我不确定如何去做。假设我有以下 json:

<input 
 name="uppyResult"
 type="hidden"
 value="[{
  &quot;successful&quot;:[
   {&quot;id&quot;:&quot;uppy-a8geo/fw/400x400/jpg-1d-2v-1e-image/jpeg-10097-1626922525568&quot;},
   {&quot;id&quot;:&quot;uppy-maxresdefault/jpg-1e-image/jpeg-81700-1626406845772&quot;}
  ],
  &quot;failed&quot;:[],
  &quot;uploadID&quot;:&quot;ckss6e4xv00023h63uov94n5e&quot;
 }]"
>

我使用document.getElementsByName("uppyResult")[0].value; 获取元素,然后使用const obj = JSON.parse(json) 解析它。

然后我如何只删除 id: uppy-maxresdefault/jpg-1e-image/jpeg-81700-1626406845772 所在的索引并将其作为字符串重新插入到 DOM 中?

编辑:以前的版本有 " 而不是 &amp;quot; 里面 value

【问题讨论】:

    标签: javascript uppy


    【解决方案1】:

    你可以这样做:

    const data = [{
      "successful":[
       {"id":"uppy-a8geo/fw/400x400/jpg-1d-2v-1e-image/jpeg-10097-1626922525568"},
       {"id":"uppy-maxresdefault/jpg-1e-image/jpeg-81700-1626406845772"}
      ],
      "failed":[],
      "uploadID":"ckss6e4xv00023h63uov94n5e"
     }]
    
    const idToRemove = "uppy-maxresdefault/jpg-1e-image/jpeg-81700-1626406845772"
    const result = data.map(obj => Object.entries(obj).reduce((a, [k, v]) => {
      a[k] = Array.isArray(v) 
        ? v.filter(item => item.id !== idToRemove) 
        : v
      return a
    }, {}))
    
    console.log(result)

    【讨论】:

      【解决方案2】:

      const data = [{
        "successful":[
         {"id":"uppy-a8geo/fw/400x400/jpg-1d-2v-1e-image/jpeg-10097-1626922525568"},
         {"id":"uppy-maxresdefault/jpg-1e-image/jpeg-81700-1626406845772"}
        ],
        "failed":[],
        "uploadID":"ckss6e4xv00023h63uov94n5e"
       }];
       
      const toRemove = "uppy-maxresdefault/jpg-1e-image/jpeg-81700-1626406845772"; 
      data.forEach(item => {
        Object.values(item).forEach(array => {
          if (!Array.isArray(array))
              return;
          const index = array.findIndex(elm => elm.id === toRemove);
          if (index > -1)
            array.splice(index, 1);
        });
      });
      
      console.log(data);

      【讨论】:

      • 关闭,谢谢!!!!因为这是一个隐藏的输入,我仍然需要 DOM 来反映这些变化。我认为这可能涉及将 json 转换回字符串。我该怎么做?
      • 查找 JSON.stringify
      【解决方案3】:

      您并不是特别清楚要删除什么,但有两种可能性:

      • 第一个过滤器使用分解并查找 id 匹配的任何元素。
      • 第二个过滤器从匹配搜索 ID 的成功数组中删除所有条目。请注意,不要改变原始数据 - 复制数组中的每个对象并更改它们(不确定这是否重要)。

      为值数组添加了一个额外元素以进行测试。

      let value='[{ \
        "successful":[ \
         {"id":"uppy-a8geo/fw/400x400/jpg-1d-2v-1e-image/jpeg-10097-1626922525568"}, \
         {"id":"uppy-maxresdefault/jpg-1e-image/jpeg-81700-1626406845772"} \
        ], \
        "failed":[], \
        "uploadID":"ckss6e4xv00023h63uov94n5e" \
       },{ \
        "successful":[ \
         {"id":"uppy-a8geo/fw/400x400/jpg-1d-2v-1e-image/jpeg-10097-1626922525568"}, \
         {"id":"not-uppy-maxresdefault/jpg-1e-image/jpeg-81700-1626406845772"} \
        ], \
        "failed":[], \
        "uploadID":"some_other_id" \
       }]'
       
      let data = JSON.parse(value)
      var filter_data = value => data.filter( ({successful}) => ! successful.find( ({id}) => id == value ))
      var filter_successful = value => data.map( elem => {
        elem = Object.assign( {}, elem ) // copy element to avoid mutation
        elem.successful = elem.successful.filter( ({id}) => id != value )
        return elem
      })
       
      console.log('Remove any object from the values array where the search id is in the successful array')
      console.log(filter_data('uppy-maxresdefault/jpg-1e-image/jpeg-81700-1626406845772'))
      console.log('Remove successful entries that match the search id from all values')
      console.log(filter_successful('uppy-a8geo/fw/400x400/jpg-1d-2v-1e-image/jpeg-10097-1626922525568'))

      如果您想从数组的“值”的任何成员中删除与搜索词匹配的任何对象,那么@Amir MB 的技术是优越的——.reduce() 可以做到这一点并创建副本,避免突变。同样,不清楚这是否是一项要求。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-06-25
        • 2021-12-01
        相关资源
        最近更新 更多