Объект Looping javascript для печати данных

Question

У меня есть объект javascript, который я бы хотел обработать и распечатать данные на основе 1 общей категории.

Javascript объект:

var $states = { 
"AL" : { 
    "longname": "Alabama", 
    "lawOne": "Alabama Law 1", 
    "lawTwo": "Alabama Law 2", 
    "lawThree": "Alabama Law 3", 
    "region" : "Southeast" 
}, 
"AK" : { 
    "longname": "Alaska", 
    "lawOne": "Alaska Law 1", 
    "lawTwo": "Alaska Law 2", 
    "lawThree": "Alaska Law 3", 
    "region" : "Northwest" 
}, 
"AZ" : { 
    "longname": "Arizona", 
    "lawOne": "Arizona Law 1", 
    "lawTwo": "Arizona Law 2", 
    "lawThree": "Arizona Law 3", 
    "region" : "Southwest" 
}, 
etc... 
} 

Я могу тоже цикл массив и получить как гранулированных, как получить консоль войти все государства, которые находятся в том же регионе:

for (var key in $states) { 
     if ($states.hasOwnProperty(key)) { 
      var $getStateRegion = $states[key].region 

      if ($getStateRegion === "Northeast") { 
       console.log ($states[key].longname); 
      } 
     } 
    } 

После Я пытаюсь пропустить их и распечатать таблицу, в которой я столкнулся с проблемой. Я хочу иметь возможность иметь длинное имя, lawOne, lawTwo и lawThree. Что дает? Как только я попытаюсь запустить цикл for, я нахожусь на контрольном блоке. Заранее спасибо!

Answer 1

Пробуйте рабочий код ниже.

var $states = { 
 
"AL" : { 
 
    "longname": "Alabama", 
 
    "lawOne": "Alabama Law 1", 
 
    "lawTwo": "Alabama Law 2", 
 
    "lawThree": "Alabama Law 3", 
 
    "region" : "Southeast" 
 
}, 
 
"AK" : { 
 
    "longname": "Alaska", 
 
    "lawOne": "Alaska Law 1", 
 
    "lawTwo": "Alaska Law 2", 
 
    "lawThree": "Alaska Law 3", 
 
    "region" : "Northwest" 
 
}, 
 
"AZ" : { 
 
    "longname": "Arizona", 
 
    "lawOne": "Arizona Law 1", 
 
    "lawTwo": "Arizona Law 2", 
 
    "lawThree": "Arizona Law 3", 
 
    "region" : "Southwest" 
 
} 
 
}; 
 

 
var result = {}; 
 
Object.keys($states).forEach(function(key) { 
 
    if ($states[key]["region"] === "Southwest") { 
 
    result[key] = $states[key]; 
 
    } 
 
}); 
 
console.log(result);

Answer 2

Вы на правильном пути. Прежде чем продолжить, я хотел бы указать, что вы используете цикл for..in, но более новые версии Javascript поддерживают цикл for..of, так что это то, что вы, возможно, захотите рассмотреть. Разница в том, что цикл for..in дает вам ключи объекта, а цикл for..of дает вам значения, поэтому он сокращает код, пропуская шаг, на котором вы пишете что-то, что действует:

for(var index in array){ 
    var currentObject = array[ index ]; 
} 

Секрет вашего решения заключается в том, как вы обрабатываете DOM, и есть много способов сделать это. Я покажу вам один, но это не обязательно самый быстрый или лучший. Я рекомендую поиграть с различными манипуляторами DOM, чтобы найти тот, который лучше всего подходит для вас.

Во-первых, мы знаем, как получить запись, поэтому Javascript аспект цикла, у вас есть, что обработано ...

Далее нам нужно создать таблицу .... я буду считать, что вы хотите четыре столбца на основе вашего описания, но вы можете легко настроить это, чтобы поместить название состояния и один закон в каждую строку, что, вероятно, будет лучшим дизайном, позволяющим варьировать количество законов.

HTML, будет выглядеть примерно так:

<table> 
    <tr><th>State</th><th>Law 1</th><th>Law 2</th><th>Law 3</th></tr> 
    <!-- Here is where we would create new html for each state --> 
</table> 

Ваш цикл, то нужно было бы добавить к этому HTML, создав несколько строк, которые выглядят как:

<tr><td>[State]</td><td>[Law1]</td><td>[Law2]</td><td>[Law3]</td><tr> 

Мы будем использовать строку манипуляции DOM, потому что это хорошее место для начала, потому что оно больше похоже на то, что вы пишете вручную.

Мы разложим стол на три части: заголовок, корпус и нижний колонтитул.

var header = "<table><tr><th>State</th><th>Law 1</th><th>Law 2</th><th>Law 3</th></tr>"; 

var body = ""; //this is where we add the data 

var footer = "</table>"; 

Теперь на петле, мы будем создавать каждую линию по мере необходимости и добавить его к телу:

for(var index in stateObj){ 
     ...error checking occurs here... 
     var state = stateObj[ index ]; 
     var stateColumn = "<td>" + state.longname + "</td>"; 
     var law1Col = "<td>" + state.lawOne + "</td>"; 
     var law2Col = "<td>" + state.lawTwo + "</td>"; 
     var law3Col = "<td>" + state.lawThree + "</td>"; 
     var row = "<tr>" + stateColumn + law1Col + law2Col + law3Col + "</tr>"; 
     //now that we have a row, we add it to the body 
     body += row; //same as body = body + row; 
} 

После того, как у нас есть тело, мы можем сделать нашу таблицу, комбинируя заголовок, тело и нижние колонтитулы:

var tableHTML = header + body + footer; 

и тогда мы находим место, чтобы впрыснуть в наш документ:

var outputDiv = document.getElementById("stateTableData"); 
outputDiv.innerHTML = tableHTML; 

Вот живой пример:

var states = { 
 
    PA: { 
 
    longname:"Pennsylvania", 
 
    lawOne:"It is illegal to sing in the shower in apartment buildings within the city limits of Philadelphia", 
 
    lawTwo:"All motorists are required to stop the vehicle for passing horsemen. The vehicle shall be covered with camoflage so as not to scare the horses.", 
 
    lawThree:"Any house having more than four women occupants shall be considered a brothel and shall be in violation of the law." 
 
}, 
 
    NJ: { 
 
     longname:"New Jersey", 
 
     lawOne:"There is no such thing as the Mafia", 
 
     lawTwo:"Any reference to the denizens of New Jersey shall be derogatory and degrading, think Jersey Shore", 
 
     lawThree:"There is no escape from New Jersey and we are not a suburb of NYC" 
 
     }, 
 
    VA: { 
 
     longname:"Virginia", 
 
     lawOne: "Civil War re-enactments must have the North as the victor.", 
 
     lawTwo: "All roads shall end in Richmond, VA", 
 
     lawThree: "I have run out of silly ideas for this example." 
 
    } 
 
}; 
 
function buildTableForState(stateNames){ 
 
    var stateList = stateNames.split(","); 
 
    
 
    //remove spaces 
 
    for(var i in stateList){ stateList[i] = stateList[i].trim(); } 
 
    
 
    //initialize table parts 
 
    var header = "<table><tr><th>State</th><th>Law 1</th><th>Law 2</th><th>Law 3</th></tr>"; 
 
    var footer = "</table>"; 
 
    var body = ""; 
 
    
 
    //build body 
 
    for(var index in states){ 
 
     if(stateList.indexOf(index) !== -1){ 
 
      var currentState = states[index]; 
 
      body += buildRowForState(currentState); 
 
     } 
 
    } 
 
    
 
    //compose and inject table 
 
    var tableHTML = header + body + footer; 
 
    var documentOut = document.getElementById("outputDiv"); 
 
    documentOut.innerHTML = tableHTML; 
 
} 
 

 
function submitTable(value){ 
 
    buildTableForState(value); 
 
} 
 

 
function buildRowForState(currentState){ 
 
    var state = makeTableCol(currentState.longname); 
 
    var law1 = makeTableCol(currentState.lawOne); 
 
    var law2 = makeTableCol(currentState.lawTwo); 
 
    var law3 = makeTableCol(currentState.lawThree); 
 
    var row = makeTableRow([state, law1, law2, law3]); 
 
    return row; 
 
} 
 

 
function makeTableCol(stringText){ 
 
    return "<td>" + stringText + "</td>"; 
 
} 
 

 
function makeTableRow(arrayColumns){ 
 
    return "<tr>" + arrayColumns.join("") + "</tr>"; 
 
}

<h1>Table Loader</h1> 
 
<form> 
 
    <p>Use the values "PA", "NJ", and "VA" to generate a table. You can use more than one value by separating them with a comma.</p> 
 
    <input type="text" id="stateNames" name="stateNames" /><br/> 
 
    <button onclick="submitTable(stateNames.value);">Build Table</button> 
 
    <p>Try: 
 
    </p> 
 
    <ul> 
 
    <li>PA</li> 
 
    <li>NJ,VA</li> 
 
    <li>VA,PA,NJ</li> 
 
    </ul> 
 
</form> 
 

 
<h1>Table Output appears here</h1> 
 
<div id="outputDiv"></div>

ПРИМЕЧАНИЕ: Что касается живого кода, HTML больше, чем поле дисплея. В моем браузере мне нужно прокрутить снимок HTML-кода для просмотра сгенерированной таблицы. Либо это, либо расширьте окно snippit до полной вкладки, чтобы просмотреть его на большом экране.

Приведенный выше код упрощен, и большинство кодеров скажут вам не использовать HTMLElement.innerHTML, потому что он работает медленно, но это хорошее место для начала. Как только у вас это будет, начните практиковать с помощью document.create (tagName), а затем используйте более прямые манипуляции с DOM.