Json как найти значение - Avtoru.top - решение различных проблем

I had a JSON string / object in my application.

{"list": [
    {"name":"my Name","id":12,"type":"car owner"},
    {"name":"my Name2","id":13,"type":"car owner2"},
    {"name":"my Name4","id":14,"type":"car owner3"},
    {"name":"my Name4","id":15,"type":"car owner5"}
]}

I had a filter box in my application, and when I type a name into that box, we have to filter the object and display the result.

For example, if the user types «name» and hits search, then we have to search full names in the JSON object and return the array, just like a MySQL search …

My question is to filter the json object with string and return the array….

asked May 21, 2012 at 4:42

rameshramesh

3,97613 gold badges71 silver badges117 bronze badges

You could just loop through the array and find the matches:

var results = [];
var searchField = "name";
var searchVal = "my Name";
for (var i=0 ; i < obj.list.length ; i++)
{
    if (obj.list[i][searchField] == searchVal) {
        results.push(obj.list[i]);
    }
}

answered May 21, 2012 at 4:49

McGarnagleMcGarnagle

101k31 gold badges228 silver badges260 bronze badges

If your question is, is there some built-in thing that will do the search for you, then no, there isn’t. You basically loop through the array using either String#indexOf or a regular expression to test the strings.

For the loop, you have at least three choices:

A boring old for loop.
On ES5-enabled environments (or with a shim), Array#filter.
Because you’re using jQuery, jQuery.map.

Boring old for loop example:

function search(source, name) {
    var results = [];
    var index;
    var entry;

    name = name.toUpperCase();
    for (index = 0; index < source.length; ++index) {
        entry = source[index];
        if (entry && entry.name && entry.name.toUpperCase().indexOf(name) !== -1) {
            results.push(entry);
        }
    }

    return results;
}

Where you’d call that with obj.list as source and the desired name fragment as name.

Or if there’s any chance there are blank entries or entries without names, change the if to:

        if (entry && entry.name && entry.name.toUpperCase().indexOf(name) !== -1) {

Array#filter example:

function search(source, name) {
    var results;

    name = name.toUpperCase();
    results = source.filter(function(entry) {
        return entry.name.toUpperCase().indexOf(name) !== -1;
    });
    return results;
}

And again, if any chance that there are blank entries (e.g., undefined, as opposed to missing; filter will skip missing entries), change the inner return to:

        return entry && entry.name && entry.name.toUpperCase().indexOf(name) !== -1;

jQuery.map example (here I’m assuming jQuery = $ as is usually the case; change $ to jQuery if you’re using noConflict):

function search(source, name) {
    var results;

    name = name.toUpperCase();
    results = $.map(source, function(entry) {
        var match = entry.name.toUpperCase().indexOf(name) !== -1;
        return match ? entry : null;
    });
    return results;
}

(And again, add entry && entry.name && in there if necessary.)

answered May 21, 2012 at 4:48

T.J. CrowderT.J. Crowder

1.0m187 gold badges1907 silver badges1862 bronze badges

You can simply save your data in a variable and use find(to get single object of records) or filter(to get single array of records) method of JavaScript.

For example :-

let data = {
 "list": [
   {"name":"my Name","id":12,"type":"car owner"},
   {"name":"my Name2","id":13,"type":"car owner2"},
   {"name":"my Name4","id":14,"type":"car owner3"},
   {"name":"my Name4","id":15,"type":"car owner5"}
]}

and now use below command onkeyup or enter

to get single object

data.list.find( record => record.name === "my Name")

to get single array object

data.list.filter( record => record.name === "my Name")

Ejaz47

1451 silver badge12 bronze badges

answered Feb 5, 2020 at 4:15

Anand Deep SinghAnand Deep Singh

2,5173 gold badges22 silver badges28 bronze badges

Use PaulGuo’s jSQL, a SQL like database using javascript. For example:

var db = new jSQL();
db.create('dbname', testListData).use('dbname');
var data = db.select('*').where(function(o) {
    return o.name == 'Jacking';
}).listAll();

answered May 21, 2012 at 5:12

I adapted regex to work with JSON.

First, stringify the JSON object. Then, you need to store the starts and lengths of the matched substrings. For example:

"matched".search("ch") // yields 3

For a JSON string, this works exactly the same (unless you are searching explicitly for commas and curly brackets in which case I’d recommend some prior transform of your JSON object before performing regex (i.e. think :, {, }).

Next, you need to reconstruct the JSON object. The algorithm I authored does this by detecting JSON syntax by recursively going backwards from the match index. For instance, the pseudo code might look as follows:

find the next key preceding the match index, call this theKey
then find the number of all occurrences of this key preceding theKey, call this theNumber
using the number of occurrences of all keys with same name as theKey up to position of theKey, traverse the object until keys named theKey has been discovered theNumber times
return this object called parentChain

With this information, it is possible to use regex to filter a JSON object to return the key, the value, and the parent object chain.

You can see the library and code I authored at http://json.spiritway.co/

answered Mar 27, 2015 at 19:36

If you are doing this in more than one place in your application it would make sense to use a client-side JSON database because creating custom search functions that get called by array.filter() is messy and less maintainable than the alternative.

Check out ForerunnerDB which provides you with a very powerful client-side JSON database system and includes a very simple query language to help you do exactly what you are looking for:

// Create a new instance of ForerunnerDB and then ask for a database
var fdb = new ForerunnerDB(),
    db = fdb.db('myTestDatabase'),
    coll;

// Create our new collection (like a MySQL table) and change the default
// primary key from "_id" to "id"
coll = db.collection('myCollection', {primaryKey: 'id'});

// Insert our records into the collection
coll.insert([
    {"name":"my Name","id":12,"type":"car owner"},
    {"name":"my Name2","id":13,"type":"car owner2"},
    {"name":"my Name4","id":14,"type":"car owner3"},
    {"name":"my Name4","id":15,"type":"car owner5"}
]);

// Search the collection for the string "my nam" as a case insensitive
// regular expression - this search will match all records because every
// name field has the text "my Nam" in it
var searchResultArray = coll.find({
    name: /my nam/i
});

console.log(searchResultArray);

/* Outputs
[
    {"name":"my Name","id":12,"type":"car owner"},
    {"name":"my Name2","id":13,"type":"car owner2"},
    {"name":"my Name4","id":14,"type":"car owner3"},
    {"name":"my Name4","id":15,"type":"car owner5"}
]
*/

Disclaimer: I am the developer of ForerunnerDB.

answered Dec 7, 2016 at 15:34

Rob EvansRob Evans

6,7404 gold badges38 silver badges56 bronze badges

Here is an iterative solution using object-scan. The advantage is that you can easily do other processing in the filter function and specify the paths in a more readable format. There is a trade-off in introducing a dependency though, so it really depends on your use case.

// const objectScan = require('object-scan');

const search = (haystack, k, v) => objectScan([`list[*].${k}`], {
  rtn: 'parent',
  filterFn: ({ value }) => value === v
})(haystack);

const obj = { list: [ { name: 'my Name', id: 12, type: 'car owner' }, { name: 'my Name2', id: 13, type: 'car owner2' }, { name: 'my Name4', id: 14, type: 'car owner3' }, { name: 'my Name4', id: 15, type: 'car owner5' } ] };

console.log(search(obj, 'name', 'my Name'));
// => [ { name: 'my Name', id: 12, type: 'car owner' } ]

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

<script src="https://bundle.run/object-scan@13.8.0"></script>

Disclaimer: I’m the author of object-scan

answered Nov 18, 2020 at 5:58

vincentvincent

1,8833 gold badges17 silver badges24 bronze badges

You can filter json object using any value from any property using this library
Js-Search

answered Jun 3, 2022 at 19:58

Cyber ProgsCyber Progs

3,5963 gold badges29 silver badges39 bronze badges

You can try this:

function search(data,search) {
    var obj = [], index=0;
    for(var i=0; i<data.length; i++) {
      for(key in data[i]){
         if(data[i][key].toString().toLowerCase().indexOf(search.toLowerCase())!=-1) {
                obj[index] = data[i];
                index++;
                break;
         }
     }
     return obj;
}
console.log(search(obj.list,'my Name'));

bfontaine

17.8k13 gold badges71 silver badges103 bronze badges

answered Oct 19, 2017 at 9:20

Источник

Я хочу сделать проверку файла JSON, там найти строку «nick» у всех пользователей, и сделать так:
(if(nick = "хай") return)
то есть, если у кого-то из участников nick = хай, то ничего не выполнялось, как из всего JSON найти значение nick = хай, или можно сделать проще?
Вот мой JSON:

{
		"id": 124124,
		"firstname": "Районный",
		"lastname": "Прокурор",
		"warns": 0,
		"role": 11,
		"flip": 0,
		"rank": "Участник",
		"ban": false,
		"isBanned": "Нет",
		"tempban": 0,
		"mute": 0,
		"mutesleft": 0,
		"violations": 0,
		"botmute": 0,
		"nick": "хай"
	},
	{
		"id": 123123,
		"firstname": "Кто",
		"lastname": "Никто",
		"warns": 0,
		"role": 11,
		"flip": 0,
		"rank": "Участник",
		"ban": false,
		"isBanned": "Нет",
		"tempban": 0,
		"mute": 0,
		"mutesleft": 0,
		"violations": 0,
		"botmute": 0
		"nick": "пока"
	},
	{
		"id": 125125,
		"firstname": "Крутой",
		"lastname": "Поц",
		"warns": 0,
		"role": 1,
		"flip": 0,
		"rank": "Участник",
		"ban": false,
		"isBanned": "Нет",
		"tempban": 0,
		"mute": 0,
		"mutesleft": 0,
		"violations": 0
		"nick": "привет"
	}

Источник

I have the next JSON:

var JSONObject = {"animals": [{name:"cat"}, {name:"dog"}]};

What is the best way to know if the «dog» value exists in the JSON object?

Thanks.

Solution 1

var JSONObject = {"animals": [{name:"cat"}, {name:"dog"}]};
...
for (i=0; i < JSONObject.animals.length; i++) {
    if (JSONObject.animals[i].name == "dog")
        return true;
}
return false;

Solution 2 (JQuery)

var JSONObject = {"animals": [{name:"cat"}, {name:"dog"}]};
...
$.map(JSONObject.animals, function(elem, index) {
 if (elem.name == "dog") 
     return true;
});
return false;

Solution 3 (using some() method)

function _isContains(json, value) {
    let contains = false;
    Object.keys(json).some(key => {
        contains = typeof json[key] === 'object' ? 
        _isContains(json[key], value) : json[key] === value;
        return contains;
    });
    return contains;
}

asked Jun 17, 2011 at 10:25

IvanIvan

1,4673 gold badges18 silver badges36 bronze badges

var JSON = [{"name":"cat"}, {"name":"dog"}];

The JSON variable refers to an array of object with one property called «name».
I don’t know of the best way but this is what I do?

var hasMatch =false;

for (var index = 0; index < JSON.length; ++index) {

 var animal = JSON[index];

 if(animal.Name == "dog"){
   hasMatch = true;
   break;
 }
}

Sam

1,22413 silver badges18 bronze badges

answered Jun 17, 2011 at 10:37

Check for a value single level

const hasValue = Object.values(json).includes("bar");

Check for a value multi-level

function hasValueDeep(json, findValue) {
    const values = Object.values(json);
    let hasValue = values.includes(findValue);
    values.forEach(function(value) {
        if (typeof value === "object") {
            hasValue = hasValue || hasValueDeep(value, findValue);
        }
    })
    return hasValue;
}

answered Sep 18, 2017 at 5:03

GiboltGibolt

41.3k15 gold badges183 silver badges125 bronze badges

Below function can be used to check for a value in any level in a JSON

function _isContains(json, value) {
    let contains = false;
    Object.keys(json).some(key => {
        contains = typeof json[key] === 'object' ? _isContains(json[key], value) : json[key] === value;
         return contains;
    });
    return contains;
 }

then to check if JSON contains the value

_isContains(JSONObject, "dog")

See this fiddle: https://jsfiddle.net/ponmudi/uykaacLw/

Most of the answers mentioned here compares by ‘name’ key.
But no need to care about the key, can just checks if JSON contains the given value. So that the function can be used to find any value irrespective of the key.

answered Feb 16, 2017 at 4:14

Ponmudi VNPonmudi VN

1,4831 gold badge18 silver badges22 bronze badges

Why not JSON.stringify and .includes()?

You can easily check if a JSON object includes a value by turning it into a string and checking the string.

console.log(JSON.stringify(JSONObject).includes("dog"))
--> true

Edit: make sure to check browser compatibility for .includes(), and this approach should be used only when the key names are known to not be the search value.

answered Nov 30, 2020 at 12:13

J.E.C.J.E.C.

2,4862 gold badges17 silver badges21 bronze badges

Because the «dog» you are looking for is inside of an array, then you may also use filter function, which returns always an array of items that much the filter criteria.
If the applied filter returns an empty array then no entries for «dog».

const JSONObject = {"animals": [{name: "cat"}, {name: "dog"}]}; // Your array

const exists = JSONObject.animals.filter(item => item.name === "dog").length > 0;
console.log("Exists? " + exists); // Exists: true

You may also get a count of how many times dog exists in your array.

const JSONObject = {"animals": [{name: "cat"}, {name: "dog"}]}; // Your array

const existsCount = JSONObject.animals.filter(item => item.name === "dog").length;
console.log("Exists: " + existsCount + " time(s)"); // Exists: 1 time(s)

answered Aug 23, 2021 at 9:05

You could improve on the answer from Ponmudi VN:

Shorter Code
Look for a key and a value

See this fiddle: https://jsfiddle.net/solarbaypilot/sn3wtea2/

function _isContains(json, keyname, value) {

return Object.keys(json).some(key => {
        return typeof json[key] === 'object' ? 
        _isContains(json[key], keyname, value) : key === keyname && json[key] === value;
    });
}

var JSONObject = {"animals": [{name:"cat"}, {name:"dog"}]};


document.getElementById('dog').innerHTML = _isContains(JSONObject, "name", "dog");
document.getElementById('puppy').innerHTML = _isContains(JSONObject, "name", "puppy");

answered Mar 13, 2019 at 11:45

var JSONObject = {"animals": [{name:"cat"}, {name:"dog"}]};

 var Duplicate= JSONObject .find(s => s.name== "cat");
        if (typeof (Duplicate) === "undefined") {
           alert("Not Exist");
           return;
        } else {
            if (JSON.stringify(Duplicate).length > 0) {
                alert("Value Exist");
                return;
            }
        }

answered Jul 20, 2020 at 11:43

This example puts your JSON into proper format and does an existence check. I use jquery for convenience.

http://jsfiddle.net/nXFxC/

<!-- HTML -->
<span id="test">Hello</span><br>
<span id="test2">Hello</span>

//Javascript

$(document).ready(function(){
    var JSON = {"animals":[{"name":"cat"}, {"name":"dog"}]};

if(JSON.animals[1].name){      
$("#test").html("It exists");
}
if(!JSON.animals[2]){       
$("#test2").html("It doesn't exist");
}
});

Kevin Panko

8,30819 gold badges49 silver badges61 bronze badges

answered Jun 17, 2011 at 10:53

Kevin BowersoxKevin Bowersox

92.9k19 gold badges157 silver badges187 bronze badges

I think this is the best and easy way:

$lista = @()

$lista += ('{"name": "Diego" }' | ConvertFrom-Json)
$lista += ('{"name": "Monica" }' | ConvertFrom-Json)
$lista += ('{"name": "Celia" }' | ConvertFrom-Json)
$lista += ('{"name": "Quin" }' | ConvertFrom-Json)

if ("Diego" -in $lista.name) {
    Write-Host "is in the list"
    return $true

}
else {
    Write-Host "not in the list"
    return $false
}

answered Mar 31, 2020 at 15:33

Источник

Одним из наиболее часто используемых методов сериализации данных является формат JSON. Python имеет встроенный модуль JSON для работы с данными JSON. Он поддерживает все типы примитивных типов данных, такие как число, строка и т. Д., А также объекты Python. Данные хранятся в структурированном формате в JSON. Иногда требуется поиск определенных данных из большой строки JSON или файла JSON. Есть много способов поиска конкретных данных из данных JSON. В этой статье показано, как искать данные JSON по ключу или значению с помощью скрипта Python.

Пример-1: ключ поиска в простых данных JSON

Следующий скрипт показывает, как искать, существует ли конкретный ключ в строке JSON или нет. Здесь переменная с именем данные клиентов определен для хранения данных JSON. Значение ключа будет введено пользователем. Метод load () модуля JSON используется для загрузки данных JSON в переменную с именем клиент. Следующий, ‘в’ оператор используется для поиска ключа.

#! / usr / bin / env python3
# Импортировать модуль json

Импортировать json
# Определить данные json
данные клиентов ={
«id»: «3425678»,
«name»: «Джон Майкл»,
«электронное письмо»: «[электронная почта защищена]«,
«тип»: «обычный»,
«адрес»: «4258 Поплар Чейз Лейн, Бойсе, Айдахо».
}
# Введите значение ключа, которое вы хотите найти
keyVal =Вход(«Введите ключевое значение: п«)
# загружаем данные json
клиент = json.грузы(данные клиентов)
# Поиск значения ключа с помощью оператора ‘in’
если keyVal в клиент:
# Вывести сообщение об успешном завершении и значение ключа
Распечатать(«% s находится в данных JSON» % keyVal)
Распечатать(«Значение», keyVal,«является», клиент[keyVal])
еще:
# Распечатать сообщение, если значение не существует
Распечатать(«% s не найден в данных JSON» % keyVal)

Выход:

Здесь скрипт выполняется два раза. Существующее значение ключа дается в первый раз, а несуществующее значение ключа дается во второй раз.

Пример-2: поиск определенного значения в данных JSON

Следующий скрипт показывает, как искать определенное значение в данных JSON. претенденты переменная содержит данные JSON, где ключ используется для хранения имени кандидата, а значение используется для хранения кандидата, присутствует или отсутствует. Скрипт выполнит поиск значения «Отсутствует» в данных JSON и распечатает соответствующее значение имени. для Здесь используется цикл для перебора данных JSON.

#! / usr / bin / env python3
# Импортировать модуль json
Импортировать json
# Определить данные json
претенденты ={
«Скотт Олдридж»: «Настоящее»,
«Джо Л. Фосс»: «Настоящее»,
«Клайд М Голд»: «Подарок»,
«Моник Си Дулиттл»: «Отсутствует»,
«Дэвид М. Волкерт»: «Настоящее»,
«Israel M Oneal»: «Настоящее»,
«Элизабет М. Грофф»: «Отсутствует»
}
# Инициализировать счетчик
прилавок =0
# загружаем данные json
appList = json.грузы(претенденты)
# повторяем json, чтобы найти список отсутствующих кандидатов
для ключ в appList:
если(appList[ключ]==‘Нет на месте’):
# Проверить счетчик и распечатать сообщение
если(прилавок ==0):
Распечатать(«Отсутствуют следующие претенденты:»)
Распечатать(ключ)
прилавок = счетчик + 1
# Распечатать сообщение, если заявитель отсутствует
если(прилавок ==0):
Распечатать(«Присутствуют все претенденты»)

Выход:

По данным JSON из скрипта два претендента отсутствуют. Это будет результат после запуска скрипта:

Пример-3: поиск значения в данных массива JSON с помощью пользовательской функции

В следующем скрипте массив JSON с именем jsondata определено. Здесь будет выполняться поиск определенного значения ключа, и если значение существует, то значение другого связанного ключа будет напечатано в качестве вывода. search_price () функция определяется здесь, принимает значение название ключ, который будет найден в данных JSON, и он распечатает значение соответствующего Цена за единицу ключ.

#! / usr / bin / env python3
# Импортировать модуль json
Импортировать json
# Определить переменную json
jsondata =[
{
«name»: «Ручка»,
«unit_price»: 5
},
{
«name»: «Ластик»,
«unit_price»: 3
},
{
«name»: «Карандаш»,
«unit_price»: 10
},
{
«name»: «Белая книга»,
«unit_price»: 15
}
]
# загружаем данные json
Предметы = json.грузы(jsondata)
# Введите имя элемента, который вы хотите найти
элемент =Вход(«Введите название элемента: п«)
# Определить функцию для поиска элемента
def search_price (название):
для ключевой в Предметы:
если название.ниже()== ключевой[‘название’].ниже():
возвращение ключевой[‘Цена за единицу’]
# Проверить возвращаемое значение и распечатать сообщение
если(search_price(элемент)!=Никто):
Распечатать(«Цена:», search_price(элемент))
еще:
Распечатать(«Товар не найден»)

Выход:

В этом выводе сценарий выполняется два раза. ‘карандаш’ принимается за значение название ключ, который существует в JSON данные. В Цена за единицу из ‘карандаш’ является 10 что напечатано. Следующий, ‘книга’ принимается как входное значение, которого нет в данных JSON.

Пример-4: ключ поиска во вложенных данных JSON

В следующем скрипте показаны шаги по поиску значения определенного ключа во вложенных данных JSON. Здесь вложенная переменная JSON с именем вложенные данные объявлен для хранения вложенных данных. Этот скрипт выполнит поиск по названию бренда женских часов.

#! / usr / bin / env python3
# Импортировать модуль json
Импортировать json
# Определить json-переменную вложенных данных
вложенные данные ={
«смотреть»:{
«мужчины»:{
«бренд»: «Титан»,
«цена»: 200
},
«женщины»:{
«бренд»: «Гражданин»,
«цена»: 250
},
«ребенок»:{
«бренд»: «Blancpain»,
«цена»: 100
}
}
}
# Загрузить данные json
список наблюдения = json.грузы(вложенные данные)
# Искать «бренд» для женщин
если«бренд»в список наблюдения[‘смотреть’][‘женщины’]:
Распечатать(список наблюдения[‘смотреть’][‘женщины’][«бренд»])

Выход:

В приведенном выше сценарии существует только одна ценность бренда для женских часов: «Гражданин’. Следующее будет результатом выполнения скрипта.

Пример 5: поиск записи из файла JSON с использованием метода фильтрации и лямбда

Следующие шаги показывают, как можно искать запись в файле JSON на основе определенного ключа и значений. Содержание books.json файл приведен ниже.

books.json

[
{
«isbn»: «7799349885»,
«название»: «Основы динамики автомобиля»,
«автор»: «Юп П. Pauwelussen «
},
{
«isbn»: «7799349885»,
«название»: «Течение и сгорание в поршневых двигателях»,
«автор»: «С. Аркуманис и Т. Камимото «
},
{
«isbn»: «7799349885»,
«название»: «Автомобильная эргономика, взаимодействие водителя с автомобилем»,
«автор»: «Николаос Гкикас»
}
]

Следующий скрипт будет искать запись из books.json файл, где значение Автор ключ Николаос Гкикас с использованием лямбда и фильтр() метод.

#! / usr / bin / env python3
# Импортировать модуль JSON
Импортировать json
# Открываем существующий файл JSON для загрузки в переменную
соткрыто(‘books.json’)в виде jsondata:
данные = json.нагрузка(jsondata)
# Поиск данных по ключу и значению с использованием метода фильтра и списка
Распечатать(список(фильтр(лямбда х: х[«автор»]==«Николаос Гкикас»,данные)))

Выход:

Следующий вывод появится после запуска скрипта.

Вывод:

При работе с большим объемом данных JSON и необходимости с легкостью извлекать конкретную информацию из данных, мы должны использовать эффективные способы выполнения задачи. В этой статье объясняются различные способы поиска ключа и значения в данных JSON, чтобы помочь пользователям Python успешно выполнить этот процесс.

Источник

Edit me

Этот раздел продолжает предыдущую тему: Изучение полезных данных в JSON ответе. На странице, где мы залоггировали ответ от сервиса погоды на консоль JS, информация ответа REST не появилась на странице. Она появилась только в консоли JS. Нам нужно использовать точечную нотацию и JavaScript для доступа к нужным значениям JSON. В этом разделе мы используем JavaScript, чтобы отобразить часть ответа на странице.

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

JSON был бы не очень полезен, если бы всегда приходилось распечатывать весь ответ. Вместо этого можно выбрать нужное свойство, и получить его через точечную запись. Точка . после response (имя полезной данной JSON, как она определена произвольно в функции JQuery AJAX) определяет доступ к нужным значениям из объекта JSON.

Допустим, мы хотим извлечь часть о скорости ветра в ответе JSON. Так выглядит точечная нотация, которую нужно использовать:

Чтобы извлечь элемент скорости ветра из ответа JSON и распечатать его в консоли JavaScript, добавляем его в пример кода (который мы создали в предыдущем разделе) прямо под строкой console.log (response):

console.log("wind speed: " + response.wind.speed);

Код будет выглядеть так:

$.ajax(settings).done(function (response) {
    console.log(response);
    console.log("wind speed: " + response.wind.speed);
});

После этого обновляем браузер и видим информацию, появившуюся в консоли.

Вывод JSON значения на страницу

Допустим, нам надо вывести часть JSON (данные о скорости ветра) на страницу, а не только в консоли. (Под словом “вывести” подразумевается отображение значения странице, а не отправка на принтер.) Для вывода значения требуется немного JavaScript (или jQuery для упрощения).

Работать будем с тем же кодом из предыдущего раздела. Этот код выглядит так:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <title>Sample Page</title>
      <script>
         var settings = {
           "async": true,
           "crossDomain": true,
           "url": "https://api.openweathermap.org/data/2.5/weather?zip=95050&appid=fd4698c940c6d1da602a70ac34f0b147&units=imperial",
           "method": "GET"
         }

         $.ajax(settings).done(function (response) {
           console.log(response);
         });
      </script>
   </head>
   <body>
      <h1>Sample Page</h1>
   </body>
</html>

Для вывода определенного значения ответа на страницу:

Добавим следующие строки внутрь функции ajax

$.ajax(settings).done(function (response) {
console.log(response);

var content = response.wind.speed;
$("#windSpeed").append(content);

});

В теле страницы (внутри тега body) добавим следующий тэг div:

<body>
    <h1>Sample page</h2>
    <div id="windSpeed">Wind speed: </div>
</body>

Код должен получиться таким:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <title>Sample Page</title>
      <script>
         var settings = {
           "async": true,
           "crossDomain": true,
           "url": "https://api.openweathermap.org/data/2.5/weather?zip=95050&appid=fd4698c940c6d1da602a70ac34f0b147&units=imperial",
           "method": "GET"
         }

         $.ajax(settings).done(function (response) {
           console.log(response);

           var content = response.wind.speed;
           $("#windSpeed").append(content);

         });
      </script>
   </head>
   <body>
      <h1>Sample Page</h1>
      <div id="windSpeed">Wind speed: </div>
   </body>
</html>

Обновляем страницу и видим отображение скорости ветра на странице Пример здесь с выведенными со скоростью ветра и погодными условиями.

Вот что мы изменили:

В теге метода done AJAX’а извлекли желаемое значение в переменную:

var content = response.wind.speed;

И добавили названный элемент в тело страницы

<div id="windSpeed">Wind speed: </div>

Мы использовали метод append jQuery для добавления переменной content к элементу с ID windSpeed на странице:

$("#windSpeed").append(content);

Этот код говорит: найди элемент с ID windSpeed и добавь переменную content после него.

Получение значения из массива

В предыдущей части мы получили значение из объекта JSON. Теперь получим значение из массива. Давайте получим свойство main из массива weather в ответе. Вот как выглядит массив JSON:

{
  "weather": [
    {
      "id": 801,
      "main": "Clouds",
      "description": "few clouds",
      "icon": "02d"
    }
  ]
}

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

В то время как объекты позволяют вам получить определенное свойство, массивы требуют, чтобы вы выбрали нужную позицию в списке.

Теперь код будет выглядеть так:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Sample Page</title>

<script>
var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://api.openweathermap.org/data/2.5/weather?zip=95050&appid=fd4698c940c6d1da602a70ac34f0b147&units=imperial",
  "method": "GET"
}

$.ajax(settings).done(function (response) {
  console.log(response);

  var content = response.wind.speed;
  $("#windSpeed").append(content);

  var currentWeather = response.weather[0].main;
  $("#currentWeather").append(currentWeather);

});
</script>
</head>
<body>
<h1>Sample Page</h1>

<div id="windSpeed">Wind speed: </div>
<div id="currentWeather">Current weather conditions: </div>

</body>
</html>

Дополнительные упражнения

При желании можно выполнить еще несколько упражнений, которые включают вызовы API REST, доступ к определенным значениям и вывод значений на странице, см. Следующие разделы в модуле «Глоссарий и ресурсы»:

Получаем информацию о событии при использовании API Eventbrite
Пример Flickr: извлекаем галерею Flickr
Получаем скорость ветра при использовании сервиса API Aeris Weather

🔙

Go next ➡

Источник

Check for a value single level

Check for a value multi-level

Пример-1: ключ поиска в простых данных JSON

Пример-2: поиск определенного значения в данных JSON

Пример-3: поиск значения в данных массива JSON с помощью пользовательской функции

Пример-4: ключ поиска во вложенных данных JSON

Пример 5: поиск записи из файла JSON с использованием метода фильтрации и лямбда

Вывод:

Вывод JSON значения на страницу

Получение значения из массива

Дополнительные упражнения

Не пропустите также: