Построить JSON Array с помощью Loop - PullRequest
Новая
       2

Построить JSON Array с помощью Loop

0 голосов
/ 27 февраля 2019

Я пытаюсь построить массив JSON через цикл, где input className и значение будут использоваться в качестве JSON obj и key.Но я не могу создать его и не могу найти информацию о том, как его создать.Я привел пример ниже, и мне нужна помощь в комментариях, и я хочу, чтобы console.log(json_array); вернул {"class_1":"val_1", "class_2":"val_2", "class_3":"val_3", "class_4":"val_4", "class_5":"val_5"}.Как я могу создать массив JSON, как это?Также возможно ли сделать массив JSON с помощью этого метода? 

document.querySelector("button").onclick = function() {
    var json_array = [];
    document.querySelectorAll("div input").forEach(x => {
        json_array.push(x.className.toString() : x.value.toString()); // DOESN'T WORK
    });
    console.log(json_array);
};
<html>
<head>
    <meta charset="UTF-8">
    <title>TEST</title>
</head>
<body>
    <div>
        <input type="text" class="class_1" value="val_1">
        <input type="text" class="class_2" value="val_2">
        <input type="text" class="class_3" value="val_3">
        <input type="text" class="class_4" value="val_4">
        <input type="text" class="class_5" value="val_5">
    </div>
    <button>BUILD</button>
</body>
</html>

Ответы [ 6 ]

0 голосов
/ 27 февраля 2019

Предоставляет ли это то, что вы ищете?Использование Array.map для преобразования вашей коллекции элементов.Изменено на основе предложения Ele of Computed Property 

document.querySelector("button").onclick = function() {

  let arr = Array.from(document.querySelectorAll("div input")).map(x => {
    return {[x.className] : x.value};
  });

  console.log(arr);
};
<html>

<head>
  <meta charset="UTF-8">
  <title>TEST</title>
</head>

<body>
  <div>
    <input type="text" class="class_1" value="val_1">
    <input type="text" class="class_2" value="val_2">
    <input type="text" class="class_3" value="val_3">
    <input type="text" class="class_4" value="val_4">
    <input type="text" class="class_5" value="val_5">
  </div>
  <button>BUILD</button>
</body>

</html>
0 голосов
/ 27 февраля 2019

Вы должны использовать computed-property-names, и вы должны обернуть пару ключ-значение {[x.className.toString()] : x.value.toString()} следующим образом: 

document.querySelector("button").onclick = function() {
    var json_array = [];
    document.querySelectorAll("div input").forEach(x => {
        json_array.push({[x.className.toString()] : x.value.toString()}); // DOESN'T WORK
//                       ^^^^^^^^^^^^^^^^^^^^^^^^
        
    });
    console.log(json_array);
};
<html>
<head>
    <meta charset="UTF-8">
    <title>TEST</title>
</head>
<body>
    <div>
        <input type="text" class="class_1" value="val_1">
        <input type="text" class="class_2" value="val_2">
        <input type="text" class="class_3" value="val_3">
        <input type="text" class="class_4" value="val_4">
        <input type="text" class="class_5" value="val_5">
    </div>
    <button>BUILD</button>
</body>
</html>
0 голосов
/ 27 февраля 2019

Вам необходимо push объект с динамическими именами свойств : 

json_array.push({[x.className.toString()]: x.value.toString()});

Демонстрация: 

document.querySelector("button").onclick = function() {
  var json_array = [];
  document.querySelectorAll("div input").forEach(x => {
    json_array.push({
      [x.className.toString()]: x.value.toString()
  });
  console.log(json_array);
};
<html>

<head>
  <meta charset="UTF-8">
  <title>TEST</title>
</head>

<body>
  <div>
    <input type="text" class="class_1" value="val_1">
    <input type="text" class="class_2" value="val_2">
    <input type="text" class="class_3" value="val_3">
    <input type="text" class="class_4" value="val_4">
    <input type="text" class="class_5" value="val_5">
  </div>
  <button>BUILD</button>
</body>

</html>

Однако если вы хотите объект , используйте скобочную запись для добавления свойств: 

document.querySelector("button").onclick = function() {
  var json_array = {};
  document.querySelectorAll("div input").forEach(x => {
    json_array[x.className.toString()] = x.value.toString();
  });
  console.log(json_array);
};
<html>

<head>
  <meta charset="UTF-8">
  <title>TEST</title>
</head>

<body>
  <div>
    <input type="text" class="class_1" value="val_1">
    <input type="text" class="class_2" value="val_2">
    <input type="text" class="class_3" value="val_3">
    <input type="text" class="class_4" value="val_4">
    <input type="text" class="class_5" value="val_5">
  </div>
  <button>BUILD</button>
</body>

</html>
0 голосов
/ 27 февраля 2019

Object не имеет push, это функция массива, вам нужно добавить ключи с помощью скобки: json_array[x.className] = x.value

document.querySelector("button").onclick = function() {
    var json_array = {};
    document.querySelectorAll("div input").forEach(x => {
        json_array[x.className] = x.value
    });
    console.log(json_array);
};
<html>
<head>
    <meta charset="UTF-8">
    <title>TEST</title>
</head>
<body>
    <div>
        <input type="text" class="class_1" value="val_1">
        <input type="text" class="class_2" value="val_2">
        <input type="text" class="class_3" value="val_3">
        <input type="text" class="class_4" value="val_4">
        <input type="text" class="class_5" value="val_5">
    </div>
    <button>BUILD</button>
</body>
</html>
0 голосов
/ 27 февраля 2019 
document.querySelector("button").onclick = function() {
    var json_array = [];
    document.querySelectorAll("div input").forEach(x => {
        json_array.push({x.className.toString() : x.value.toString())}); // DOESN'T WORK
    });
    console.log(json_array);
};

Я думаю, что все здесь все еще пытаются угадать конкретную форму желаемого результата, потому что то, что вы выложили, не имеет смысла по нескольким причинам.Мое лучшее предположение о том, что вы на самом деле ищете, это ... 

 [
    {"class_1":"val_1"}, 
    {"class_2":"val_2"}, 
    {"class_3":"val_3"}, 
    {"class_4":"val_4"}, 
    {"class_5":"val_5"}
]

, который будет Массив из Объекты , с полем ввода className в качестве ключа объекта и введите value в качестве значения этого ключа.Если вы пытаетесь достичь чего-то другого, дайте мне знать.

Если вы действительно ищете один Объект с полем ввода className в качестве клавиши и вводом value как значение ключа, вот так ... 

{
    "class_1": "val_1", 
    "class_2": "val_2", 
    "class_3": "val_3", 
    "class_4": "val_4", 
    "class_5": "val_5"
}

Тогда вот как вы могли бы достичь этого ... 

document.querySelector("button").onclick = function() {
    var js_obj = {};
    document.querySelectorAll("div input").forEach(x => {
        var className = x.className.toString(),
            value = x.value.toString();
        js_obj[className] = value;
    });
    console.log(js_obj);
};
0 голосов
/ 27 февраля 2019

Если вам нужен только один объект JSON, вам нужно установить ключи: 

var json_array = {};
//...
json_array[x.className] = x.value;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...