從javascript嵌套的json數組中獲取值

Question

如何從深度嵌套的json數組中獲取值。
我需要從以下JSON得到所有對（nameValue和值）

var json = [{ 
       name: 'Firstgroup', 
       elements: [{ 
        name: 'Field1', 
        elements: [{ 
         name: 'country32', 
         elements: [{ 
          nameValue: 'city1', 
          value: 2025 
         }] 
        }] 
       }, 
        { 
         name: 'Field2', 
         elements: [{ 
          name: 'country22', 
          elements: [{ 
           nameValue: 'city2', 
           value: 1875 
          }] 
         }, 
          { 
           name: 'country12', 
           elements: [{ 
            nameValue: 'city3', 
            value: 1810 
           }] 
          }] 
        }] 
      }, 
       { 
        name: 'Secondgroup', 
        elements: [{ 
         name: 'Field1', 
         elements: [{ 
          name: 'country52', 
          elements: [{ 
           nameValue: 'city4', 
           value: 1310 
          }, 
           { 
            nameValue: 'city5', 
            value: 1125 
           }] 
         }] 
        }, 
         { 
          name: 'Field3', 
          elements: [{ 
           name: 'country42', 
           elements: [{ 
            nameValue: 'city6', 
            value: 1100 
           }] 
          }] 
         }] 
       }]; 

我設法拿到了第一對這個下面的代碼

function getDataProvider(array) 
    { 
     var dataPoint = []; 
     var elements = 'elements'; 
     var name = 'nameValue'; 
     var value = 'value'; 

     var i, j, len; 

     for (j = 0; j < array.length; j++) { 
      i = array[j]; 
      if (i[elements]) { 
       this.getDataProvider(i[elements]); 
      } else { 
       dataPoint.push({ 
        name: i[name], 
        value: i[value] 
       }); 
      } 
     } 
     return dataPoint; 
    }  

如何獲得所有對在上面的json中給出這個json是動態的，它的深度是未知的，但它將包含（名稱值和值）對

Answer 1

你可以做一個遞歸函數，調用自身時，它有多個元素，並添加值，其結果是，每當遇到一個結果。

var getNameAndValues = function(arr) { 
 
    var nameValuePairs = []; 
 
    for (var i = 0, len = arr.length; i < len; i++) { 
 
    var item = arr[i]; 
 
    if (item.value && item.nameValue) { 
 
     nameValuePairs.push(item); 
 
    } 
 
    if (item.elements) { 
 
     nameValuePairs = nameValuePairs.concat(getNameAndValues(item.elements)); 
 
    } 
 
    } 
 
    return nameValuePairs; 
 
}; 
 

 
var json = [{ 
 
       name: 'Firstgroup', 
 
       elements: [{ 
 
        name: 'Field1', 
 
        elements: [{ 
 
         name: 'country32', 
 
         elements: [{ 
 
          nameValue: 'city1', 
 
          value: 2025 
 
         }] 
 
        }] 
 
       }, 
 
        { 
 
         name: 'Field2', 
 
         elements: [{ 
 
          name: 'country22', 
 
          elements: [{ 
 
           nameValue: 'city2', 
 
           value: 1875 
 
          }] 
 
         }, 
 
          { 
 
           name: 'country12', 
 
           elements: [{ 
 
            nameValue: 'city3', 
 
            value: 1810 
 
           }] 
 
          }] 
 
        }] 
 
      }, 
 
       { 
 
        name: 'Secondgroup', 
 
        elements: [{ 
 
         name: 'Field1', 
 
         elements: [{ 
 
          name: 'country52', 
 
          elements: [{ 
 
           nameValue: 'city4', 
 
           value: 1310 
 
          }, 
 
           { 
 
            nameValue: 'city5', 
 
            value: 1125 
 
           }] 
 
         }] 
 
        }, 
 
         { 
 
          name: 'Field3', 
 
          elements: [{ 
 
           name: 'country42', 
 
           elements: [{ 
 
            nameValue: 'city6', 
 
            value: 1100 
 
           }] 
 
          }] 
 
         }] 
 
       }]; 
 

 
var result = getNameAndValues(json); 
 
var asString = ""; 
 
for (var i = 0, len = result.length; i < len; i++) { 
 
    var item = result[i]; 
 
    asString += item.nameValue + ": " + item.value + "<br/>"; 
 
} 
 
document.body.innerHTML = asString;

Answer 2

您可以使用迭代和遞歸方法獲取數組中想要的屬性。

function getKeyValue(array) { 
 
    var result = []; 
 
    array.forEach(function iter(o) { 
 
     if (o.elements) { 
 
      o.elements.forEach(iter); 
 
      return; 
 
     } 
 
     result.push({ name: o.nameValue, value: o.value }); 
 
    }); 
 
    return result; 
 
} 
 

 
var data = [{ name: 'Firstgroup', elements: [{ name: 'Field1', elements: [{ name: 'country32', elements: [{ nameValue: 'city1', value: 2025 }] }] }, { name: 'Field2', elements: [{ name: 'country22', elements: [{ nameValue: 'city2', value: 1875 }] }, { name: 'country12', elements: [{ nameValue: 'city3', value: 1810 }] }] }] }, { name: 'Secondgroup', elements: [{ name: 'Field1', elements: [{ name: 'country52', elements: [{ nameValue: 'city4', value: 1310 }, { nameValue: 'city5', value: 1125 }] }] }, { name: 'Field3', elements: [{ name: 'country42', elements: [{ nameValue: 'city6', value: 1100 }] }] }] }], 
 
    result = getKeyValue(data); 
 

 
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

它返回對每個遞歸調用的陣列的版本。

function getKeyValue(array) { 
 
    return array.reduce((r, o) => r.concat(
 
     o.elements 
 
      ? getKeyValue(o.elements) 
 
      : { name: o.nameValue, value: o.value } 
 
    ), []); 
 
} 
 

 
var data = [{ name: 'Firstgroup', elements: [{ name: 'Field1', elements: [{ name: 'country32', elements: [{ nameValue: 'city1', value: 2025 }] }] }, { name: 'Field2', elements: [{ name: 'country22', elements: [{ nameValue: 'city2', value: 1875 }] }, { name: 'country12', elements: [{ nameValue: 'city3', value: 1810 }] }] }] }, { name: 'Secondgroup', elements: [{ name: 'Field1', elements: [{ name: 'country52', elements: [{ nameValue: 'city4', value: 1310 }, { nameValue: 'city5', value: 1125 }] }] }, { name: 'Field3', elements: [{ name: 'country42', elements: [{ nameValue: 'city6', value: 1100 }] }] }] }], 
 
    result = getKeyValue(data); 
 

 
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }